Android Material UI Design Masterclass with Adobe Xd

Name: Android Material UI Design Masterclass with Adobe Xd
Rating: 4.5 (305 reviews)

Learn to Design Mobile Apps following the guidliness of Material System Design using Adobe Xd.

Created byStefan Jovanovic

Last updated 9/2020

English

What you'll learn

Material Design
Material Design for Android platform
Adobe Xd
Working with Vector softwares
UI Design
UX Design
Prototyping

Course content

9 sections • 35 lectures • 6h 40m total length

Introduction3:09
Learn to design Android apps with material design guidelines using Adobe XD, crafting an elegant 17-screen recipe app and mastering key user interface components.
Download Adobe Xd2:08
Download Adobe XD from the site, install it, create your Adobe account, and explore a vector UI tool for logos, banners, Instagram stories, and storyboards, noting 2 GB cloud storage.
Introducing with Adobe Xd Interface12:07
Explore the Adobe XD interface essentials for Android Material UI design, including mobile and web templates, artboards, layers, tools, properties, alignment, and repeat grid workflows.
Introducing with Adobe Xd Assets10:40
Explore the Adobe XD assets panel to create and reuse colors, character styles, and components; build custom assets and reusable elements like buttons, with states for prototyping.
Keyboard Shortcuts12:04
Learn keyboard shortcuts for android material ui design with adobe xd, including zoom, pan, tools (v, r, y, l, b, a), copy, group, margins, and center resize.

Introducing with Material Design7:02
Explore material design as Google's design language, examining surfaces, elevation, shadows, and component behavior. Learn to compare physical and digital surfaces, and preview layout and navigation guidelines for app design.
Layouts - Material Design8:33
Learn how material design layouts use responsive columns, gutters, and margins with percentage widths and breakpoints to adapt content across mobile and tablet, while maintaining padding and component specs.
Colors - Material Design16:00
Explore the material design color system, choose primary and secondary colors with light and dark variants, test accessibility and on-color contrast, and preview and export Android color resources.
Typography - Material Design7:41

Top App Bar - Material Design16:15
Design the top app bar in Android following Material Design guidelines, including regular and contextual action bars, navigation icons, title, overflow menu, elevation, and proper sizing.
Bottom Navigation - Material Design17:32
Design bottom navigation for Android with Material Design, supporting three to five destinations at 56 dp height, with elevation and active and inactive icons and labels.
Cards - Material Design26:26
Material Design cards are explored, comparing elevated versus outlined styles. Learn to compose consistent card layouts with media, text, dividers, and actions while preserving 16 dp margins.
Floating Action Button - Material Design14:31
Design a Material Design floating action button in Adobe XD, covering regular and extended variants, margins, elevation, icons, and bottom-right placement as the primary action.
No Internet Connection Screen10:10
Design a no internet connection screen in Adobe XD by updating bottom navigation icons, adding an offline icon, adjusting opacity to 38% for disabled text, and configuring typography and layout.
Snackbar - Material Design12:38
Banner - Material Design20:32
Bottom Sheets - Material Design18:26
Chips - Material Design21:45
Learn to design material design chips—input, choice, filter, and action chips—within a bottom sheet, including layout, margins, and icons.
Buttons - Material Design16:21
Filters - Bottom Sheet7:15
Refine a bottom sheet for filters in android material ui, adjust the button and overlay margins, and add a second bottom sheet with choice chips for newest and top rated.
Search Widget - Material Design8:15
Design a material design search widget for the recipe screen, enabling search history, voice input, and a dropdown interface with icons and chips.

