Android Compose Material Design

Jetpack Compose

Hi, Developer let’s learn advanced android tutorial Jetpack compose layout to learn new things in android. In this article, we learn android compose the material design. Jetpack Compose is a modern toolkit for building native UI Android.  Jetpack compose is a simplify and quick UI development tool on android with less code and intuitive Kotlin APIs.

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 your app with material widgets.

Use Android Material Design

Android jetpack compose 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 this 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 a color is need. 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 styles that are available in the Material Theme, just add them to the Text composables.

Compose Shape

With Shape we can add the final touches. And also we  add a 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 saving the bettry 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 used multiple preview in your file using with 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!")
       )
   }
}