Android Academy · Ders

Renkler ve MaterialTheme

Tutarlı bir tema uygulayın.

Renkler ve MaterialTheme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Compose'ta Renkler

Compose, renkleri Color sınıfıyla temsil eder. Color.Red ve Color.Blue gibi hazır değerler vardır.

Bir Color değerini Text rengi veya arka plan gibi parametrelere aktarırsınız.

Text(
    text = "Hi",
    color = Color.Blue
)

Özel Renk Değerleri

Color(0xFFRRGGBB) kullanarak onaltılık bir koddan herhangi bir renk oluşturun. İlk iki basamak olan FF, rengin tamamen opak olduğu anlamına gelir.

Örneğin 0xFF6200EE mor bir renktir.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Arka Plan Rengi

Bir bileşenin arkasını boyamak için background modifier'ını kullanın. İçeriğin kenarlara değmemesi için padding ekleyin.

Sıra önemlidir: background'dan sonra padding kullanmak, padding alanını da doldurur.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

MaterialTheme Nedir?

MaterialTheme, uygulamanızın renklerini, yazı tiplerini ve şekillerini tek bir yerde tutan bir sistemdir.

Bileşenler bu sistemden bilgi okur; böylece uygulamanızın tamamı tutarlı kalır ve stilini değiştirmek kolaylaşır.

MaterialTheme {
    Text("Themed app")
}

Tema Renk Şeması

Temanın colorScheme özelliği, primary, secondary ve background gibi adlandırılmış rolleri sağlar.

Sabit renkler yerine bunları okumak, görünümü tek bir yerden değiştirmenizi sağlar.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary ve onPrimary

Her ana rengin, üzerine çizilen metin için on eşdeğeri vardır; örneğin onPrimary.

Arka plan olarak primary, metin olarak onPrimary kullanmak okunabilir karşıtlığı garanti eder.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Tema Tipografisi

MaterialTheme, titleLarge ve bodyMedium gibi metin stillerini de typography içinde saklar.

Tutarlı ve uygun boyutlu metin için bunlardan birini Text stiline aktarın.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Açık ve Koyu Şemalar

lightColorScheme() veya darkColorScheme() ile bir şema oluşturup bunu MaterialTheme'e aktarabilirsiniz.

Şemalar arasında geçiş yapmak, uygulamanızın hem açık hem de koyu modları desteklemesini sağlar.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Şemayı Özelleştirme

Bir şema oluştururken rollere ad vererek bunların üzerine yazın. Burada primary, özel bir turkuaz renge dönüşür.

colorScheme.primary değerini okuyan her şey otomatik olarak güncellenir.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Tema Neden Kullanılır?

Renkleri her yerde sabit olarak tanımlamak, yeniden tasarımları zahmetli hâle getirir. MaterialTheme'ten okumak, tek bir değişikliğin tüm uygulamayı güncellemesini sağlar.

on renkleri iyi karşıtlığı koruduğu için erişilebilirliğe de yardımcı olur.

Surface ve Arka Plan

Surface bileşeni, içeriğinin arkasına temanın arka plan rengini ve yükseltiyi uygular.

Bir karta veya ekrana doğru temel rengi vermenin temiz bir yoludur.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Kısa Kontrol

Renkler ve temalandırma bilginizi test edin.

Özet

Color sınıfını, özel onaltılık renkleri ve background modifier'ını kullanmayı öğrendiniz. MaterialTheme; colorScheme, typography ve şekilleri bir araya getirir.

primary ve onPrimary gibi rolleri okumak, karşıtlığı ve tutarlılığı korur; ayrıca açık veya koyu şemaları destekler.

Stil oluşturma kursunu tamamladığınız için harika iş çıkardınız!

Sıkça Sorulan Sorular

“Renkler ve MaterialTheme” dersi ücretsiz mi?

Evet — “Renkler ve MaterialTheme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Renkler ve MaterialTheme” dersinde ne öğreneceğim?

Tutarlı bir tema uygulayın. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Renkler ve MaterialTheme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön