Complete Guide to Android UI Design, Styles & Animations

Understand how this series will help you learn Rust and how to use it effectively

This video describes ways to create layouts that are responsive and have a great user interface in all devices, screen sizes, and resolutions.

• Scratch upon layouts for phone and tablet

• Use suggested methods for creating responsive designs

• Test the application across multiple devices

This video describes the principles and pros of Material Design, which is a style standard from Google. We also implement some components with Material Design.

• Learn the principles and pros

• Design support library

• Apply typeface and font style

This video describes layouts in Material Design that help developers to have a great user interface. Then we introduce launch screen and onboarding, which leads to a better user experience.

• Understand layouts

• Learn about launch screen

• Learn the onboarding process

This video describes and implements some common material components such as FAB and Snackbar. These components are developed by Google, so the Android application can use them easily. This makes the application consistent.

• Learn FAB in XML layout and then Kotlin code

• Learn Snackbar in XML and then Kotlin code

• Learn Chips in XML layout and then Kotlin code

This video describes the environment in Material Design, which is one of its important aspects. It helps the user to sense better and the application looks like real-world elements.

• Learn the surface concept in Material Design

• Learn and implement elevation

• Implement some motions and transitions

Hardcoding the view attributes in the layout definition file makes code larger and hard to maintain. This video introduces the styles and themes to avoid such problems.

• What is style and theme?

• The importance and features of style and theme

• Introduce platform-predefined styles and themes

The worst way and better way of styling an application are described in this video.

• How to style the app?

• Describe and implement the worst way

• Describe and implement the better way

Creating style and theme are the best ways to style an application. It helps to make code cleaner and easier to maintain and also reduces duplicate code.

• Create styles

• Create themes

• Override attribute styles of a theme in the layout definition

Sometimes, we need different colors based on the view state. For example, we need a different color on a button when the user clicks on it. Color state list is used for this purpose.

• Describe color state list

• Introduce syntax

• Create a color state list in the sample application

Sometimes we need different drawables based on the view state. For example, we need a different drawable on an image view when the user clicks on it. State list drawable is used for this purpose.

• Describe state list drawable

• Introduce syntax

• Create a state list drawable in the sample application

There are lots of view attributes that help to make a better user interface. Also, referencing attributes and resources is necessary when creating layouts.

• Describe common Android view attributes

• Reference resources

• Reference attributes

Using Material Theme helps the developer to obey the Material Design guideline. There are lots of predefined styles that make your application beautiful.

• Introducing Material Theme and variants

• Using Material Theme on the sample application and customizing the colors

• Using text styles and widget styles in the application.

For supporting Material Theme on Android versions below 21, we need to use AppCompat theme.

• Introducing AppCompat themes and variants

• Using AppCompat theme on the sample application and customizing the colors

• Using text styles and widget styles in the application.

Using inheritance in styles/themes helps you to make styles/themes that are reusable. You will have less codes and maintenance will be easier.

• Using explicit inheritance

• Using implicit inheritance

• Introducing attributes in styles and themes

Sometimes, we need to overlay or override some parts of an application. ThemeOverlay is used in these situations, like when we have a toolbar instead of action bar.

• Implementing theme on view

• Introducing ThemeOverlay and variants

• Overriding theme and using light theme with dark action bar

Android Studio theme editor helps to create or modify themes. Creating colors and using device-specific configuration can be easily done with it.

• Creating and modifying themes

• Working with colors

• Using device-specific configuration

Branding is important because you create a product for users and a product without users has no value. You should work on your branding if you want users to use and remember your product.

• Introduce branding and mobile app branding

• Exploring famous brands, effect of colors and color meaning

• Choosing color and exploring base, accent, and neutral color

Material Design has guidelines on colors. These colors help you to build an application that looks great and memorable.

• Introducing primary color and secondary color

• Introducing surface, background, and error colors

• Exploring alternative colors and color transparency

The Material website provides some tools to create a color palette. These tools help the developer to create a color palette easier and adapt it to material design guideline easier.

• Introducing Material Design color palettes

• Exploring Material palate generator

• Preview, share, and export colors for Android development

Icons have an important role in your application. Each type of icon has its own guideline. Icons can have an animation to be more attractive.

• Introduce icon types. Explore some tips and material icons.

• Explore icons on light or dark background and animated icons.

• Explore transition and duration in animated icons.

Vector images have some advantages over bitmap. Android Studio has Android Asset Studio, which helps developer to use vector images in the android project.

• Introducing vector graphics and vector asset studio

• Preserving backward compatibility for vector drawables

• Using tint on drawables

Android has a different API version with different features. Some features are available on a specific Android version but your application should work on different API version. Using version-specific styles is a solution.

• Introducing version-specific styles

• Implementing on XML

• Implementing on codes

The DayNight theme helps us to have a light theme and a dark theme in the application easily. It can be switched between light and dark and also based on the time of the device or based on the user's preference.

• Introducing DayNight theme

• Implementing DayNight theme

• Exploring different modes

Creating custom views helps us to make components reusable and also specify different attributes which can be used in XML easily.

• Introducing custom view and custom attribute

• Implementing custom view

• Implementing custom attribute

AndroidX is an alternative option to support the library that was released by Google in Jetpack.

• Introducing AndroidX

