Stiller ve temalar

Oluşturma 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.
Oluşturmada Sistem Tasarlama →

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ızı sağlar.

Stil, tek bir View için görünümü belirten özellik 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 tamamına, etkinliğine veya görünüm hiyerarşisine uygulanan özelliklerden oluşan bir koleksiyondur. Bir temayı 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ünmeyen öğelere de stiller uygulayabilir.

Stiller ve temalar res/values/ bölgesindeki bir stil kaynak dosyasında tanımlanır (genellikle styles.xml şeklinde adlandırılır).

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

Temalar ve stiller

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

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

Tema; stiller, düzenler, widget'lar vb. ile referans verilebilen adlandırılmış kaynak koleksiyonunu tanımlar. Temalar, Android kaynaklarına colorPrimary gibi semantik adlar atar.

Stillerin ve temaların birlikte çalışması amaçlanır. Örneğin, düğmenin bir bölümünün colorPrimary, diğerinin de colorSecondary olduğunu belirten bir stiliniz olabilir. Bu renklerin gerçek tanımları temada verilmiştir. Cihaz gece moduna girdiğ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ştirmenize gerek yoktur.

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

Stil oluşturma ve uygulama

Yeni bir 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 <style> öğesi ekleyin.
  2. Tanımlamak istediğiniz her stil özelliği için bir <item> öğesi ekleyin. Her bir öğedeki name, düzeninizde XML özelliği olarak kullanacağınız bir özelliği belirtir. <item> öğesindeki değer, söz konusu özelliğin değeridir.

Örneğin, şu 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 etmesi durumunda söz konusu görünüme uygulanır. Görünüm, kabul etmediği tüm özellikleri yoksayar.

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

Stil genişletme ve özelleştirme

Kendi stillerinizi oluştururken platform kullanıcı arayüzü stilleriyle uyumluluğu korumak için her zaman ç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ümde kullanılabilen kullanıcı arayüzü özelliklerine göre her bir stili optimize ederek uyumluluk sağlar. Destek Kitaplığı stilleri, genellikle platformdaki stile benzer ancak AppCompat ile birlikte adlandırılır.

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

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

Ayrıca, parent özelliğini kullanmak yerine bir stilin adını nokta gösterimiyle genişleterek stilleri (platformdakiler hariç) devralabilirsiniz. Yani stilinizin adının önüne, devralmak istediğiniz stilin adını noktayla ayırarak 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 verilen GreenText öğesindeki tüm stilleri devralır ve daha sonra metin boyutunu büyütür:

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

Daha fazla ada bağlantı oluşturarak 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 çoğu görünüm kendi özel özelliklerini ekler. Örneğin, TextView XML özellikleri EditText widget'ı gibi giriş alan bir metin görünümüne uygulayabileceğiniz android:inputType özelliğini içerir.

Bir stili tema olarak uygulama

Stil oluştururken aynı şekilde tema oluşturabilirsiniz. Fark, onu uygulama şeklinizdir: Bir görünümde style özelliğine sahip bir stil uygulamak yerine, ya <application> etiketine ya da AndroidManifest.xml dosyasındaki bir <activity> etiketine android:theme özelliği olan bir tema uygularsınız.

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

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

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

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

Uygulamadaki veya etkinlikteki her görüntüleme, 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 özellikleri uygular ve desteklemediği özellikleri yok sayar.

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, söz konusu görünümün ve alt görünümlerin temasını değiştirir ve arayüzünüzün belirli bir bölümündeki tema rengi paletlerini değiştirmek için kullanışlıdır.

Önceki örnekler, Android Destek Kitaplığı tarafından sunulan Theme.AppCompat gibi bir temanın nasıl uygulanacağını göstermektedir. Ancak genellikle temayı uygulamanızın markasına uyacak ş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 özelliklerden bazılarını geçersiz kılmaktır.

Stil hiyerarşisi

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

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

  1. TextView ile türetilmiş sınıflara metin kapsamları kullanarak karakter veya paragraf düzeyinde stil uygulama.
  2. Özellikleri programatik olarak uygulama.
  3. Bağımsız özellikleri doğrudan bir görünüme uygulama.
  4. Bir görünüme stil uygulama.
  5. Varsayılan stil.
  6. Bir görünüm koleksiyonuna, bir etkinliğe veya uygulamanızın tamamına tema uygulama.
  7. Görünüme özgü belirli stil uygulama (ör. TextView cihazda TextAppearance ayarlama gibi).

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

