Android Compose Material Design
Hi, Developer let’s learn advanced Jetpack android compose tutorial layout to learn new things in android. In this article, we learn android compose the material design. Jetpack Android Compose is a modern toolkit for building native UI Android. Jetpack compose is a simplified and quick UI development tool on android with less code and intuitive Kotlin APIs.
Android compose Material tutorial.
So this topic we learn android compose material design tutorial. Many Android UI elements implement the out-of-material design box. In this tutorial, you make the style of your app with material widgets.
Use Android compose Material Design
Android jetpack compose Material provides the implementation of Material Design and the UI component out of the box. So that We will improve the appearance of the Message Card and composable using Material Design styling.
So Let’s make a wrap MessageCard function using with Android material theme and create a project and used ComposeTutorilaTheme hare. Do both in the @Preview
and setContent
function.
Android Material Design is built around these three support: Color, Typography, and Shape. Let’s add this all component is one by one
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeTutorialTheme { MessageCard(Message("Codeplayon", "Android Jetpack Compose")) } } } } @Preview @Composable fun PreviewMessageCard() { ComposeTutorialTheme { MessageCard( msg = Message("Codeplayon", "Take a look at Jetpack Compose, it's great!") ) } }
Jetpack Compose Color
In Android Compose Styling with colors from the wrapped theme is easy and you can use the theme values anywhere color is needed. Let’s Make a style and the title add a border to the image:
@Composable fun MessageCard(msg: Message) { Row(modifier = Modifier.padding(all = 8.dp)) { Image( painter = painterResource(R.drawable.profile_picture), contentDescription = null, modifier = Modifier .size(40.dp) .clip(CircleShape) .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape) ) Spacer(modifier = Modifier.width(8.dp)) Column { Text( text = msg.author, color = MaterialTheme.colors.secondaryVariant ) Spacer(modifier = Modifier.height(4.dp)) Text(text = msg.body) } } }
Android Compose Typography
Android compose material typography is a style that is available in the Material Theme, just add them to the Text compostables.
Compose Shape
With Shape, we can add the final touches. And also we add padding to the message for a better UI.
@Composable fun MessageCard(msg: Message) { Row(modifier = Modifier.padding(all = 8.dp)) { Image( painter = painterResource(R.drawable.profile_picture), contentDescription = null, modifier = Modifier .size(40.dp) .clip(CircleShape) .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape) ) Spacer(modifier = Modifier.width(8.dp)) Column { Text( text = msg.author, color = MaterialTheme.colors.secondaryVariant, style = MaterialTheme.typography.subtitle2 ) Spacer(modifier = Modifier.height(4.dp)) Text( text = msg.body, style = MaterialTheme.typography.body2 ) } } }
Enable dark theme
Now Android Dark theme (or night mode) can be enabled to avoid the bright display especially at night and save the battery backup. The Android material design support, Jetpack Compose can also handle the dark theme by default. Having used android material colors and text to backgrounds will automatically adapt to the dark background. Also, you can use multiple previews in your file using functions.
So Let’s try to add a new preview and enable night mode. The color choices for the light mode and dark mode themes are defined in the IDE-generated file with the nameTheme.kt
.
@Preview(name = "Light Mode") @Preview( uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, name = "Dark Mode" ) @Composable fun PreviewMessageCard() { ComposeTutorialTheme { MessageCard( msg = Message("Codeplayon", "Hey, let,s take a look at Jetpack Compose, it's great!") ) } }