Migrating from Material Design 2 to Material 3: Android Example

Last Updated:
Migrating from Material Design 2 to Material 3

Read later
Save important notes and articles from internet using arusaquotes app.

Material Design has been a popular design language for Android developers, and with the release of Material 3, Google has introduced new guidelines and components to enhance the user experience.

If you're currently using Material 2 in your Android Kotlin app, it's time to migrate to Material 3 to take advantage of its new features.

In this blog, we'll guide you through the steps required to migrate from Material 2 to Material 3 in Android Kotlin, including updating dependencies, replacing themes, and colors. With this guide, you'll be able to provide a modern and accessible user experience for your app users.

Create New Project

Open Android Studio and create a new project. Give the project name Material You.

How to Create a New Project in Android Studio

Update dependencies

The first step in migrating to Material 3 is to update the dependencies in your project. Update the Material Design dependencies in your Gradle file to the latest version:

dependencies {
    implementation 'com.google.android.material:material:1.8.0'
}

Material 2 Layout

Once you have added the Material Design dependency, navigate to app > res > layout > activity_main.xml and paste the following code.

<?xml version="1.0" encoding="utf-8"?%>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:gravity="center"
        android:orientation="vertical">

        <com.google.android.material.switchmaterial.SwitchMaterial
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:text="NotesJam TextView"
            android:textSize="26sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:text="Button" />

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="12dp">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Filter" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Action"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Action" />
        </com.google.android.material.chip.ChipGroup>
    </androidx.appcompat.widget.LinearLayoutCompat>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="Add"
        android:src="@drawable/baseline_add_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

In the code above, we have created a Switch, TextView, Button, Chips, and FloatingActionButton following the Material Design 2 guidelines. In the next step, we will update this layout to conform with Material Design 3.

Material 3 Layout

Material 3 introduces new theme attributes for customizing the appearance of components. Replace the old theme attributes with the new ones in your themes.xml file.

Update Theme

Firstly, visit the Material Theme Builder website. In the top-right corner, select the Export button, and then click on Android Views (XML). Download the Material theme.

Now unzip the downloaded theme and copy the code of colors.xml. Then, navigate to app > res > values > colors.xml in your project and paste the code. Similarly, copy the themes.xml code for both light and dark themes and paste them in the appropriate place in your project.

Update layout file

Once you have updated the themes and colors, it's time to modify the layout file. Navigate to app > res > layout > activity_main.xml again and replace the existing code with the following XML code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="@string/app_name" />

        <com.google.android.material.divider.MaterialDivider
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:gravity="center"
        android:orientation="vertical">

        <com.google.android.material.switchmaterial.SwitchMaterial
            style="@style/Widget.Material3.CompoundButton.MaterialSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:text="NotesJam TextView"
            android:textAppearance="?attr/textAppearanceHeadlineMedium" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:text="Button" />

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="12dp">

            <com.google.android.material.chip.Chip
                style="@style/Widget.Material3.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Filter" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.Material3.Chip.Assist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Action" />
        </com.google.android.material.chip.ChipGroup>
    </androidx.appcompat.widget.LinearLayoutCompat>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="Add"
        android:src="@drawable/baseline_add_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

In the code above, the layout file follows the Material Design 3 guidelines. Now, navigate to AndroidManifest.xml and replace the old theme with the new one in the application tag, as shown below.

android:theme="@style/AppTheme"

That's it. All necessary steps completed. Just click on Run button and see the output.

Output

Here is the final output. Launch the app and compare with previous.

A screenshot of a Material Design 2 to Material Design 3
Material 2 to Material 3

Migrating from Material 2 to Material 3 in Android Kotlin requires updating dependencies, replacing colors, and themes. By following these steps, you can ensure that your app provides a modern and accessible user experience.

I hope this article helps you understand how to migrate from Material Design 2 to Material Design 3 in Android.

So, go ahead and try it out today!


Recommended Articles

Mastering Android Bottom Sheets: A Comprehensive Tutorial in Kotlin
Understanding RecyclerView in Android using Kotlin
Creating a Chatbot App like ChatGPT using Kotlin: A Step-by-Step Guide
Android CardView With Image and Text Using Kotlin
Android Floating Action Button (FAB) Using Kotlin with Example
Creating an Option Menu in Android with Kotlin

Help us create more content by becoming a patron! Our supporters get exclusive access to our android tutorial project source code.

Become a patron