Jetpack Compose display Image view and Text view in android

Now we see how to display Image view and Text View in android using Jetpack Compose.

So , Lets start with code.

First you have to add some dependency library in your build.gradle (app module)

  implementation 'androidx.compose.ui:ui:1.0.0'

    implementation 'androidx.compose.material:material:1.4.3'

    implementation 'androidx.compose.material:material-icons-core:1.4.3'

    implementation 'androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02'

    debugImplementation 'androidx.compose.ui:ui-tooling:1.4.3'

    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07

    implementation 'androidx.navigation:navigation-compose:2.4.0-alpha08'

And doing the below  code in MainActivity.kt file

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        //setContentView(R.layout.activity_main)

        setContent {

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

        }

    }

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

    @Composable

    fun MessageCard(name: Message) {

        Row {

            Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "Simple icon")

            Column {

                Text(text = name.author)

                Text(text = name.body)

            }

        }

    }

   

}

For text and image both showing we use Column and Row in MessageCard() so it display image  in Row and Text in column.