Stiller ve temalar

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da tema oluşturma hakkında bilgi edinin.
Compose'da Tasarım Sistemleri →

Android'deki stiller ve temalar, web tasarımındaki stil sayfalarına benzer şekilde, uygulama tasarımınızın ayrıntılarını kullanıcı arayüzü yapısından ve davranışından ayırmanıza olanak tanır.

style, tek bir View öğesinin görünümünü belirten özellikler koleksiyonudur. Stil; yazı tipi rengi, yazı tipi boyutu, arka plan rengi gibi özellikleri belirtebilir.

Tema, yalnızca tek bir görünüme değil, bir uygulamanın, etkinliğin veya görünüm hiyerarşisinin tamamına uygulanan bir özellikler koleksiyonudur. Bir tema uyguladığınızda, uygulamadaki veya etkinlikteki her görünüm, temanın desteklediği özelliklerin her birini uygular. Temalar, durum çubuğu ve pencere arka planı gibi görünüm olmayan öğelere de stil uygulayabilir.

Stiller ve temalar, res/values/'de bir stil kaynak dosyasında tanımlanır ve genellikle styles.xml olarak adlandırılır.

Şekil 1. Aynı etkinliğe iki tema uygulandı: Theme.AppCompat (solda) ve Theme.AppCompat.Light (sağ).

Temalar ve stiller

Temalar ve stiller pek çok benzerliğe sahiptir ancak farklı amaçlar için kullanılırlar. Temalar ve stiller aynı temel yapıya sahiptir: özellikleri kaynaklarla eşleyen bir anahtar/değer çifti.

style, belirli bir görünüm türüne ilişkin özellikleri belirtir. Örneğin, bir stil, düğmenin özelliklerini belirtebilir. Bir stilde belirttiğiniz her özellik, düzen dosyasında ayarlayabileceğiniz bir özniteliktir. Tüm özellikleri bir stile çıkarmak, bunların birden çok widget'ta kullanımını ve korunmasını kolaylaştırır.

Tema, stiller, düzenler, widget'lar vb. tarafından referans verilebilecek bir adlandırılmış kaynak koleksiyonunu tanımlar. Temalar, Android kaynaklarına colorPrimary gibi anlamsal adlar atar.

Stiller ve temalar birlikte kullanılabilir. Örneğin, bir düğmenin bir kısmının colorPrimary, diğer bir bölümünün ise colorSecondary olduğunu belirten bir stiliniz olabilir. Bu renklerin gerçek tanımları temada sunulur. Cihaz gece moduna geçtiğinde uygulamanız "açık" temasından "koyu" temasına geçerek tüm bu kaynak adlarının değerlerini değiştirebilir. Stiller belirli renk tanımlarını değil, anlamsal adları kullandığından stilleri değiştirmeniz gerekmez.

Temaların ve stillerin birlikte nasıl çalıştığı hakkında daha fazla bilgi için Android stil: temalar ve stiller başlıklı blog yayınına bakın.

Stil oluşturma ve uygulama

Yeni stil oluşturmak için projenizin res/values/styles.xml dosyasını açın. Oluşturmak istediğiniz her stil için aşağıdaki adımları uygulayın:

  1. Stili benzersiz şekilde tanımlayan bir ada sahip bir <style> öğesi ekleyin.
  2. Tanımlamak istediğiniz her stil özelliği için bir <item> öğesi ekleyin. Her öğedeki name, düzeninizde XML özelliği olarak kullandığınız bir özelliği belirtir. <item> öğesindeki değer, bu özelliğin değeridir.

Örneğin, aşağıdaki stili tanımladığınızı varsayalım:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Stili bir görünüme aşağıdaki şekilde uygulayabilirsiniz:

<TextView
    style="@style/GreenText"
    ... />

Stilde belirtilen her bir özellik, görünümün kabul edilmesi durumunda o görünüme uygulanır. Görünüm, kabul etmediği özellikleri yoksayar.

Ancak, stilleri ayrı ayrı görünümlere uygulamak yerine, genellikle bu kılavuzun başka bir bölümünde açıklandığı gibi uygulamanızın tamamı, etkinliğiniz veya görünüm koleksiyonunuz için stilleri tema olarak uygularsınız.

