Back to Browse

Art Space App | Jetpack Compose Beginner Project

107 views
Mar 2, 2026
0:35

In this video, we build a beautiful Art Space App using Jetpack Compose in Android Studio. This beginner-friendly project helps you understand how to: Perfect for beginners learning modern Android development 🚀 🔗 Official Codelab Source: https://developer.android.com/codelabs/basic-android-kotlin-compose-art-space Code: package com.example.artspace import... class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { ArtSpaceTheme { ArtSpaceScreen() } } } } data class Artwork( val imageRes: Int, val title: String, val artist: String ) @Composable fun ArtSpaceScreen() { val artworks = listOf( Artwork( R.drawable.bridge, "Sailing Under the Bridge", "Kat Kuan (2017)" ), Artwork( R.drawable.flowers, "Blue Flower Vase", "Unknown Artist (1900s)" ), Artwork( imageRes = R.drawable.myart, title = "Village Landscape Sketch", artist = "Sunilkumar (2026)" ) ) var currentIndex by remember { mutableStateOf(0) } val currentArtwork = artworks[currentIndex] Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceBetween ) { Spacer(modifier = Modifier.height(20.dp)) // Image Card Card( elevation = CardDefaults.cardElevation(8.dp), modifier = Modifier.padding(16.dp) ) { Image( painter = painterResource(currentArtwork.imageRes), contentDescription = currentArtwork.title, modifier = Modifier .padding(24.dp) .fillMaxWidth() .height(350.dp), contentScale = ContentScale.Crop ) } // Description Box Column( modifier = Modifier .fillMaxWidth() .background(Color(0xFFEDEDED)) .padding(16.dp) ) { Text( text = currentArtwork.title, fontSize = 22.sp ) Text( text = currentArtwork.artist, fontWeight = FontWeight.Bold ) } // Navigation Buttons Row( modifier = Modifier .fillMaxWidth() .padding(vertical = 20.dp), horizontalArrangement = Arrangement.SpaceEvenly ) { Button( onClick = { currentIndex = if (currentIndex 0) currentIndex - 1 else artworks.lastIndex } ) { Text("Previous") } Button( onClick = { currentIndex = if (currentIndex artworks.lastIndex) currentIndex + 1 else 0 } ) { Text("Next") } } } } @Preview(showBackground = true) @Composable fun GreetingPreview() { ArtSpaceTheme { ArtSpaceScreen() } } 👍 Like the video 💬 Comment “ART APP DONE 🎨” after completing 🔔 Subscribe for full Android development series Let’s build real Android apps together 💚📱

Download

0 formats

No download links available.

Art Space App | Jetpack Compose Beginner Project | NatokHD