ImageScrollApp

Pada kesempatan kali ini saya mencoba membuat app scroll dengan menampilan gambar buah, kita dapat melakukan scroll dengan gulir horizontal. Menggunakan Jetpack Compose dan desain material, aplikasi ini memberikan pengalaman visual yang menarik dan responsif.

Fitur Utama:

1. Tampilan Gulir Horizontal:

   • Menggunakan komponen LazyRow untuk menampilkan daftar gambar buah secara horizontal dengan jarak antar item yang diatur.
   • Setiap gambar buah ditampilkan dalam komponen Card untuk memberikan efek bayangan dan bentuk yang bulat.

2. Desain Material:

   • Aplikasi ini menggunakan desain material modern untuk memberikan tampilan yang bersih dan konsisten.
   • Teks judul "Fruit Image Scroll" menggunakan berbagai teknik styling seperti warna tema, ukuran font yang disesuaikan, efek bayangan, dan latar belakang berwarna dengan sudut yang bulat.

3. Komposisi Jetpack Compose:

   • Menggunakan Jetpack Compose untuk membuat UI yang deklaratif dan responsif.
   • Setiap komponen UI didefinisikan dalam fungsi Composable, memungkinkan kode yang lebih bersih dan mudah dipelihara.

4. Responsif dan Dinamis:

   • UI responsif yang menyesuaikan dengan ukuran layar perangkat.
   • Animasi dan interaksi yang halus untuk pengalaman pengguna yang lebih baik.

Berikut adalah source code:

package com.example.fruiteimagescroll

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.fruiteimagescroll.ui.theme.FruiteImageScrollTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FruiteImageScrollTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    FruitImageScroll()
                }
            }
        }
    }
}

@Composable
fun FruitImageScroll() {
    val fruits = listOf(
        R.drawable.img1,
        R.drawable.img2,
        R.drawable.img3,
        R.drawable.img4,
        R.drawable.img5,
        R.drawable.img6,
        R.drawable.img7,
        R.drawable.img8,
        R.drawable.img9,
        R.drawable.img10,

    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Fruit Image Scroll",
            style = MaterialTheme.typography.headlineSmall.copy(
                fontSize = 24.sp,
                color = MaterialTheme.colorScheme.primary
            ),
            modifier = Modifier
                .padding(bottom = 16.dp)
                .shadow(4.dp, RoundedCornerShape(8.dp))
                .padding(16.dp),
            textAlign = TextAlign.Center
        )

        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier.fillMaxWidth()
        ) {
            items(fruits.size) { index ->
                Card(
                    shape = RoundedCornerShape(8.dp),
                    elevation = CardDefaults.cardElevation(4.dp),
                    modifier = Modifier
                        .size(150.dp)
                        .clip(RoundedCornerShape(8.dp))
                ) {
                    Image(
                        painter = painterResource(id = fruits[index]),
                        contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun FruitImageScrollPreview() {
    FruiteImageScrollTheme {
        FruitImageScroll()
    }
}

Berikut adalah tampilannya: