Loading Image and Text with Jetpack Compose

How to display image in circle shape in android with jetpack compose ,

Here is some code for display circle shape image in android using jetpack compose.

 Row(modifier = Modifier.padding(all = 10.dp)) {

            Card(

                modifier = Modifier.size(50.dp),

                shape = CircleShape,

                elevation = 3.dp

            ) {

                Image(

                    painterResource(R.drawable.ic_launcher_background),

                    contentDescription = "Circle shape image",

                    contentScale = ContentScale.Crop,

                    modifier = Modifier.fillMaxSize()

                )

            }

            // Add a horizontal space between the image and the column

            Spacer(modifier = Modifier.width(10.dp))

            Column {

                Text(text = name.author)

                // Add a vertical space between the author and message texts

                Spacer(modifier = Modifier.height(6.dp))

                Text(text = name.body)

            }

        }

so above code will help you to make image  in circle shape in android jetpack compose.

Here is your MainActivity.kt

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import androidx.activity.compose.setContent

import androidx.compose.foundation.Image

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.width

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.material.Card

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.layout.ContentScale

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        //setContentView(R.layout.activity_main)

        setContent {

           // Text("Hello world!")

            MessageCard(Message("Android" ,"Jetpack Compose"))

        }

    }

    data class Message(val author: String, val body:String)

    @Composable

    fun MessageCard(name: Message) {

        Row(modifier = Modifier.padding(all = 10.dp)) {

            Card(

                modifier = Modifier.size(50.dp),

                shape = CircleShape,

                elevation = 3.dp

            ) {

                Image(

                    painterResource(R.drawable.ic_launcher_background),

                    contentDescription = "Circle shape image",

                    contentScale = ContentScale.Crop,

                    modifier = Modifier.fillMaxSize()

                )

            }

            // Add a horizontal space between the image and the column

            Spacer(modifier = Modifier.width(10.dp))

            Column {

                Text(text = name.author)

                // Add a vertical space between the author and message texts

                Spacer(modifier = Modifier.height(5.dp))

                Text(text = name.body)

            }

        }

    }

 

}