Material Design for Android

Published in

AndroidPub

4 min readJan 31, 2019

Are you still using the same legacy design support library? No problem this is the right time to migrate from legacy library to Google’s new Material Design library.

Why should you migrate?

Well Google itself suggests us to migrate.

Android guidelines for Design support library

At starting when I began to use Material Design library for Android, I really didn’t like it. You can say I was in a habit to see old designs. But when the app was ready and I compare both the screen one with old design support and second with Material Design, I was surprised. The new Material Design was looking far better than the one, I had used.

You can see the sample pic at left side. This screen have TextInputEditText and Chip from Material Design library.

The border around edit text is looking very attractive.

Using Material Design in our app is very easy, we can do this by following simply below steps.

Setup

Open a new Project in Android Studio. Click on Refactor and choose Migrate to AndroidX.

Now add Material Design library dependency in app level build.gradle file and sync the project. Make sure, you choose the latest version. You can track new releases on the GitHub repository.

implementation "com.google.android.material:material:1.1.0-alpha02"

Also make your app theme child of Material Component as

<style name="AppTheme" 
            parent = "Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->    .....
</style>

Material Text Fields

In order to use any of the above style of Text Fields, you have to make some changes in your style.xml

<style name="AppTextField" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    
       <item name="boxBackgroundColor">@android:color/white</item></style>

By doing this all your TextFields will be Outlined text fields. And if you want FilledBox, you can use .FilledBox instead of .OutlineBox

just add this style in your theme as:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    .....    .....
    <item name="textInputStyle">@style/AppTextField</item>
</style>

Bottom App Bar

One of the best feature of Material Design is BottomAppBar. To implement BottomAppBar, you must use CoordinatorLayout as parent tag.

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/skyBlue"
        app:navigationIcon="@drawable/ic_dehaze_black_24dp"/>

It will be looked like this

Wow! We can make it more attractive by adding a fab action button just by writing the following code directly in your CoordinateLayout tag.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_add_black_24dp"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorAccent"
    app:layout_anchor="@id/bar"/>

We can also change fab alignment and margin in BottomAppBar as follows

app:fabAlignmentMode="end"
app:fabCradleMargin="20dp"

Final Code for BottomAppBar with fab Button

Adding Menu in BottomAppBar

Creating and attaching menu to BottomAppBar is very easy. Just override onCreateOptionMenu(menu) method normally as we override.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.home_menu,menu);
    return super.onCreateOptionsMenu(menu);
}

By default, this menu will not be displayed in BottomAppBar. You have to set Your BottomAppBar as supported action bar as follows:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    BottomAppBar bar = (BottomAppBar) findViewById(R.id.bar);
    setSupportActionBar(bar);
}

Amazing! BottomAppBar is really looking nice

Handling Navigation Item and Menu Options Click

Shape Theming

Material Design encourages brand expression through shapes. Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:

Corner angles and curves
Edge angles and curves

We can customize these shape as follows

Finally apply this shape style in your main app style

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>


 <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MyApp.MediumComponent</item>
</style>

Now all your material theme views like MaterialCardView will be looked like this. You can see all MaterialCardView have a corner cut at edges which is looking very nice.