Image for post
Image for post

Material Design for Android

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.

Well Google itself suggests us to migrate.

Image for post
Image for post
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.

Image for post
Image for post
A small Patient’s data gathering app

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>
Image for post
Image for post
from Material Design Documentation

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

Image for post
Image for post

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"/>
Image for post
Image for post
Here we go!

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

app:fabAlignmentMode="end"
app:fabCradleMargin="20dp"
Image for post
Image for post

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);
}
Image for post
Image for post
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>
Image for post
Image for post

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.

Alert Dialog Box

one more exciting feature of Material theme is its dialog box. It also can be customized Shape attributes.

Image for post
Image for post

That’s it for now.

I hope it’ll help someone! If you have any question or suggestion then I’d love to hear from you!

Android Developer

Get the Medium app