Android Academy · Ders

Material Design Temelleri

Material bileşenlerini kullanın: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog ve Dynamic Color.

Material Design Temelleri, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 5 dersinin 1. 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.

Material Tasarım Nedir?

Material Tasarım, güzel ve tutarlı Android uygulamaları geliştirmek için Google tarafından oluşturulmuş bir tasarım sistemidir. Şunları sunar:

Önceden hazırlanmış zengin bir kullanıcı arayüzü bileşenleri kümesi
Tutarlı boşluk, tipografi ve renk kuralları
Erişilebilir ve duyarlı bileşenler
Yerleşik animasyonlar ve geçişler

Android için Material Components kitaplığı (MDC), Material 3'ü Jetpack'e getirir.

Material Components Ekleme

Bağımlılığı ekleyin ve uygulama temanızı bir Material temasına ayarlayın:

// app/build.gradle:
dependencies {
    implementation 'com.google.android.material:material:1.12.0'
}

// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorSecondary">@color/secondary</item>
    <!-- ... -->
</style>

MaterialButton

Düz Button yerine yuvarlatılmış köşeler, dalgalanma efektleri ve simge desteği için MaterialButton kullanın:

<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Save"
    app:icon="@drawable/ic_save" />

<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel" />

<!-- Text button -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:text="Learn more" />

TextInputLayout ve TextInputEditText

TextInputLayout, kayan etiketler, hata mesajları ve karakter sayaçları sağlamak için bir EditText bileşenini sarar:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilEmail"
    style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email address"
    app:helperText="We will never share your email">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

MaterialCardView

MaterialCardView, bir kapsayıcıya yükselti, yuvarlatılmış köşeler ve kenarlık ekler:

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="4dp"
    app:strokeColor="@color/outline"
    app:strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView android:text="Card Title" />
        <TextView android:text="Card content goes here" />

    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

FloatingActionButton (FAB)

FAB'ler bir ekrandaki birincil eylemi öne çıkarır. Material 3 üç boyut sunar:

<!-- Standard FAB -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:contentDescription="Add item"
    app:srcCompat="@drawable/ic_add" />

<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:text="New Note"
    app:icon="@drawable/ic_edit"
    android:layout_gravity="bottom|end" />

MaterialToolbar

Material 3 stilini kullanmak için varsayılan ActionBar yerine MaterialToolbar kullanın:

<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorSurface"
    app:title="My App"
    app:navigationIcon="@drawable/ic_menu" />

// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

Snackbar

Snackbar, ekranın alt kısmında kısa süreli ve eyleme dönüştürülebilir mesajlar gösterir. Toast yerine bunu tercih edin:

// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()

// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("Undo") {
        viewModel.undoDelete()
    }
    .setAnchorView(binding.fab)   // appears above the FAB
    .show()

Chip ve ChipGroup

Chip'ler filtreler, etiketler ve seçimler için kullanılan kompakt öğelerdir:

<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Android"
        style="@style/Widget.Material3.Chip.Filter" />

    <com.google.android.material.chip.Chip
        android:text="Jetpack"
        style="@style/Widget.Material3.Chip.Filter" />

</com.google.android.material.chip.ChipGroup>

BottomSheetDialog

Modal Bottom Sheet, ekranın altından yukarı doğru açılır ve içerik veya eylemler barındırır:

class OptionsBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.bottom_sheet_options, container, false)
    }
}

// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")

Material You — Dinamik Renk

Android 12 ve sonraki sürümler Dinamik Renk özelliğini destekler — uygulamanın renk şeması, kullanıcının duvar kâğıdına otomatik olarak uyum sağlar:

// In Application.onCreate():
override fun onCreate() {
    super.onCreate()
    DynamicColors.applyToActivitiesIfAvailable(this)
}

// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.

Kısa Kontrol

Kayan etiketler ve satır içi hata mesajları elde etmek için bir EditText'i sarmalamak üzere hangi Material bileşenini kullanmalısınız?

Özet: Material Tasarım Temelleri

Material Components ile güzel uygulamalar geliştirmek kolaylaşır:

MaterialButton — dolgulu, kenarlıklı ve metin stilleri
TextInputLayout + TextInputEditText — kayan etiketler, hatalar
MaterialCardView — yükseltili ve kenarlıklı kartlar
FloatingActionButton — birincil eylem düğmesi
Snackbar — eylemler içeren kapatılabilir mesajlar
Chip — etiketler, filtreler, seçimler
Dinamik Renk — Android 12 ve sonraki sürümlerde duvar kâğıdına uyum sağlar

Sırada: temalar, stiller ve karanlık mod.

Sıkça Sorulan Sorular

“Material Design Temelleri” dersi ücretsiz mi?

Evet — “Material Design Temelleri” 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.

“Material Design Temelleri” dersinde ne öğreneceğim?

Material bileşenlerini kullanın: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog ve Dynamic Color. 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 1. dersidir.

“Material Design Temelleri” 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