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:
|
1 |
implementation("androidx.compose.material:material:1.0.0-beta07") |
Apply material theming
Define your colors for dark or lite mode on your color.kt file just like below:
|
1 2 3 4 5 6 |
val PrimaryColor = Color(0xFFF5BC18) val SecondaryColor = Color(0xFFFFA100) val TextColorPrimary = Color(0xFF000000) val TextColorSecondary = Color(0xFF8A8A8A) val LiteThemeBackground = Color(0xFFFFFFFF) val DarkThemeBackground = Color(0xFF1a1a1a) |
Now you have to create your theme firstly we start with defining the light and dark colors for your material theming like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
val LightThemeColors = lightColors( primary = PrimaryColor, primaryVariant = PrimaryColor, secondary = SecondaryColor, secondaryVariant = SecondaryColor, background = LiteThemeBackground, surface = LiteThemeBackground, error = Color(0xFFB00020), onPrimary = PrimaryColor, onSecondary = SecondaryColor, onBackground = LiteThemeBackground, onSurface = LiteThemeBackground, onError = Color(0xFFB00020) ) val DarkThemeColors = darkColors( primary = PrimaryColor, primaryVariant = PrimaryColor, secondary = SecondaryColor, secondaryVariant = SecondaryColor, background = DarkThemeBackground, surface = DarkThemeBackground, error = Color(0xFFB00020), onPrimary = PrimaryColor, onSecondary = SecondaryColor, onBackground = DarkThemeBackground, onSurface = DarkThemeBackground, onError = Color(0xFFB00020) ) |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@Composable fun AppTheme( isdarkTheme: Boolean, content: @Composable () -> Unit ) { androidx.compose.material.MaterialTheme( colors = if (isdarkTheme) DarkThemeColors else LightThemeColors ) { content() } } |
Inside setContent in your MainActivity call your theme composable function like below:
|
1 2 3 4 5 6 7 8 9 10 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AppTheme(false) { //another components of your activity } } } } |
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:
|
1 2 3 4 5 6 7 8 |
<resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.My_compose" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> </resources> |
Conclusion:
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.
Be the first to comment.