Bir stili genişletin ve özelleştirin

Kendi stillerinizi oluştururken platform kullanıcı arayüzü stilleriyle uyumluluğu koruyabilmek için daima çerçeveden veya Destek Kitaplığı'ndan mevcut bir stili genişletin. Bir stili genişletmek için parent özelliğiyle genişletmek istediğiniz stili belirtin. Daha sonra, devralınan stil özelliklerini geçersiz kılabilir ve yenilerini ekleyebilirsiniz.

Örneğin, Android platformunun varsayılan metin görünümünü devralabilir ve aşağıdaki gibi değiştirebilirsiniz:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Ancak temel uygulama stillerinizi her zaman Android Destek Kitaplığı'ndan devralırsınız. Destek Kitaplığı'ndaki stiller, her sürümdeki kullanıcı arayüzü özellikleri için her stili optimize ederek uyumluluk sağlar. Destek Kitaplığı stilleri, genellikle platformdaki stile benzer bir ada sahiptir ancak AppCompat içerir.

Stilleri bir kitaplıktan veya kendi projenizden devralmak için üst stil adını, önceki örnekte gösterilen @android:style/ bölümü olmadan bildirin. Örneğin, aşağıdaki örnek metin görünümü stillerini Destek Kitaplığı'ndan devralır:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

Ayrıca, parent özelliğini kullanmak yerine stilin adını nokta gösterimiyle genişleterek (platform dışındakiler) stilleri de devralabilirsiniz. Yani, devralmak istediğiniz stilin adını nokta ile ayırarak stilinizin adının önüne ekleyin. Genellikle bunu diğer kitaplıklardaki stilleri değil, yalnızca kendi stillerinizi genişletirken yaparsınız. Örneğin, aşağıdaki stil önceki örnekte GreenText öğesindeki tüm stilleri alır ve ardından metin boyutunu artırır:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Daha fazla ada zincirleme ekleyerek bunun gibi stilleri istediğiniz kadar devralmaya devam edebilirsiniz.

<item> etiketiyle tanımlayabileceğiniz özellikleri bulmak için çeşitli sınıf referanslarındaki "XML özellikleri" tablosuna bakın. Tüm görünümler temel View sınıfındaki XML özelliklerini destekler ve birçok görünüm kendi özel özelliklerini ekler. Örneğin, TextView XML özellikleri, EditText widget'ı gibi giriş alan metin görünümüne uygulayabileceğiniz android:inputType özelliğini içerir.

Stili tema olarak uygulama

Stil oluşturduğunuz gibi bir tema da oluşturabilirsiniz. Aralarındaki fark, stili nasıl uyguladığınızdır: Bir görünümde style özelliğine sahip bir stil uygulamak yerine, AndroidManifest.xml dosyasındaki <application> veya <activity> etiketine android:theme özelliğiyle bir tema uygularsınız.

Örneğin, Android Destek Kitaplığı'nın Materyal Tasarım'daki "koyu" temasının tüm uygulamaya nasıl uygulanacağı burada açıklanmaktadır:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

"Açık" temasını yalnızca bir etkinliğe nasıl uygulayacağınız aşağıda da açıklanmıştır:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Uygulamadaki veya etkinlikteki her görünüm, belirtilen temada tanımlanan stillerden desteklediği stilleri uygular. Bir görünüm stilde belirtilen özelliklerden yalnızca bazılarını destekliyorsa yalnızca bu özellikler uygulanır ve desteklemediği özellikler göz ardı edilir.

Android 5.0 (API düzeyi 21) ve Android Destek Kitaplığı 22.1 sürümünden itibaren, düzen dosyanızdaki bir görünüm için android:theme özelliğini de belirtebilirsiniz. Bu işlem, ilgili görünümün ve alt görünümlerin temasını değiştirir, bu da arayüzünüzün belirli bir bölümündeki tema renk paletlerini değiştirmek için yararlıdır.

