package com.example.image import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.image.ui.theme.ImageTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { ImageTheme { Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) { ImageAndText() } } } } } private val LightColorScheme = lightColorScheme() @Composable fun ImageTheme(content: @Composable () -> Unit) { MaterialTheme( colorScheme = LightColorScheme, content = content ) } @Composable fun ImageAndText() { Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Image( painter = painterResource(id = R.drawable.pic), contentDescription = "Image description", modifier = Modifier.fillMaxWidth().padding(16.dp) ) Spacer(modifier = Modifier.height(16.dp)) Text(text = "Description about the image", fontSize = 30.sp) } } @Preview(showBackground = true) @Composable fun PreviewImageAndText() { ImageAndText() }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter