Material Design 3 ile Modern Android Arayüzü Tasarlama
Material Design 3, Google'ın tasarım sistemidir ve Android uygulamalarında tutarlı, kullanıcı dostu arayüzler oluşturmanın en iyi yoludur. Renk şeması, tipografi, bileşenler ve animasyonlar gibi tüm öğeleri standartlaştırır.
Material Design 3'ün temel özellikleri şunlardır: dinamik renk (cihazın duvar kağıdından renkler alması), geliştirilmiş tipografi hiyerarşisi, yuvarlatılmış köşeler ve daha zarif gölgeler. Bunu uygulamaya başlamak için önce projenize Material 3 bağımlılığını ekleyin.
Adım 1: Bağımlılık Ekleme
Android Studio'da build.gradle dosyasına şu satırı ekleyin:
1dependencies {2implementation "com.google.android.material:material:1.11.0"3}Adım 2: Tema Ayarlama
AndroidManifest.xml dosyasında uygulamanızın tema özelliğini Material 3 temasına ayarlayın:
1<application2android:theme="@style/Theme.MaterialComponents.DayNight"...>3</application>Adım 3: Renk Şeması Tanımlama
res/values/colors.xml dosyasında Material 3 renk paletini tanımlayın:
1<?xml version="1.0" encoding="utf-8"?>2<resources>3<color name="md_theme_primary">#6750A4</color>4<color name="md_theme_secondary">#625B71</color>5<color name="md_theme_tertiary">#7D5260</color>6<color name="md_theme_background">#FFFBFE</color>7</resources>Adım 4: Bileşenleri Kullanma
Layout XML dosyasında Material 3 bileşenlerini kullanın:
1<?xml version="1.0" encoding="utf-8"?>2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"3android:layout_width="match_parent"4android:layout_height="match_parent"5android:orientation="vertical"6android:padding="16dp">78<com.google.android.material.button.MaterialButton9android:id="@+id/button"10android:layout_width="wrap_content"11android:layout_height="wrap_content"12android:text="Tıkla"13style="@style/Widget.MaterialComponents.Button" />1415<com.google.android.material.textfield.TextInputLayout16android:layout_width="match_parent"17android:layout_height="wrap_content"18android:layout_marginTop="16dp">1920<com.google.android.material.textfield.TextInputEditText21android:layout_width="match_parent"22android:layout_height="wrap_content"23android:hint="Ad girin" />24</com.google.android.material.textfield.TextInputLayout>2526<com.google.android.material.card.MaterialCardView27android:layout_width="match_parent"28android:layout_height="wrap_content"29android:layout_marginTop="16dp"30app:cardCornerRadius="12dp"31app:cardElevation="4dp">3233<TextView34android:layout_width="match_parent"35android:layout_height="wrap_content"36android:text="Kart İçeriği"37android:padding="16dp" />38</com.google.android.material.card.MaterialCardView>39</LinearLayout>Bu kod çalıştırıldığında, yuvarlatılmış köşelere sahip bir buton, metin giriş alanı ve kart bileşeni görünür.
Material Design 3'ün gücü tutarlılıkta yatıyor. Tüm ekranlarınızda aynı renk, boyut ve davranış standartlarını kullanarak profesyonel bir uygulama oluşturursunuz.
0 yorum