Photo by Edho Pratama on Unsplash

Upgrading To New Android Material Design Components

Hello Everyone, In this article we will look at the process of adding latest Material design components to your app using latest Android Material Components.

With the stable release of Android Material Components in Nov 2018, Google has moved the material components from namespace android.support.design to com.google.android.material. Material Component library is replacement for Android’s Design Support Library.

This library provides you with new Themes, ShapeApperances and number of components that can be used for creating beautiful UI. You can use material components in your XML like :

<com.google.android.material.<ComponentName>
\\---attributes--\\
/>

For example, in order to add MaterialButton :

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

You can check more about it Material.io.

Prerequisites

In order to use Material Components for Android, and the latest versions of the Support Libraries, you will have to update your app’s compileSdkVersion to 28 (Android PIE)

Adding library to project

Manually

you can add library by following steps. However, Android studio provides a shortcut method to add library (Please check below).

1. Open the build.gradle file of your project.
2. Make sure that the repositories section includes Google's Maven repository google().

allprojects { repositories { google() jcenter() } }

3. Open the build.gradle file of your app.

4. Add the library to the dependencies section:

dependencies { implementation ‘com.google.android.material:material:1.0.0’ }

OR

Using Android Studio

With Android Studio 3.2 and higher, you can add Android Material Design library by selecting Refactor > Migrate to AndroidX from the menu bar. This will migrate your project to AndroidX. AndroidX maps the original support library API packages into the androidx namespace.

Changing App Theme

Change your app theme to inherit from a Material Components theme.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

With this change you should notice changes in UI of your app wherever you are using Material Components. With the current version of library <Button> is automatically inflated with <com.google.android.material.button.MaterialButton>. However this is not true for all other components. May be in upcoming releases we should see this automatic inflate for other components as well.

Adding Material Component

You need to use com.google.android.material namespace suffixed with component name that you want to add to your app. For Example adding MaterialButton :

<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

As you can notice, we are using style=”@style/Widget.MaterialComponents.Button.OutlinedButton" . This converts the button into OutlinedButton, without you to write any custom XML for this. Cool!! Isn’t it?

Library provides with lots of in built attributes that you can use to custom your material components. I will share about customising material button in my next post. Till then keep learning and keep spreading knowledge.

Thanks for reading. If you find the post helpful, cheer me with claps. Spread and help others learn. You can get in touch over linkedin.