Cara Migrasi Project Views System dari Material2 ke Material3

1. Buka project → Upgrade AGP Upgrade Assistant
2. Pilih versi 8.0.0 → Run selected steps
3. Update kotlin version di build.gradle (project)

// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins{
    id 'com.android.application' version '8.0.0' apply false
    id 'com.android.library' version '8.0.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false
}

4. Update targetSdk, compileSdk, versi library dan posisi namespace di atas compileSdk, di build.gradle (module:app)

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
android {
    namespace 'com.dicoding.picodiploma.myflexiblefragment'
    compileSdk 33

    defaultConfig {
        applicationId "com.dicoding.picodiploma.myflexiblefragment"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {
    implementation 'com.google.android.material:material:1.9.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    testImplementation 'junit:junit:4.13.2'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation "androidx.core:core-ktx:1.10.1"
}

5. Ganti themes.xml versi light. Perhatikan nama package.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.MyFlexibleFragment" parent="Theme.Material3.DayNight.NoActionBar">

        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.MyFlexibleFragment" parent="Base.Theme.MyFlexibleFragment" />
</resources>

6. Kemudian ganti themes.xml versi night. Perhatikan nama package.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.MyFlexibleFragment" parent="Theme.Material3.DayNight.NoActionBar">

        <!-- Customize your dark theme here. -->
        <!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
    </style>
</resources>

7. Hapus warna yang ada di colors.xml. Sisakan black and white.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

8. (Opsional menyesuaikan template baru) Menambahkan monochrome pada ic_launcher dan ic_launcher_round

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="<http://schemas.android.com/apk/res/android>">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
    <monochrome android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>

11. Jalankan untuk tes aplikasi

Beberapa case lain

App Bar

• Secara default action bar tidak ada karena menggunakan tema NoActionBar. Gunakan MaterialToolbar untuk menggantikannya

<?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"
    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:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/option_menu"
            app:title="@string/app_name" />
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Tidak perlu override onCreateOptionsMenu dan onOptionsItemSelected

Dokumentasi bisa dilihat di sini

material-components-android/TopAppBar.md at master ·…

Contoh commit perubahan di sini

change new topappbar & large fragment · dicodingacademy/a14-android-fundamental-labs@ee77e49

SearchBar

• Sudah ada komponen SearchBar tersendiri. Kemudian ada SearchView untuk editing dan suggestion.
• Cara pemaikaian mirip Toolbar karena pada dasarnya sama.
• Dokumentasi

material-components-android/Search.md at master · material-components/material-components-android

• Contoh commit perubahan

Change to SearchBar & SearchView Material 3 · dicodingacademy/a14-android-fundamental-labs@553f587

ImageButton

        <ImageButton
            android:id="@+id/btn_once_date"
            style="@style/Base.Widget.AppCompat.ImageButton"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_date_range_black" />

• Pada Material3, lebih disarankan menggunakan Button dengan FilledStyle seperti ini

        <Button
            android:id="@+id/btn_once_date"
            style="?attr/materialIconButtonFilledStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_date_range_black" />

Additional resources:

Migrating to Material Design 3 - Material Design

“If you cannot do great things, do small things in a great way.”

~ Napoleon Hill.