Money Counter (Para Sayma) Uygulaması | Android Jetpack Compose Uygulama Geliştirime [Youtube Video] 🚀

🔴 https://youtu.be/WFLQ_ESBTd4 🔴

Merhaba, bu yazımızda Jetpack Compose ile Android uygulama geliştireceğiz. Geliştireceğimiz “Money Counter App” Jetpack Compose temel özelliklerini kullanarak bir deneyim sunacaktır!

➡️ SERTİFİKALI JETPACK COMPOSE KURSU 💯

🟢 ANDROID WITH MACHINE LEARNING! (COURSE)

🟢 KOTLIN INTERVIEW BOOTCAMP! (COURSE)

Components

@Composable
fun MoneyButton(shape: Shape, moneyCount: Int, updatedMoneyCounter: (Int) -> Unit) {

    ElevatedCard(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center)
            .clip(CircleShape)
            .clickable {
                updatedMoneyCounter(moneyCount)
            },
        elevation = CardDefaults.elevatedCardElevation(50.dp)
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .clip(shape)
                .background(Color.White)
                .border(
                    shape = CircleShape,
                    color = Color.Green,
                    width = 2.dp
                ),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Tap!", color = Color.Black)
        }
    }
}

@Composable
private fun MoneyText(totalCount: Int) {
    Text(
        text = "$totalCount TL",
        style = TextStyle(
            color = Color.Black,
            textAlign = TextAlign.Center,
            fontSize = 50.sp,
            fontWeight = FontWeight.ExtraBold
        )
    )
}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun MoneySlider(increaseCount: Float) {
    var increaseCount1 = increaseCount
    Text(text = "$increaseCount1")

    Slider(
        modifier = Modifier.padding(20.dp),
        value = increaseCount1,
        onValueChange = {
            increaseCount1 = it.roundToInt().toFloat()
        },
        valueRange = 0F..200F,
        steps = 7,
        thumb = {
            Icon(
                imageVector = Icons.Filled.MonetizationOn,
                modifier = Modifier
                    .clip(CircleShape)
                    .background(Color.White)
                    .size(30.dp),
                contentDescription = "Slider Icon"
            )
        }
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MoneyCounterPage(modifier: Modifier = Modifier) {
    var totalCount by remember { mutableIntStateOf(0) }
    var increaseCount by remember { mutableFloatStateOf(0F) }

    Surface(
        modifier = modifier.fillMaxSize(),
        color = Color.Magenta
    ) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            MoneyText(totalCount)

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

            MoneyButton(CircleShape, totalCount) {
                totalCount += increaseCount.toInt()
            }

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

            MoneySlider(increaseCount)
        }
    }
}

Screens

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MoneyCounterAppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MoneyCounterPage(Modifier.padding(innerPadding))
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MoneyCounterAppTheme {
        MoneyCounterPage()
    }
}

🚀 Merhaba! Jetpack Compose maceramız başlıyor! Bu seride, Android uygulamalarında modern ve etkileyici kullanıcı arayüzleri oluşturmanın sırlarını keşfedeceğiz. 📱💻 Her video, Jetpack Compose’un güçlü özelliklerini adım adım öğrenmenize yardımcı olacak. 🎉 Hazır mısınız?

O zaman birlikte bu heyecan verici yolculuğa çıkalım! 🌟 Bu seride sizleri, Android geliştirme yolculuğunuzda bir adım öne taşıyacak püf noktaları ve pratik ipuçlarıyla buluşturacağız. Hazır mısınız? Jetpack Compose ile geleceği keşfetmeye başlayalım! 🌟

LINKEDIN

YOUTUBE

UDEMY

GITHUB

Abone olmayı ve zil simgesini tıklayarak bildirimleri açmayı unutmayın, böylece yeni videoları kaçırmazsınız! Sizlerle birlikte bu heyecan verici yolculuğa çıkmak için sabırsızlanıyoruz. Görüşmek üzere!

#JetpackCompose #AndroidDevelopment #MobileApps #JetpackSeri #AndroidJetpack #AndroidStudio #UIUX #AndroidDeveloper #MobileDev