Using Material components in Android

anchit

26 June 2019

In this blog, we will learn about using material components in Android.

With the release of new Material components library, you get a hot box of powers for creating your own user interaction components easily.

You can create the components as per your use from code.
Customize the components as per your use.
Add some default styles for Your components

But these features were already present in the design support library. So why should I use this new component Library?

Well, the answer to this can be seen in much details over here. But what I found exciting was a whole list of built-in components and their styles that can change the whole layout of your components efficiently. Moreover, you can now use these :

Typography Theming: You get many built-in text styles for various uses throughout your application
Color Theming: You get extra built-in color setting options, all you need to do is set them up properly in your styles.xml file.
Shape Theming: You get a shape drawable class that can easily draw custom shapes while taking shadows, elevation, scale and color into account.

And the UI components that now you can create and style amounts to a huge list.

But what we currently want to focus on is how you can use this in your android project/ application.

What official document recommends is you migrate to “androidx” and start coding into it for easy implementation. if you want to do that then you will need to have an android studio 3.2 ( which currently is in its canary build Stages).

But don’t worry this does not mean that you cannot use this component library.

You can definitely use this on android studio 3.1 as well. All you need to do is follow their documentation ( which i find personally hard) or read along :

APPROACHES

APPROACH #1:

Start using androidx and for this, all you need to do is read carefully this page and follow along.

APPROACH #2:

Update your dependencies and other requirements as mentioned below :

Check you are using the correct compile SdkVersion in your app level build.gradle file ( compileSdkVersion 28).
Check you have correct design dependencies in your project.( 28.0.0-alpha3)
Now in your styles.xml file, you need to change the default theme to a material based theme

You are now Good to go. After this, all you need to do is set the style of the component you are going to use (either through style attribute of the Layout element, if you just wish to change the style of a particular element or through the styles.xml for global settings across your application).

SAMPLE CODE

app-level “build.gradle” file :

   android {
   compileSdkVersion 28
   defaultConfig {
       applicationId "my.application.id"
       minSdkVersion 16
       targetSdkVersion 28
       versionCode 1
       versionName "1.0"
       testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
       release {
           minifyEnabled false
           proguardFiles getDefaultProguardFile('proguard-android.txt'),'proguardrules.pro'
       }
    }
 }

   dependencies {
    //......
   implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
   implementation 'com.android.support:cardview-v7:28.0.0-alpha3'
   implementation 'com.android.support:design:28.0.0-alpha3'
   implementation 'com.android.support.constraint:constraint-layout:1.1.1'
   implementation 'com.android.support:animated-vector-drawable:28.0.0-alpha3'}
   //.....   
 }

android {

compileSdkVersion 28

defaultConfig {

applicationId "my.application.id"

minSdkVersion 16

targetSdkVersion 28

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'),'proguardrules.pro'

}

dependencies {

//......

implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'

implementation 'com.android.support:cardview-v7:28.0.0-alpha3'

implementation 'com.android.support:design:28.0.0-alpha3'

implementation 'com.android.support.constraint:constraint-layout:1.1.1'

implementation 'com.android.support:animated-vector-drawable:28.0.0-alpha3'}

//.....

}

styles.xml File :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Base.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>


    </style>

<style name="CustomTilStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:textColorHint">@color/text_color_black</item>
        <item name="boxStrokeColor">@color/colorAccent</item>
        <item name="colorControlNormal">@color/colorAccent</item>
        <item name="colorControlActivated">@color/colorAccent</item>
        <item name="colorControlHighlight">@color/colorAccent</item>
    </style>


</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="android:textColorHint">@color/text_color_black</item>

<item name="boxStrokeColor">@color/colorAccent</item>

<item name="colorControlNormal">@color/colorAccent</item>

<item name="colorControlActivated">@color/colorAccent</item>

<item name="colorControlHighlight">@color/colorAccent</item>

</style>

</resources>

Layout sample file :

            <android.support.design.widget.TextInputLayout
                android:id="@+id/new_til"
                style="@style/CustomTilStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="This is the hint ">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/new_tiet"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    />

            </android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout

android:id="@+id/new_til"

style="@style/CustomTilStyle"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="This is the hint ">

<android.support.design.widget.TextInputEditText

android:id="@+id/new_tiet"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="text"

</android.support.design.widget.TextInputLayout>

Hope this helps you in getting an idea of how easily you can start using the new material components in your android applications.

Keep Coding, Keep Sharing 🙂