Android compose Layouts example

Android compose Layouts with examples

Jetpack Compose

Hi in this Android compose tutorial we learn android compose layouts with examples. How to make layouts in android using the jetpack. So here we make a layout showing a card with an image and name. The android UI elements are hierarchic and elements are used in another element.

Add multiple texts in Android Compass

So let’s build our first composable function and preview. And to discover more about Android  Compose capabilities and make a simple messaging screen that shows a list of messages that can be expandable with animations.

So Let’s make a message compose that is rich by displaying the name of the person and Description. We need to change our composable variable to accept an Message object instead of a and add another Text composable inside of MessageCard. And also make sure you update the preview function as well as in your code.

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
        setContent {
MessageCard(Message("Android Tutorial", "Jetpack Compose Example"))
}
}
}

data class Message(val name: String, val msg: String)

@Composable
fun MessageCard(msg: Message) {
Text(text = msg.name)
Text(text = msg.msg)
}

@Preview
@Composable
fun PreviewMessageCard() {
MessageCard(
        msg = Message("Codeplayon", " Jetpack Compose, it's great!")
)
}

How to make a column Layout in composing

Using a Column

The Column function lets use an element vertically. Add Column to the MessageCard() function. You can make a new row to arrange items of the list horizontally.

Add an image element

Let’s upgrade the message card by adding the user profile. And use the resource manager for importing the image from the photo library. And add a Row compose to have a good structure and Image composable inside it:

@Composable
fun MessageCard(msg: Message) {
    Row {
        Image(
            painter = painterResource(R.drawable.profile_picture),
            contentDescription = "profile picture",
        )
    
       Column {
            Text(text = msg.author)
            Text(text = msg.body)
        }
  
    }
  
}

 

Configure your layout

Also, make sure your message layout has the right structure but its elements aren’t well spaced and the image is too big. Also, you can decorate and configure the compose. They allow changing the compose size and the layout appearance. Also, you can add high-level interactions, such as making an element clickable. You can chain them to create richer compostables. Let’s use some of them to improve the layout: You can find below the full source code of the android compose layout.

Full Source code:- 

package com.codeplayon.simpleappusingwithjetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.codeplayon.simpleappusingwithjetpackcompose.ui.theme.SimpleAppUsingWithJetpackComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SimpleAppUsingWithJetpackComposeTheme {
               
                Surface(color = MaterialTheme.colors.background) {
                    MessageCard(Message("Codeplayon", "Jetpack Compose Tutorial"))
                }
            }
        }
    }
}

data class Message(val name: String, val msg: String)

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.ic_launcher_background),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // Set image size 40 dp
                .size(40.dp)
                // Clip used shaped as a circle
                .clip(CircleShape)
        )

        // Add a horizontal space 
        Spacer(modifier = Modifier.width(8.dp))

        Column {
            Text(text = msg.author)
            // Add a vertical space 
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    SimpleAppUsingWithJetpackComposeTheme {
//        Greeting("Android")
        MessageCard(
            msg = Message("Codeplyon", "Jetpack Compose tutorial")
        )
    }
}