การติดตั้งและนำ google material design มาใช้ในโปรเจค android app

การนำมาใช้ร่วมกับ Theme.AppCompat (Default Theme)

Required
*update your app's compileSdkVersion to 28 
*download the Android 9 using the SDK manager.


Step 1 - Setting for Library 

dependencies {
    implementation 'com.google.android.material:material:1.0.0'  // เลือกใช้ตามเวอร์ชั่นที่ releases ใน github
    ..
    ..
    ..
  }

Step 2 - Add Material Components to style.xml

Theme ของ meterial design ที่มีให้ใช้

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar


เราสามารถเพิ่ม Component เข้ามาทีละตัวได้ โดยไม่เพิ่มธีมของแอพ
ทำให้รักษาเค้าโครงเดิมที่มีอยู่ทำงานเหมือนเดิม
อยากใช้อันไหนเลือกจับมาใส่ทีละตัวได้ครับ ชีวิตเริ่มสดใสขึ้นมานิดนึง >_<


/res/values/style.xml
<style name="Theme.MyApp" parent="Theme.AppCompat">

  <!-- Original AppCompat attributes. -->
  <item name="colorPrimary">@color/my_app_primary_color</item>
  <item name="colorSecondary">@color/my_app_secondary_color</item>
  <item name="android:colorBackground">@color/my_app_background_color</item>
  <item name="colorError">@color/my_app_error_color</item>

  <!-- New MaterialComponents attributes. -->
  <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item>
  <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item>
  <item name="colorSurface">@color/my_app_surface_color</item>
  <item name="colorOnPrimary">@color/my_app_color_on_primary</item>
  <item name="colorOnSecondary">@color/my_app_color_on_secondary</item>
  <item name="colorOnBackground">@color/my_app_color_on_background</item>
  <item name="colorOnError">@color/my_app_color_on_error</item>
  <item name="colorOnSurface">@color/my_app_color_on_surface</item>
  <item name="scrimBackground">@color/mtrl_scrim_color</item>
  <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="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
  <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>
  <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
  ^
  ^
  // เราจะมาลองใช้ textAppearanceButton กัน 
    ปล.ถ้าลบออก จะไม่สามารถกำหนด Style ของ Meterial ให้กับ Button ได้นะ
..
..
</style>



Step 3 - เรียกใช้ Components ใน layout ไฟล์ของเราได้เลย

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button"
        android:layout_margin="10dp"
        android:id="@+id/material_button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default"/>


    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        android:layout_margin="10dp"
        android:id="@+id/material_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Unelevated Button"/>


    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_margin="10dp"
        android:id="@+id/material_button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlined Button"/>


    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_margin="10dp"
        android:id="@+id/material_button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text Button"/>

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

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

</LinearLayout>

output :

จากด้านบนถ้าเราตัด Style ของ 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="Label of TextInputLayout">

TextInputLayout ก็จะกลายเป็นแบบภาพด้านล่างนี้แทนนะครับ
เส้นขอบรอบๆ Edittext ของเรามาจาก style โดยไม่ต้องเขียนโค้ดแต่ง Style เอาเอง >_<

สุดท้ายครับ ขอยกตัวอย่างอีกเคสเรื่อง CardView
กรณีเราเปิด Tag และใช้ Style มาเป็นของ MeterialCardView แบบนี้
จะมี strokeColor , strokeWidth และอื่นๆเพิ่มมาให้เราใช้งานด้วยครับ


<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_margin="10dp"
    android:layout_weight="1"
    app:strokeColor="@color/colorPrimaryDark"
    app:strokeWidth="2dp"
    app:cardBackgroundColor="#DAD9D9"
    app:cardCornerRadius="20dp">



สรุปขั้นตอนการเริ่มใช้งาน

1. Setting for Library
2. Add Material Components to style.xml
3. เรียกใช้ Components ใน layout ไฟล์ของเราได้เลย

*Tip - กรณีไม่สามารถ inherit หรือใช้ theme โดยตรงจาก Material Components theme ได้
เราสามารถ inherit จาก Components Bridge theme ได้มี Bridge themes ให้เลือกใช้ดังนี้ครับ

• Theme.MaterialComponents.Bridge
• Theme.MaterialComponents.Light.Bridge
• Theme.MaterialComponents.NoActionBar.Bridge
• Theme.MaterialComponents.Light.NoActionBar.Bridge
• Theme.MaterialComponents.Light.DarkActionBar.Bridge

Ref :
https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md