Android Jetpack compose material design

Updated 11 October 2021


Android Jetpack compose provides declarative UI for easily maintaining and creating UI for your native application. By declarative API it will speed up the application development and help to create the responsive design for the application.

In Jetpack compose composable functions will helps you to build your UI instead of using the XML code. With the help of composable functions, we are going to create the UI programmatically.

For more details regarding jetpack compose declarativelyUI, you can follow my previous blog.

In this blog, we are going to learn about the Android Jetpack compose material design. Material Design is Google’s attempt to provide a more consistent experience for Android users, and the Material Design Components (MDC) library is Google’s latest effort to drive the adoption of Material Design.

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code. Material streamlines collaboration between designers and developers and helps teams quickly build beautiful products.

So in this Android Jetpack compose material design blog we will learn that how to use material design with the declarative UI components.

Jetpack compose material theming

We can use material theming on jetpack compose and can make our application more attractive. It supports a material dark theme by default.

Initial setup

This is as simple as adding a single Gradle dependency to your app/module build.gradle file:

Apply material theming

Define your colors for dark or lite mode on your color.kt file just like below:

Now you have to create your theme firstly we start with defining the light and dark colors for your material theming like:

on the above lightColors and darkColors function, you can assign your own color as per your need of design I have created only few colors for my use.

Now we have to apply the above color for your application theme for this firstly create your composable function inside your Theme.kt file having a Material theme defined like:

Inside setContent in your MainActivity call your theme composable function like below:

Here isdarkTheme is passed as static on AppTheme you can also define it based on the action.

Inside your theme.xml remove your primary and secondary brand color accept the status bar color then your theme.xml will look like this:



In this blog, we have learned about the Android Jetpack compose material design on which we have learned that how we can create the UI without XML and the reuse of our UI components with the material theme.

For more information regarding the Jetpack compose you can follow the link.


Thanks for reading this blog. You can also check other blogs from here.


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home