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!")
       )
   }
}

Tags :Android compose android compose components Android Compose Material Design Tutorial Android compose Material tutorial Android Image UpLoad to server From Camera and gallery android jetpack compose tutorial jetpack compose button jetpack compose material design material compose tabrow jetpack compose

add a comment