Önceki örnekler, Android Destek Kitaplığı tarafından sağlanan Theme.AppCompat gibi bir temanın nasıl uygulanacağını gösterir. Ancak genellikle temayı uygulamanızın markasına uygun şekilde özelleştirmek istersiniz. Bunu yapmanın en iyi yolu, bu stilleri Destek Kitaplığı'ndan genişletmek ve aşağıdaki bölümde açıklandığı gibi bazı özellikleri geçersiz kılmaktır.

Stil hiyerarşisi

Android, Android uygulamanızın genelinde özellik ayarlamak için çeşitli yöntemler sunar. Örneğin, özellikleri doğrudan bir düzen içinde ayarlayabilir, görünüme stil uygulayabilir, düzene tema uygulayabilir, hatta özellikleri programatik olarak ayarlayabilirsiniz.

Uygulamanızın stilini nasıl belirleyeceğinizi seçerken Android'in stil hiyerarşisine dikkat edin. Genel olarak, tutarlılık için tema ve stilleri mümkün olduğunca kullanın. Aynı özellikleri birden fazla yerde belirtirseniz aşağıdaki liste en sonunda hangi özelliklerin uygulanacağını belirler. Liste en yüksek öncelikten en düşüğe doğru sıralanır.

  1. TextView türetilmiş sınıflara metin aralıkları kullanarak karakter veya paragraf düzeyinde stil uygulama.
  2. Özellikleri programatik olarak uygulama.
  3. Görünüme tek tek özellikler uygulama.
  4. Bir görünüme stil uygulama.
  5. Varsayılan stil.
  6. Bir tema koleksiyonuna, bir etkinliğe veya uygulamanızın tamamına tema uygulama.
  7. TextView için TextAppearance ayarlama gibi görünüme özgü belirli stiller uygulama.

Şekil 2. span öğesinden stil, textAppearance öğesinden alınan stilleri geçersiz kılar.

Metin Görünümü

Stillerle ilgili bir sınırlama, View öğesine yalnızca bir stil uygulayabilmenizdir. Ancak TextView içinde, aşağıdaki örnekte gösterildiği gibi, bir stile benzer şekilde çalışan bir TextAppearance özelliği de belirtebilirsiniz:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance, metne özel stil tanımlamanızı sağlarken View stilini başka kullanımlar için de kullanılabilir hale getirir. Bununla birlikte, metin özelliğini doğrudan View üzerinde veya bir stilde tanımlarsanız bu değerlerin TextAppearance değerlerini geçersiz kılacağını unutmayın.

TextAppearance, TextView tarafından sunulan stil özelliklerinin bir alt kümesini destekler. Tam özellik listesi için TextAppearance bölümüne bakın.

Dahil olmayan yaygın TextView özelliklerinden bazıları şunlardır: lineHeight[Multiplier|Extra], lines, breakStrategy ve hyphenationFrequency. TextAppearance, paragraf düzeyinde değil, karakter düzeyinde çalışır. Bu nedenle, tüm düzeni etkileyen özellikler desteklenmez.

Varsayılan temayı özelleştirin

Android Studio ile bir proje oluşturduğunuzda, bu proje, projenizin styles.xml dosyasında tanımlanan şekilde varsayılan olarak uygulamanıza bir Materyal Tasarım teması uygular. Bu AppTheme stili, Destek Kitaplığı'ndaki bir temayı genişletir ve uygulama çubuğu ile kayan işlem düğmesi gibi önemli kullanıcı arayüzü öğeleri tarafından kullanılan renk özellikleri için geçersiz kılmalar içerir. Böylece, sağlanan renkleri güncelleyerek uygulamanızın renk tasarımını hızlı bir şekilde özelleştirebilirsiniz.

Örneğin, styles.xml dosyanız şuna benzer:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Stil değerleri aslında projenin res/values/colors.xml dosyasında tanımlanan diğer renk kaynaklarına referanslardır. Bu, renkleri değiştirmek için düzenlediğiniz dosyadır. Dinamik renk ve ek özel renklerle kullanıcı deneyimini iyileştirmek için Materyal Tasarım Renge Genel Bakış bölümüne bakın.