Metin Görünümü

Stillerle ilgili sınırlamalardan biri, View öğesine yalnızca bir stil uygulayabilmenizdir. Ancak bir TextView öğesinde, 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 özgü stil tanımlamanıza olanak tanırken bir yandan da View stilini diğer kullanımlar için kullanılabilir durumda bırakmanızı sağlar. Bununla birlikte, herhangi bir 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. Özellik listesinin tamamı için TextAppearance sayfasını inceleyin.

Dahil edilmeyen bazı yaygın TextView özellikleri şunlardır: lineHeight[Multiplier|Extra], lines, breakStrategy ve hyphenationFrequency. TextAppearance, paragraf düzeyinde değil karakter düzeyinde çalışır. Bu nedenle, düzenin tamamını etkileyen özellikler desteklenmez.

Varsayılan temayı özelleştirme

Android Studio ile bir proje oluşturduğunuzda, projenizin styles.xml dosyasında tanımlandığı gibi uygulamanıza varsayılan olarak Materyal Tasarım teması uygulanır. Bu AppTheme stili, Destek Kitaplığı'ndaki bir temayı genişletir ve kullanılıyorsa uygulama çubuğu ve kayan işlem düğmesi gibi temel 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 yapılan referanslardır. Renkleri değiştirmek için düzenlediğiniz dosya budur. Dinamik renk ve ek özel renklerle kullanıcı deneyimini iyileştirmek için Materyal Tasarım Renge Genel Bakış'a bakın.

Renklerinizi öğrendikten sonra res/values/colors.xml alanındaki 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>

Daha sonra, istediğiniz diğer stilleri geçersiz kılabilirsiniz. Örneğin, etkinlik arka plan rengini şu şekilde 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 göz atın. Düzeninizdeki görünümler için stil 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.

Özelliklerin çoğu, belirli görüntüleme türlerine, bazıları da tüm görüntüleme türlerine uygulanır. Ancak R.styleable.Theme konumunda listelenen bazı tema özellikleri etkinlik penceresi için geçerlidir, düzendeki görünümler için geçerli değildir. Ö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ünü inceleyin.

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

Ayrıca, bir önceki örnekte gösterilenler yerine Destek Kitaplığı'nda yer alan farklı temaları genişletmek isteyebilirsiniz. Mevcut temaları görebileceğiniz en iyi yer kütüphanenin themes.xml dosyasıdır.

Sürüme özgü stiller ekle

Android'in yeni bir sürümünde, kullanmak istediğiniz tema özellikleri eklenirse bunları temanıza eklerken eski sürümlerle uyumluluğu sürdürebilirsiniz. İhtiyacınız olan tek şey, 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ümlerde kullanılabildiğinden values-v21/styles.xml uygulamasındaki temalarınız bunları devralabilir. Bu, "temel" bir temayla başlayıp bunu sürüme özgü stillerinizde genişleterek stillerin yinelenmesini ö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 özellikler kullanmanız gerekir. Dolayısıyla, res/values/styles.xml ürünündeki temel temanız şöyle 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 özgü stilleri res/values-v21/styles.xml öğesinde 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 manifest dosyanıza AppTheme öğesini 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 bölümüne bakın.

Widget stillerini özelleştir

Çerçevedeki ve Destek Kitaplığı'ndaki her widget'ın varsayılan bir stili vardır. Örneğin, uygulamanızı Destek Kitaplığı'ndan bir temayı kullanarak biçimlendirdiğinizde Button örneğinin stili, Widget.AppCompat.Button stili kullanılarak belirlenir. Bir düğmeye farklı bir widget stili uygulamak isterseniz bunu düzen dosyanızdaki style özelliğiyle 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 isterseniz temanızın buttonStyle öğesinde aşağıdaki gibi beyan edebilirsiniz:

<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şletir gibi genişletebilir ve ardından, özel widget stilinizi düzeninize veya temanıza uygulayabilirsiniz.

Ek kaynaklar

Temalar ve stiller hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynakları inceleyin:

Blog yayınları