• Exploring reference and implementation

• Exploring how to migrate to AndroidX

This video will give you an overview about the course.

We will have an introduction to Android Animations.

• Look at an overview of Android Animation

• Know the evolution of Android Animation

• Discussion on Android Animation Resources

Initialize Android studio project setup to get started with animation.

• Introduce helper files

• Create the Android Studio Project

• Get ready with the emulator

Get an overview of the Android Animation API.

• Understand the Android Animation ValueAnimator class

• Understand the Android Animation ObjectAnimator class

• Learn about the X and Y coordinates in Android

Explore the types of property animation which includes fade animation, scale animation, rotate animation, translate animation along x and y axis.

• Discover the animation types and its attributes

• Know the details of Alpha and Scale animation

• Apprehend the details of rotate and translate animation

Learn how to implement property animations (fade, rotate, scale, and transition) using the animation XML resources only.

• Update the files from the helper files

• Set up the XML file for animation and add attributes for it

• Write the Java code for implementing XML perform reverse animation

Learn to keep track of the AnimatorListener Interface, the animation stages, and listen to the event. Perform actions while the animation is carried out.

• Understand the functions to implement Animation.AnimatorListener Interface

• Update the files from the helper files

• Add listener to all the animations and distinguish between them

Learn to implement property animations (fade, rotate, scale, transition) using only the code and no XML resources.

• Update the files from the helper files

• Map the code from XML file as Kotlin code in Activity file

• Run the app and check demo

Learn how to implement multiple transition to one view in Android.

• Explore the use case of multiple transitions

• Get an overview of class AnimatorSet

• Learn more about ViewPropertyAnimator and PropertyViewHolder classes

Learn to implement multiple animations (fade, rotate, scale, transition) using only the animation XML resources.

• Update the files from the helper files

• Set up the XML file for animation and add attributes for it

• Write the Java code to implement XML and perform reverse animation

Explore how to implement multiple animations (fade, rotate, scale, transition) using the code and no XML resources only.

• Update the files from the helper files

• Learn how to map the code from XML file as Kotlin code in Activity file

• Run the app and check demo

Understand and implement interpolators in Android Animation.

• Explore interpolators

• Implement interpolator using XML attribute

• Implement interpolator using code

Implement multiple animation using ViewPropertyAnimator and PropertyValuesHolder.

• Know about ViewPropertyAnimator, PropertyValuesHolder and the difference between them

• Implement multiple animation using ViewPropertyAnimator

• Implement multiple animation using PropertyValuesHolder

Understand the overview of the section and references.

• Go through the concepts covered in this section

• Explore the references

Know about the types of drawables and animations for it.

• Understand what the frame animation for animating drawables is

• Know what AnimatedVedtorDrawables are

• Know more about the vector drawables in android

Add images in sequence to implement frame animation.

• Know what frame animation is

• Add images for frame animation

• Write the code to implement frame animation

Understand how to implement animation using AnimatedVectorDrawables in Android.

• Know the features of AnimatedVectorDrawables

• Learn how to implement AnimatedVectorDrawables in multiple files

• Explore how to implement AnimatedVectorDrawables in a single file

Create AnimatedVectorDrawable using the shapeshifter tool.

• Explore how to import the check vector

• Set up the animation for check to cross icon

• Update the number of commands for pathData for vectors

Learn how to use AnimatedVectorDrawable for animation of the drawables.

• Create the AVD for check to cross

• Write code for animation

• Implement the reverse animation

Learn to make changes in the app for maintaining backward compatibility.

• Explore the review of Animation API launch

• Know the steps for Backward Compatibility

• Explore the summary of the section

Learn what transition is and what are the transition classes and details on transition API.

• Get an overview on Transition API

• Explore the transitions available

• Know about the types of transitions

Learn to animate between layouts by creating scene objects, in the same activity using XML files.

• Follow the steps to add animation between layouts

• Create scene xml files for layouts

• Write code to create scene objects and animate

Implement multiple transition on single element using TransitionSet.

• Create XML file with multiple transition in <transition-set>

• Write a code to start the animation

• Run the app and check

Learn to animate between layouts by creating scene objects, in the same activity by code.

• Write a code to create animations

• Map the xml file to write a code for multiple animations

• Run the app and check

Learn to implement transition without creating the scene object. This is applicable for small differences.

• Create the layout for the activity

• Write the code in MainActivity file for implementing transition

• Run app and check

Implement transition between multiple activities.

• Create the activity layout files

• Add the attributes for shared elements

• Write code to share elements between activity

Detail of what constraintSet and ConstraintLayout is. Demo on how to use it with Keyframe animation.

• Learn what constraint set is and how to use it with Transition Manager

• Frame set up for the layout

• Write code to implement KeyFrame Animation

Learn to use existing open source library for implementing animation in RecyclerView.

• Search for the perfect library for your requirement and project

• Do the project setup in case of incompatibility with the library

• Use the existing functions of the library to implement your requirement in your app

Learn to use existing open source library from github for implementing animation in ViewPager.

• Add the library components to your project

• Go through the library files

• Use the existing functions of the library to implement your requirement in your app

Learn What physics based animation are. See a live example of how to implement it in your app.

• Explore what physics based animation are

• Learn the basic project setup for implementation

• Write code for fling animation. Run app and check