Renklerinizi öğrendikten sonra res/values/colors.xml içindeki değerleri güncelleyin:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Ardından istediğiniz diğer stilleri geçersiz kılabilirsiniz. Örneğin, etkinlik arka plan rengini aşağıdaki gibi değiştirebilirsiniz:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Temanızda kullanabileceğiniz özelliklerin listesi için R.styleable.Theme adresindeki özellikler tablosuna bakın. Düzeninizdeki görünümler için stiller eklerken, görünüm sınıfı referanslarındaki "XML özellikleri" tablosuna bakarak da özellikleri bulabilirsiniz. Örneğin, tüm görünümler temel View sınıfındaki XML özelliklerini destekler.

Çoğu özellik, belirli görüntüleme türlerine uygulanır. Bazıları tüm görünümler için geçerlidir. Ancak R.styleable.Theme adresinde listelenen tema özellikleri, düzendeki görünümler için değil, etkinlik penceresi için geçerlidir. Örneğin, windowBackground pencere arka planını değiştirir ve windowEnterTransition, etkinlik başladığında kullanılacak bir geçiş animasyonu tanımlar. Daha fazla bilgi için Animasyon kullanarak etkinlik başlatma bölümüne bakın.

Android Destek Kitaplığı, Theme.AppCompat genişletilmiş temanızı özelleştirmek için kullanabileceğiniz, önceki örnekte gösterilen colorPrimary özelliği gibi başka özellikler de sunar. Bunları en iyi kitaplığının attrs.xml dosyasında görüntüleyebilirsiniz.

Destek Kitaplığı'nda, önceki örnekte gösterilenlerin yerine genişletmek isteyebileceğiniz farklı temalar da vardır. Kullanılabilir temaları görmek için en iyi yer kitaplığın themes.xml dosyasıdır.

Sürüme özgü stiller ekle

Android'in yeni bir sürümü, kullanmak istediğiniz tema özelliklerini eklerse eski sürümlerle uyumlu olmaya devam ederken bunları temanıza ekleyebilirsiniz. Tek ihtiyacınız olan, kaynak sürümü niteleyicisini içeren values dizinine kaydedilmiş başka bir styles.xml dosyasıdır:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

values/styles.xml dosyasındaki stiller tüm sürümler için kullanılabildiğinden values-v21/styles.xml temalarınız bunları devralabilir. Bu, "temel" bir temayla başlayıp bunu sürüme özgü stillerinizde genişleterek stillerin kopyalanmasını önleyebileceğiniz anlamına gelir.

Örneğin, Android 5.0 (API düzeyi 21) ve sonraki sürümlerde pencere geçişlerini bildirmek için yeni özellikleri kullanmanız gerekir. Yani res/values/styles.xml uygulamasındaki temel temanız şu şekilde görünebilir:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Ardından, sürüme özel stilleri res/values-v21/styles.xml aracında aşağıdaki gibi ekleyin:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Artık AppTheme öğesini manifest dosyanıza uygulayabilirsiniz. Sistem, her sistem sürümü için kullanılabilen stilleri seçer.

Farklı cihazlar için alternatif kaynaklar kullanma hakkında daha fazla bilgi edinmek istiyorsanız Alternatif kaynaklar sağlama başlıklı makaleye bakın.

Widget stillerini özelleştir

Çerçevedeki ve Destek Kitaplığı'ndaki her widget'ın varsayılan bir stili vardır. Örneğin, Destek Kitaplığı'ndaki bir temayı kullanarak uygulamanızın stilini belirlerken Button örneğinin stili Widget.AppCompat.Button stili kullanılarak belirlenir. Bir düğmeye farklı bir widget stili uygulamak istiyorsanız bunu düzen dosyanızdaki style özelliğini kullanarak yapabilirsiniz. Örneğin, aşağıdakiler kitaplığın kenarlıksız düğme stilini uygular:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Bu stili tüm düğmelere uygulamak istiyorsanız temanızın buttonStyle bölümünde aşağıdaki şekilde tanımlayabilirsiniz:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

Ayrıca, widget stillerini diğer stilleri genişlettiğinizde olduğu gibi genişletebilir ve ardından, özel widget stilinizi düzeninizde veya temanızda uygulayabilirsiniz.

Ek kaynaklar

Temalar ve stiller hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara bakın:

Blog yayınları