Tutorial by Examples

The AppCompat support library provides themes to build apps with the Material Design specification. A theme with a parent of Theme.AppCompat is also required for an Activity to extend AppCompatActivity. The first step is to customize your theme’s color palette to automatically colorize your app. I...

A Toolbar is a generalization of ActionBar for use within application layouts. While an ActionBar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. It can be added by performing t...

In the material design, a Floating action button represents the primary action in an Activity. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point. Make sure the following dependency is added to ...

The AppCompat Support Library defines several useful styles for Buttons, each of which extend a base Widget.AppCompat.Button style that is applied to all buttons by default if you are using an AppCompat theme. This style helps ensure that all buttons look the same by default following the Material D...

Make sure the following dependency is added to your app's build.gradle file under dependencies: compile 'com.android.support:design:25.3.1' Show the hint from an EditText as a floating label when a value is entered. <android.support.design.widget.TextInputLayout android:layout_width=&qu...

TabLayout provides a horizontal layout to display tabs, and is commonly used in conjunction with a ViewPager. Make sure the following dependency is added to your app's build.gradle file under dependencies: compile 'com.android.support:design:25.3.1' Now you can add items to a TabLayout in your ...

Ripple touch effect was introduced with material design in Android 5.0 (API level 21) and the animation is implemented by the new RippleDrawable class. Drawable that shows a ripple effect in response to state changes. The anchoring position of the ripple for a given state may be specified by call...

Navigation Drawers are used to navigate to top-level destinations in an app. Make sure that you have added design support library in your build.gradle file under dependencies: dependencies { // ... compile 'com.android.support:design:25.3.1' } Next, add the DrawerLayout and Navigati...

Bottom sheets slide up from the bottom of the screen to reveal more content. They were added to the Android Support Library in v25.1.0 version and supports above all the versions. Make sure the following dependency is added to your app's build.gradle file under dependencies: compile 'com.android...

One of the main features in Material Design is the addition of a Snackbar, which in theory replaces the previous Toast. As per the Android documentation: Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. Toasts are...