Android App UI Design with Adobe XD & Google Material Design
4.4 (54 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
443 students enrolled

Android App UI Design with Adobe XD & Google Material Design

Learn how to use Google Material Design Guidelines to create a stunning UI of an Android App using Adobe XD
4.4 (54 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
443 students enrolled
Last updated 1/2020
English
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Master Specs and Sizes of Google Material Design
  • Design awesome looking Professional Android Apps
  • Learn about DP, SP, PX measurement units of Material Design
  • Build a powerful Material Color scheme for your App
  • Export your Android App graphics for all Android Densities
  • What is MDPI, HDPI, XHDPI and XXHDPI and how to design for them?
  • Use Zeplin to export coded Style Guides for your Android Developes
Requirements
  • Basic knowledge of Adobe XD
  • Adobe XD Installed
Description

Designing Android Apps on a professional level where your coders can't say "We can't code that design" is really difficult. You need to learn what is DP, SP, DPI and how you need to explain the sizes of your Android App elements in DPs and how you can define a great color scheme your coders can praise. What about exporting your design assets for multiple Android screen sizes and what about automatically creating the coded specs and style guide for your developers

Following Google Material Design Guidelines is not easy as a UI Designer and its a must learn skill for every User Interface Designer

From Design to Specs to Exporting assets and Coded Style Guide, learn all that in this course using Adobe XD

You will learn all that in this course

  • How these DPs and SP Material Design units work?

  • What are Density Buckets and how do we design for all the different Android Phone Resolutions?

  • How to theme your App using Google Material Colors?

  • Understand all the Specs, Sizes and Typographic Grids of Material Design

  • What's new and possible with Material Design 2.0?

  • Design a real world actual App using XD art-boards

  • Extract all your assets using Adobe XD Batch export

  • Handoff your Android Designs to your Developers using Zeplin

  • What are 9-patch PNG assets and how to generate them?

  • Generate Coded Style Guides for your Android Developers

  • Design 6 Android App Screens UI of a Medical App using Adobe XD

I hope this course will enable you to become a professional Android App UI Designer

Take design leap and join my course now

Who this course is for:
  • UI Designer
  • Developer
  • App Coder
  • Graphic Designer
  • Android Developer
  • Web Designer
Course content
Expand all 48 lectures 04:50:14
+ Introduction to Units of Material Design
9 lectures 34:44

Introduction to what this Android Design course will cover and who is this course for. 

If you are a beginner in Adobe XD, take my other course Adobe XD, Design, Prototype and Collaborate (for Beginners)

Preview 02:44

A lot of people get confused by Screen Resolution and Screen Density of Smart Devices. In this lesson you will learn the difference between the two and install a Free App to measure the screen resolution and density of your own Device

Preview 07:20

So what is DP (Device Independent Pixel) and how Material Design uses it for different sizing of its design elements. Also how the DPs will translate into pixel sizes

What is DP (Device Independent Pixels) and how its different from PX?
04:14

Free online tools to convert DP to PX and convert Pixels to DPs

DP to PX conversion Online Tools
04:11

Learn about the 5 Density Buckets Android Material Design is using and learn why do we need to create multiple graphical assets for support all
the Android Device Density Buckets

Learn about

  • mdpi
  • hdpi
  • Xhdpi
  • XXhdpi
  • XXXhdpi
What are Android Density Buckets?
05:00

Online tool by Google to see the resolution, device sizes in inches and pixels along with Density of all the common smart devices we use

Online Tools for Screen Resolution, Density and Device Sizes
02:09

SP or Scale-able pixels are typography units used by Google Material Design to size text in Android Apps

What are SP type sizes in Google Material Design?
04:46

I will show you how you are going to use 1X Android Artboard to Design in Adobe XD

How DP works in Adobe XD?
04:17

Lets see how much you have got the concepts of Material Design

Material Concepts Quiz
5 questions
Use Android Art-board in Adobe XD and design a screen by introducing yourself. Watch the video to see the instructions
Introduce yourself while creating Android App Screen
1 question

All the assets, images, study links and resources for this Adobe XD course

Download all Resources for this course (Google Drive)
00:03
+ Material Design Specs, Sizes and Metrics
12 lectures 01:13:33

Learn about all the User Interface regions of Android Apps and what are their names and locations as it will help you design better

UI Regions of Android Apps
10:05

What is the science behind Material Design and how this whole Material Design actually works with Shadows and Elevations

How Material Design works (Base of Material Design)?
03:15

Learn about different Material Shadows and their uses in Android App Design

What are Material Shadows?
09:39

How to Setup 8 Point Square Grid in Adobe XD and how to setup 4dp grid for your Material Design typography

8-Point Grid System in Adobe XD
05:00

What is the vertical rhythm of Google Material Design and how different  vertical spacing and metrics work in Google Material Design?

Metrics and Vertical Spacings in Google Material Design
07:18

What are the standard button and icon sizes a designer must use in Android App Design. Learn the principles of Material Design

Buttons and Icon Sizes in Material Design
07:13

Different Tabs of Material Design, their sizes, specs and when to use them. Learn all that in this lesson

Learn about Android

  • Fixed tabs
  • Scroll-able tabs
Types and Specs of Tabs in Android App Design
08:38

What are the different App bar types and what are their heights and widths in DPs and when to use them. Learn all that in this lesson

App Bar in Android Material Design
03:25

Learn what are the different types of lists in Material Design and what are their sizes and when to use them

  • Single Line Lists
  • Two lines Lists
  • Three Lines Lists
Sizes and Types of Lists in Android App Design
05:11

We also have Bottom fixed Navigation in Android Apps so in this lesson, you will learn what are the specs, sizes and when to use that in your design

Specs and usage of Bottom Navigation Bar
08:09

SideNav or Navigation Drawer are used most often in Material Design and Android Apps. Learn about the sizes, specs and elevation of Nav Drawer

in this lesson

Side Nav Drawer in Material Design
02:05

How Type scale of Material design works in XD and how I have used my Type Scale in designing my Medical Android App

Android Type Scale in Adobe XD
03:35
+ Mastering Material Color Schemes and how to build one
2 lectures 14:58

If you can theme your Android Material App accurately, you have done 50% of the design work. So learn all the ins and outs of color scheme of your Android App and how many colors you actually need

How to build a superb Color Scheme in Material Design 2.0?
08:13

Few online tools that can help you build or test your color schemes and a little about accessibility issues

Online Color Scheme tools for Material Colors
06:45
+ Exercise → Design Android App using Adobe Experience Design XD
11 lectures 01:34:50

Download the UI kits needed for this exercises and assets you need for this exercise

Download UI kits and Assets before starting design
03:20

Design the login screen using Adobe XD

Design Login Screen in Adobe XD
12:22

Design the last part of login screen of your Medical Android App in Adobe XD

Design Login Screen Part 2nd
05:18

Design the Signup Screen for your Android App

Design SignUp Screen for the Medical App
09:50

Design the Fixed Tabbar for your Android App

Design Fixed Tabs top area of Android App
08:40

Design the top content area, doctors avatar and Graph in Adobe XD

Design Dashboard Top Content area Avatar and Graph
08:24

Design the Dashboard first top status card area for your Android App

Design Dashboard Card 01
12:22

Design the lower card section of Dashboard of Medical Android App

Design Dashboard Card 02
03:57

Design the activities screen using Repeat Grid in Adobe XD

Design Activities Screen in XD
12:14

Design the Sync to cloud screen of Android App in Adobe XD

Design Sync Screen using Adobe XD
07:45

Design the Navigation Drawer or Side Nav of your Android App

Design Nav Drawer for your Android App
10:38
Design 3 screens shown in next video and create a design for Messaging App for Android
Re-design a 3 Screen Android Messaging App using Adobe XD
1 question
+ Exporting assets and Design Handoff using Zeplin
3 lectures 22:46

How to use Batch export feature of Adobe XD to export all your assets in one go

Using Batch Export in Adobe XD to export your Android assets
05:25

How to use Zeplin with Adobe XD to export your designs and create a coded XML styleguide out of your XD design for your developers

Using Zeplin to create coded styleguides (MAC Only)
10:05

Learn how to create 9 patch png files for your Android Developers

Using 9 Patch tool
07:16
+ What new in Material Design 2.0?
11 lectures 42:34

Learn what is new in Google Material 2.0. What they have included more? What are the new things in Material Design 2.0

Whats new in Material 2.0
10:55

Design limitations and new Shapes allowed in Material Design 2.0

New Design Options, new shapes and a lot more
03:40

Revision of Spacing and Grid in Material Design

Spacing and Grid in Material 2.0
02:38

How Material Design uses emphasis in Button Design and what are different types and states of Buttons

Button Types, emphasis levels and button states in Material Design 2.0
03:14

Lets revise the new Material Lists 2.0

List items in Material 2.0
03:25

A new pattern called Bottom App bar has been introduced in Material 2.0. Learn all about it here

Bottom and Top App Bar
04:45

A revision in the Tabs specs of Material Design

Material Tabs 2.0
02:35

Material Card Specification and interactions. Expanding and collapsing cards and much more in this lesson

Material Cards Specs in 2.0
05:27

A new look to Material Typography system in Material Design 2.0

Type System Material 2.0
03:35

What to do next once you have finished this course?

What to do NEXT?
00:37

Discount coupons to take my next courses just for my current students

BONUS LECTURE
01:43