Favorite Recipes Screen3:02
Create a favorite recipes screen in Android material UI design, refining button navigation, saving favorites, and adding an overflow menu with color tweaks and a favorite recipes header.
Overflow Menu - Material Design8:56
Explore how to implement an overflow menu in Android using Material Design, including drop down behavior, activation by icon buttons, placement, transitions, and accessible dimensions.
Contextual Menu - Material Design6:39
Design a contextual action bar that appears when users long click to select multiple items, transforming top end bar to show the number of selected items and a delete option.
No Favorite Recipes4:32
Design a no favorite recipes screen in Android Material UI by adapting the existing recipes layout, updating icons and text, and adding a snack bar for two removed recipes.
Dialog - Material Design20:12
Explore material design dialogs and craft a confirmation dialog to prevent deleting all favorites. Learn dialog types, action button placement, focus behavior, and layout specs for a polished experience.

Overview Tab29:33
Ingredients Tab7:50
Design the Android Material UI ingredients tab with ingredient cards, images, and dividers, set margins of 16 and center the image for a clean, cohesive layout.
Instructions Tab6:39
Design the instructions screen for an Android recipe app using Material Design components in Adobe XD. Build a steps list with cards, icons, and sixteen-pixel margins.
Tabs - One More Thing...4:28
Adjusts the material design tab layout by setting height to 48, merging components, centering elements, and applying the updated tab to three other screens, with prototyping basics in adobe steam.
Apply different Theme to your App Design2:57
Apply a new material theme across your app by updating primary and secondary colors in the assets panel, so colors propagate to all screens instantly.

Requirements

No requirements, beginners can easily follow up

Description

Did you know that in the last few years there is a high demand for UI Designers? The median UI designer salary in the U.S. is $70,000/year for entry-level, and $95,000/year for a seasoned UI Designer. That's totally understandable when you think about it. UI Designers and software engineers are the ones who create something out of nothing. Their imagination, creativity, positive-mindset skill-set and experience deserve to be awarded for pushing high quality and popular products on the market. Knowing that, now it's the right time for you to take things into your own hands and start working towards that goal.

This course will provide you with all the necessary knowledge needed to start building your career as UI designer. In this course we will design an Android Application following all Material Design Guidelines. You'll learn not just how to create beautiful design but also the fundamentals, rules and Guidelines of Material System in general.

So what is this so called Material Design?

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces re-imagine the mediums of paper and ink.

We are going to cover Material Design which in this course is primarily focused on Android platform, but the things we learn can also be applied to other platforms as well, with just slight modifications.

So what are we going to design you might be asking?

Well we are going to create a simple and elegant design for Food Recipes application. We are going to design up to 17 different screens with various material design components like Top app bar, banners, bottom navigation, buttons, floating action buttons, cards, chips, dialogs, menus, snackbars, bottom sheets, tabs and more.

You'll learn how to apply Material Design color System to your project, how to combine different fonts in your project and choose typography type scale system. The type scale is a combination of thirteen font styles that are supported by the type system.

As a design tool we are going to use Adobe Xd. And That's one of the best FREE vector software's out there, with simple, easy to use and user friendly interface. The knowledge you gather throughout this course with Adobe Xd can also be applied to many different areas of graphic design. You can use Adobe Xd for UI/UX design, to design mobile, web, desktop applications, logos, banners, illustrations and basically everything you could think of.

And at the end of this course as a bonus I'm going to show you the basics of prototyping with Adobe Xd. You will learn how to give your design a life with transition animations. Even if prototyping is not in a scope of this course, I'm going to show you some prototyping fundamentals as well.

So what are you waiting for, start learning and improving your skills right away, there is no need for delay.

Who this course is for:

Mobile App Designers
UI/UX Designers
Android Developers
Graphic Designers
Web Designers

Android Material UI Design Masterclass with Adobe Xd

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 40min

Introducing with Material Design4 lectures • 39min

Splash Screen1 lecture • 18min

Recipes Screen12 lectures • 3hr 10min

Favorite Recipes Screen5 lectures • 43min

Food Joke Screen1 lecture • 6min

Details Screen5 lectures • 51min

Prototyping - BONUS1 lecture • 11min

Final Word1 lecture • 1min

Requirements

Description

Who this course is for: