Android Material design components setup

 

Hello guys,

In this tutorial, the document will help to start with material design in android. If you are not yet implemented the material design component in your project, follow these step by step process to use the material component.

Material Design (MD) was designed by Google in 2014. It's available to many Google application products Like Android, Angular, etc. It's available in the android lollipop version.

Material Design elements look like paper and ink design and some elements have hover effects and realistic shadow designs.

Step 1: Make sure to check the google maven repository in build.gradle (Project) in your application.

buildscript {
    repositories {
        google()  //----->  Google Maven Repository
        jcenter()
    }

Step 2: Add the latest material library in build.gradle (App Module) in your application.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

    //Material design
    implementation 'com.google.android.material:material:1.2.1'

}

Step 3: Change your app theme to derived from the Material component theme

app-> res-> values -> styles.xml

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

Change to Theme.AppCompat to Theme.MaterialComponents

Color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>

    <color name="purple_200">#bb86fc</color> <!--Color primary (dark)-->
    <color name="purple_500">#6200ee</color> <!--Color primary (light)-->
    <color name="purple_600">#4b01d0</color> <!--Color primary variant (dark)-->
    <color name="purple_700">#3700b3</color> <!--Color primary variant (light)-->

    <color name="green_200">#03dac6</color> <!--Color secondary-->
    <color name="green_500">#018786</color> <!--Color secondary variant-->

    <color name="red_200">#cf6679</color> <!--Color error (dark)-->
    <color name="red_600">#b00020</color> <!--Color error (light)-->

    <color name="white_50">#ffffff</color>
    <color name="black_800">#121212</color> <!--Color surface (dark)-->
    <color name="black_900">#000000</color>
</resources>

Style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!--Material color attributes (light theme) -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorSecondary">@color/green_200</item>
        <item name="colorSecondaryVariant">@color/green_500</item>

        <!--Background color attributes-->
        <item name="android:colorBackground">@color/white_50</item>
        <item name="colorSurface">@color/white_50</item>
        <item name="colorError">@color/red_600</item>
        <item name="scrimBackground">@color/mtrl_scrim_color</item>

        <item name="colorOnPrimary">@color/white_50</item>
        <item name="colorOnSecondary">@color/black_900</item>
        <item name="colorOnBackground">@color/black_900</item>
        <item name="colorOnSurface">@color/black_900</item>
        <item name="colorOnError">@color/white_50</item>

        <!--Material type attributes-->
        <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item>
        <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item>
        <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item>
        <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item>
        <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item>
        <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item>
        <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
        <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item>
        <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item>
        <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item>
        <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
        <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
        <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>
        <!--Material shape attributes-->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MaterialComponents.SmallComponent</item>
        <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MaterialComponents.MediumComponent</item>
        <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.MaterialComponents.LargeComponent</item>
        <!--Component styles-->
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
<!--        <item name="bottomSheetDialogTheme">@style/ThemeOverlay.MaterialComponents.BottomSheetDialog</item>-->
<!--        <item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>-->
        <item name="toolbarStyle">@style/Widget.MaterialComponents.Toolbar.PrimarySurface</item>

    </style>

</resources>

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:hint="Username">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"/>
    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"/>
    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:id="@+id/textButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Submit"
        android:layout_gravity="center_horizontal"
        style="@style/Widget.MaterialComponents.Button"
        />

</LinearLayout>

Output: