Getting started with Material3 in your app

Lets learn how to integrate Material3 theming in your app

Hey Androiders 👋, this is a mini-blog where we’ll discuss about Android to the new Material 3(Material Components) system in your Android app. We are trying to learn how we will integrate new material library in our android app and how we will configure our themes that can gives us great user experiences.

1. Add Material Components library dependency in your app in build.gradle and add library to the dependencies section:

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
    // ...
  }

Visit Google’s Maven Repository or MVN Repository to find the latest version of the library.

Using Material3 themes

So now we need to change our themes files like below that can gives you a Material3 theming support:

<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
....
</style>

OK, so before confused into different theme colors name you can check how we can generate those using Material theme builder in below section.

Using Material Theme builder

• This is one of the best part, that we can easily prepare our app theming with our app colors. Like we required our app’s brand colors like primary-secondary colors, background colors that need to inputs in Material theme builder and it will generate our app theme for app in XML files that we can directly import in app and get configured our app theme.
• To build your theme visit on Web to check real time theme preview and configure your theme. After that you can export theme resources having theme configured that you can import in your app and check your app.
• You can also visit Figma plugin for Material Theme Builder

Design your layouts:

First, checkout app component guide(e.g button) that you want to put in your layout like consider you want add button in your layout.

For ex. I have added one button in my app layout and I run my app:

<com.google.android.material.button.MaterialButton
    android:id="@+id/button_first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/next"
    ... />

It will default gives us layout output as below:

So what is different compare to previously we were defining material theme?

• M2: Buttons have a height of 36dp and slightly rounded corner radius. Button labels use ALL CAPS.

Credit: Material components

M3: Buttons are taller at 40dp and have fully rounded corners. Button labels use sentence case.

Credit: Material components

lets take one more example like text field:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/inputFirst"
    android:hint="@string/app_name">

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

This will display inputlayout with default OutLineBox style inputbox as below:

To define explicit style we can define as below:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/inputFirst"
    style="@style/Widget.Material3.TextInputLayout.FilledBox"    android:hint="@string/app_name">

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

Using in existing Android app

• There are different things mentioned that we have to take care while implement Material components in existing android app that we can check on Material doc on below link:

Getting started with MDC-Android - Material Design 3

Summary:

Let’s just take a look at the summary of what we have learned:

• Intro about material3 and how we can integrate library in android app
• Learn how we can generate Material comporants theme using web tools and figma plugin
• Learn some examples to use Materila3 theming

Example code:

GitHub - pranaypatel512/Material3Example: Material3 example app to showcase theming related to…

Resources:

• Codelab : https://codelabs.developers.google.com/codelabs/apply-dynamic-color#0
• https://developer.android.com/guide/topics/ui/look-and-feel/themes#Styles
• Material theme builder introduction blog: https://material.io/blog/material-theme-builder

🙏 Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me. Checkout more blogs at https://pranaypatel.medium.com/