Android Academy · Ders

Temalar ve Stiller

Bileşenler için yeniden kullanılabilir stiller, uygulamanız için temalar tanımlayın. Material 3 renk rollerini, tipografi ölçeğini, özel yazı tiplerini ve karanlık modu ayarlayın.

Temalar ve Stiller, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 5 dersinin 2. 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 5 dersten oluşur.

Stiller ve Temalar

Sıklıkla karıştırılan iki kavram:

Stil — tek bir widget'a uygulanan görünüm nitelikleri koleksiyonu (ör. metin boyutu, renk, iç boşluk). style="@style/MyButton" ile ayarlanır.
Tema — bir Activity'ye veya uygulamaya uygulanan anlamsal nitelikler koleksiyonu. Görünümler tema niteliklerini ?attr/colorPrimary ile arar.

Stil Tanımlama

Stilleri res/values/styles.xml içinde oluşturun. Stiller bir üst stilden türetilebilir:

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Tema Tanımlama

Temalar bir Material 3 üst temasından türetilir ve renk ile şekil niteliklerini geçersiz kılar:

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Material 3 Renk Sistemi

Material 3, ham onaltılık değerler yerine anlamsal renk rollerini kullanır. Temel roller:

colorPrimary — ana marka rengi
colorOnPrimary — birincil arka plan üzerindeki metin ve simgeler
colorSecondary — vurgu rengi
colorSurface — kart ve sayfa arka planları
colorError — hata durumları
colorBackground — pencere arka planı

Renk Kaynakları

Renkleri res/values/colors.xml içinde tanımlayın:

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Karanlık Tema

Material 3 DayNight temaları karanlık modu otomatik olarak yönetir. Renkler için bir gece sürümü ekleyin:

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Tipografi

Material 3 bir tipografik ölçek tanımlar. Tutarlı metin için textAppearance niteliklerini kullanın:

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Özel Yazı Tipleri

res/font/ klasörüne bir yazı tipi ekleyin ve temanıza veya stilinize başvurun:

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Temayı Activity'ye Uygulama

Temayı AndroidManifest.xml içinde ayarlayın. Her Activity için farklı bir tema kullanabilirsiniz:

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Tema Niteliklerini Kodda Okuma

Çalışma zamanında Kotlin kodundan herhangi bir tema niteliğine erişin:

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Material Tema Oluşturucu

Marka renginizden eksiksiz bir Material 3 renk şeması oluşturmak için Material Theme Builder (m3.material.io/theme-builder) kullanın. Araç, colors.xml ve themes.xml için kullanıma hazır XML dosyaları dışa aktarır. Tutarlı bir tasarım sistemi elde etmenin en hızlı yolu budur.

Kısa Kontrol

Android'de Stil ile Tema arasındaki temel fark nedir?

Özet: Temalar ve Stiller

Tutarlı tasarım burada başlar:

Stiller — widget düzeyindeki nitelikler; birçok görünümde yeniden kullanılabilir
Temalar — uygulama ve Activity düzeyindeki nitelikler; anlamsal renk rolleri
Material 3 renk rolleri: colorPrimary, colorSurface, colorError vb.
values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM ile karanlık mod
textAppearance nitelikleriyle tipografik ölçek
Renk şemalarını hızlıca oluşturmak için Material Theme Builder'ı kullanın

Sırada: özel görünümleri sıfırdan çizmek.

Sıkça Sorulan Sorular

“Temalar ve Stiller” dersi ücretsiz mi?

Evet — “Temalar ve Stiller” 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 5 dersten oluşur.

“Temalar ve Stiller” dersinde ne öğreneceğim?

Bileşenler için yeniden kullanılabilir stiller, uygulamanız için temalar tanımlayın. Material 3 renk rollerini, tipografi ölçeğini, özel yazı tiplerini ve karanlık modu ayarlayı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, 5 dersinin 2. dersidir.

“Temalar ve Stiller” 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