Modern Android apps fit your wallpaper or device theme simply. The magic comes from Material Design 3, or Material You, Google's latest design basis. Material Design 3's dynamic color theming makes apps more customized and Android-like. This Material You article will help you create a simple app with a contemporary UI.

 

What is Material Design 3? 

Material Design 3, Google's latest Android design layout, emphasizes customization, connectivity, and aesthetics. Unique dynamic color theming syncs applications with system-wide theme depending on wallpaper or device settings. All Material You apps are uniform and customizable.

To move further, first you need Android 12 or later for dynamic theming.

Setting Up the Project

Create a New Android Project

Create a new Android Studio project. Set Minimum API level to API 31 (Android 12) or above and choose an empty activity template.

Add Dependencies

To use Material Design 3, include the following dependency in your build.gradle file:

implementation "com.google.android.material:material:1.9.0" 

Sync your project to get the libraries you need.

Enable Dynamic Theming

Set the parent theme to Theme.Material3.DayNight.DynamicColors in themes.xml to utilize dynamic themes:

<style name="Theme.App" parent="Theme.Material3.DayNight.DynamicColors"> 
 <item name="colorPrimary">@color/primary</item> 
 <item name="colorSecondary">@color/secondary</item> 
</style> 

Building the UI with Material You Components

Add a Toolbar

The toolbar is an important part of every application. You can add a Material Design 3 toolbar that changes based on the system theme in this way:

<com.google.android.material.appbar.MaterialToolbar 
 android:id="@+id/topAppBar" 
 style="@style/Widget.Material3.Toolbar" 
 android:layout_width="match_parent" 
 android:layout_height="?attr/actionBarSize" 
 android:background="?attr/colorPrimary" 
 app:title="Material You App" /> 

Add Buttons with Dynamic Colors

Material Buttons work great with dynamic themes. Here's how to add one to your layout:

<com.google.android.material.button.MaterialButton 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Click Me" 
 style="@style/Widget.Material3.Button" /> 

Preview the Dynamic Colors

The cool thing about Material You is that it changes UI colors dynamically. Try this out by giving your device different images. The primary, secondary, and background colors of your app will change instantly, giving it a smooth look. 

Testing and Running the App 

Use an Android 12+ phone or tablet for your app. Consider how the toolbar and buttons match the system theme. Change your device wallpaper for the full impact. Colors can vary dynamically.

Conclusion 

Well done! You used Material Design 3 and dynamic color themes to create your first app. This blogpost has showed you how to you can build a modern and personalized app. Your app's UI can improve from Complex Material Design 3. 

So, are you ready to continue? To make your app come to life, try using Chips and Cards, two UI components from Material Design 3.