Android için Materyal Tasarım

Compose yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da temalarla nasıl çalışacağınızı öğrenin.
Material Design 3 →

Materyal Tasarım, platformlar ve cihazlarda görsel, hareket ve etkileşim tasarımı için kapsamlı bir kılavuzdur. Android uygulamalarınızda Materyal Tasarım'ı kullanmak için Materyal Tasarım spesifikasyonunda tanımlanan yönergeleri uygulayın. Uygulamanızda Jetpack Compose kullanılıyorsa Compose Material 3 kitaplığını kullanabilirsiniz. Uygulamanızda görünümler kullanılıyorsa Android Material Components kitaplığını kullanabilirsiniz.

Android, Materyal Tasarım uygulamaları oluşturmanıza yardımcı olmak için aşağıdaki özellikleri sunar:

  • Tüm kullanıcı arayüzü widget'larınıza stil vermek için Materyal Tasarım uygulama teması
  • Listeler ve kartlar gibi karmaşık görünümler için widget'lar
  • Özel gölgeler ve animasyonlar için API'ler

Malzeme teması ve widget'lar

Standart kullanıcı arayüzü widget'ları için stil oluşturma gibi Material özelliklerinden yararlanmak ve uygulamanızın stil tanımını kolaylaştırmak için uygulamanıza Material tabanlı bir tema uygulayın.

Şekil 1. Koyu renkli Materyal teması.
Şekil 2. Açık renkli Materyal teması.

Android projenizi oluşturmak için Android Studio'yu kullanıyorsanız varsayılan olarak bir Material teması uygulanır. Projenizin temasını nasıl güncelleyeceğinizi öğrenmek için Stiller ve temalar başlıklı makaleyi inceleyin.

Kullanıcılarınıza alışkın oldukları bir deneyim sunmak için Material'ın en yaygın kullanıcı deneyimi kalıplarını kullanın:

  • Kayan işlem düğmesi (FAB) ile kullanıcı arayüzünüzün ana işlemini tanıtın.
  • Uygulama çubuğunu kullanarak markanızı, gezinme, arama ve diğer işlemleri gösterin.
  • Uygulamanızın gezinme menüsünü gezinme çekmecesi ile gösterip gizleyin.
  • Uygulama düzeniniz ve gezinmeniz için diğer birçok Materyal Bileşeni arasından seçim yapın. Örneğin; daraltılabilir araç çubukları, sekmeler, alt gezinme çubuğu ve daha fazlası. Tümünü görmek için Android için Material Components kataloğuna bakın.

Mümkün olduğunda önceden tanımlanmış Material Icons'ı kullanın. Örneğin, gezinme çekmecenizdeki gezinme "menü" düğmesi için standart "hamburger" simgesini kullanın. Kullanılabilir simgelerin listesi için Materyal Tasarım Simgeleri'ne bakın. Ayrıca, Android Studio'nun Vector Asset Studio'sunu kullanarak Material Icon kitaplığından SVG simgeleri de içe aktarabilirsiniz.

Yükseltilmiş gölgeler ve kartlar

Android'deki görünümlerde X ve Y özelliklerine ek olarak Z özelliği de bulunur. Bu özellik, bir görünümün yüksekliğini temsil eder. Bu yükseklik aşağıdakileri belirler:

  • Gölgesinin boyutu: Daha yüksek Z değerlerine sahip görünümler daha büyük gölgeler oluşturur.
  • Çizim sırası: Daha yüksek Z değerlerine sahip görünümler diğer görünümlerin üzerinde görünür.
Şekil 3. Yüksekliği temsil eden Z değeri.

Kart tabanlı bir düzene yükseklik uygulayabilirsiniz. Bu sayede, Material görünümü sağlayan kartlarda önemli bilgileri gösterebilirsiniz. Varsayılan yüksekliğe sahip kartlar oluşturmak için CardView widget'ını kullanabilirsiniz. Daha fazla bilgi için Kart tabanlı düzen oluşturma başlıklı makaleyi inceleyin.

Diğer görünümlere yükseklik ekleme hakkında bilgi edinmek için Gölgeler ve klip görünümleri oluşturma başlıklı makaleyi inceleyin.

Animasyonlar

Şekil 4. Dokunma geri bildirimi animasyonu.

Animasyon API'leri, kullanıcı arayüzü kontrollerinde dokunma geri bildirimi, görünüm durumundaki değişiklikler ve etkinlik geçişleri için özel animasyonlar oluşturmanıza olanak tanır.

Bu API'ler sayesinde:

  • Dokunma geri bildirimi animasyonlarıyla görünümlerinizdeki dokunma etkinliklerine yanıt verin.
  • Dairesel açığa çıkarma animasyonlarıyla görünümleri gizleyip gösterebilirsiniz.
  • Özel etkinlik geçişi animasyonlarıyla etkinlikler arasında geçiş yapın.
  • Eğri hareket ile daha doğal animasyonlar oluşturun.
  • Görünüm durumu değişikliği animasyonlarıyla bir veya daha fazla görünüm özelliğindeki değişiklikleri canlandırın.
  • Görünüm durumu değişiklikleri arasında durum listesi çizilebilir öğelerinde animasyonları gösterir.

Dokunma geri bildirimi animasyonları, düğmeler gibi çeşitli standart görünümlere yerleştirilmiştir. Animasyon API'leri, bu animasyonları özelleştirmenize ve özel görünümlerinize eklemenize olanak tanır.

Daha fazla bilgi için Animasyonlara giriş başlıklı makaleyi inceleyin.

Çizilebilir öğeler

Çizilebilir öğelerle ilgili bu özellikler, Materyal Tasarım uygulamaları uygulamanıza yardımcı olur:

  • Vektör çizilebilirler, tanım kaybı olmadan ölçeklenebilir ve tek renkli uygulama içi simgeler için idealdir. Vektör çizilebilir öğeler hakkında daha fazla bilgi edinin.
  • Çizilebilir renklendirme, bit eşlemleri alfa maskesi olarak tanımlamanıza ve çalışma zamanında bir renkle renklendirmenize olanak tanır. Çizilebilir öğelere renk tonu eklemeyi öğrenin.
  • Renk uyarlama, belirgin renkleri bit eşlem resimlerden otomatik olarak almanızı sağlar. Palet API'si ile renk seçme hakkında bilgi edinin.