Stiller ve temalar

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.
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.

Stil, tek bir View öğesinin görünümünü belirten özellikler koleksiyonudur. Stil; yazı tipi rengi, yazı tipi boyutu, arka plan rengi ve daha birçok özelliği belirtebilir.

Tema, tek bir görünüm yerine tüm uygulama, etkinlik veya görünüm hiyerarşisine uygulanan bir özellikler koleksiyonudur. Bir tema uyguladığınızda, uygulamadaki veya etkinlikteki her görünüm, temanın desteklediği her bir özelliğini uygular. Temalar, durum çubuğu ve pencere arka planı gibi görünüm dışı öğelere de stil uygulayabilir.

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

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

Temalar ve stiller arasındaki farklar

Temalar ve stiller birçok benzerliğe sahip olsa da farklı amaçlar için kullanılır. Temalar ve stiller aynı temel yapıya sahiptir: Özellikleri kaynaklarla eşleyen bir anahtar/değer çifti.

Stil, belirli bir görünüm türünün özelliklerini belirtir. Örneğin, bir stil bir düğmenin özelliklerini belirtebilir. Bir stilde belirttiğiniz her özellik, düzen dosyasında ayarlayabileceğiniz bir özelliktir. Tüm özellikleri bir stile ayırmak, bunları birden fazla widget'ta kullanmayı ve yönetmeyi kolaylaştırır.

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

Stiller ve temalar birlikte kullanılmak üzere tasarlanmıştır. Örneğin, bir düğmenin bir bölümünün colorPrimary, başka bir bölümünün ise colorSecondary olduğunu belirten bir stiliniz olabilir. Bu renklerin gerçek tanımları temada sağlanır. 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ı yerine semantik 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 oluşturma: temalar ve stiller başlıklı blog yayınını inceleyin.

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 öğedeki name, düzeninizde XML özelliği olarak kullandığınız bir özelliği belirtir. <item> öğesindeki değer, ilgili ö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 gibi uygulayabilirsiniz:

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

Stilde belirtilen her özellik, görünüm tarafından kabul edilirse o görünüme uygulanır. Görünüm, kabul etmediği tüm özellikleri yok sayar.

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

Stili 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. Ardından, devralınan stil özelliklerini geçersiz kılabilir ve yeni özellikler 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ın. Destek Kitaplığı'ndaki stiller, her stili her sürümde bulunan kullanıcı arayüzü özellikleri için optimize ederek uyumluluk sağlar. Destek Kitaplığı stilleri genellikle platformdaki stile benzer bir ada sahiptir ancak AppCompat içerir.

Bir kitaplıktan veya kendi projenizden stilleri devralmak için üst stil adını, önceki örnekte gösterilen @android:style/ kısmı olmadan tanımlayın. Örneğin, aşağıdaki örnekte metin görünümü stilleri Destek Kitaplığı'ndan devralını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 (platformdan gelenler hariç) devralabilirsiniz. Yani, stilinizin adının önüne devralmak istediğiniz stilin adını ekleyin ve nokta ile ayırın. Bu işlemi genellikle diğer kitaplıklardaki stilleri değil, yalnızca kendi stillerinizi genişletirken yaparsınız. Örneğin, aşağıdaki stil, önceki örnekteki GreenText öğesinden tüm stilleri devralır ve ardından metin boyutunu artırır:

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

Daha fazla ad ekleyerek bu şekilde stil devralmaya devam edebilirsiniz.

<item> etiketiyle hangi özellikleri bildirebileceğinizi öğrenmek 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 bir metin görünümüne uygulayabileceğiniz android:inputType özelliğini içerir.

Stili tema olarak uygulama

Stil oluşturduğunuz şekilde tema da oluşturabilirsiniz. Aradaki fark, uygulama şeklinizdir: Bir görünüme style özelliğiyle stil uygulamak yerine, AndroidManifest.xml dosyasındaki <application> etiketine veya <activity> etiketine android:theme özelliğiyle tema uygularsınız.

Örneğin, Android Destek Kitaplığı'nın Materyal Tasarım "koyu" temasını uygulamanın tamamına şu şekilde uygulayabilirsiniz:

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

"Açık" temayı yalnızca bir etkinliğe uygulamak için şu adımları izleyin:

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

Uygulamadaki veya etkinlikteki her görünüm, belirli bir temada tanımlanan stillerden desteklediği stilleri uygular. Bir görünüm, stilde tanımlanan özelliklerin yalnızca bir kısmını destekliyorsa yalnızca bu özellikleri uygular ve desteklemediği özellikleri yoksayar.

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 sayede, arayüzünüzün belirli bir bölümündeki tema renk paletlerini değiştirebilirsiniz.

Önceki örneklerde, Android Destek Kitaplığı tarafından sağlanan Theme.AppCompat gibi bir temanın nasıl uygulanacağı gösterilmektedir. 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 bazı özellikleri geçersiz kılmaktır.

Stil hiyerarşisi

Android, Android uygulamanızda özellikleri ayarlamak için çeşitli yöntemler 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 seçerken Android'in stil hiyerarşisini göz önünde bulundurun. Genel olarak, tutarlılık için temaları ve stilleri mümkün olduğunca çok kullanın. Aynı özellikleri birden fazla yerde belirtirseniz hangi özelliklerin uygulanacağını aşağıdaki liste belirler. Liste, en yüksek öncelikten en düşük önceliğe doğru sıralanır.

  1. TextView türevi sınıflara metin aralıkları kullanarak karakter veya paragraf düzeyinde stil uygulama.
  2. Özellikleri programatik olarak uygulama
  3. Özellikleri doğrudan bir görünüme ayrı ayrı uygulama.
  4. Bir görünüme stil uygulama
  5. Varsayılan stil.
  6. Bir görünüm koleksiyonuna, etkinliğe veya uygulamanızın tamamına tema uygulama
  7. Görünüme özel belirli stiller uygulama (ör. TextView üzerinde TextAppearance ayarlama).

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

TextAppearance

Stillerle ilgili bir sınırlama, bir 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ıza olanak tanırken View stilini diğer kullanımlar için kullanılabilir durumda bırakır. Ancak doğrudan View üzerinde veya bir stilde metin özellikleri 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. Özelliklerin tam listesi için TextAppearance sayfasına bakın.

Dahil edilmeyen bazı yaygın TextView özellikleri şunlardır: lineHeight[Multiplier|Extra], lines, breakStrategy, 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ştirme

Android Studio ile proje oluşturduğunuzda, projenizin styles.xml dosyasında tanımlandığı şekilde uygulamanıza varsayılan olarak bir Materyal Tasarım teması uygulanır. Bu AppTheme stili, Destek Kitaplığı'ndaki bir temayı genişletir ve uygulama çubuğu ile kayan işlem düğmesi (kullanılıyorsa) gibi önemli kullanıcı arayüzü öğeleri tarafından kullanılan renk özelliklerinin geçersiz kılınmasını sağlar. Bu sayede, sağlanan renkleri güncelleyerek uygulamanızın renk tasarımını hızlıca ö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, projenin res/values/colors.xml dosyasında tanımlanan diğer renk kaynaklarına referanslardır. Renkleri değiştirmek için bu dosyayı düzenlemeniz gerekir. Dinamik renk ve ek özel renklerle kullanıcı deneyimini iyileştirmek için Materyal Tasarım'da Renklere Genel Bakış başlıklı makaleyi inceleyin.

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, etkinliğin 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 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.

Çoğu özellik belirli görünüm türlerine uygulanır, bazıları ise tüm görünümler için geçerlidir. Ancak R.styleable.Theme sayfasında listelenen bazı tema özellikleri, düzendeki görünümlere değil etkinlik penceresine uygulanır. Ö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 başlıklı makaleyi inceleyin.

Android Destek Kitaplığı, Theme.AppCompat temasından genişletilen temanızı özelleştirmek için kullanabileceğiniz başka özellikler de sağlar. Örneğin, yukarıdaki örnekte gösterilen colorPrimary özelliği bunlardan biridir. Bunları en iyi şekilde görüntülemek için kitaplığın attrs.xml dosyasını kullanabilirsiniz.

Destek Kitaplığı'nda, önceki örnekte gösterilenler 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 ekleme

Android'in yeni bir sürümü, kullanmak istediğiniz tema özellikleri eklerse bunları temanıza ekleyebilir ve eski sürümlerle uyumlu olmaya devam edebilirsiniz. Tek yapmanız gereken, kaynak sürümü niteleyicisini içeren bir values dizinine kaydedilmiş başka bir styles.xml dosyası oluşturmaktı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 dosyasındaki temalarınız bu stilleri devralabilir. Bu sayede, "temel" bir temayla başlayıp ardından sürüme özel stillerinizde bu temayı genişleterek stilleri kopyalamaktan kaçınabilirsiniz.

Örneğin, Android 5.0 (API düzeyi 21) ve sonraki sürümler için pencere geçişlerini tanımlamak istiyorsanız yeni özellikleri kullanmanız gerekir. 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 özgü stilleri res/values-v21/styles.xml içine 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 manifesto dosyanızda AppTheme uygulayabilirsiniz. Sistem, her sistem sürümü için kullanılabilir stilleri seçer.

Farklı cihazlar için alternatif kaynakları kullanma hakkında daha fazla bilgi edinmek isterseniz Alternatif kaynaklar sağlama başlıklı makaleyi inceleyin.

Widget stillerini özelleştirme

Çerçevedeki ve Destek Kitaplığı'ndaki her widget'ın varsayılan bir stili vardır. Örneğin, uygulamanızı Destek Kitaplığı'ndaki bir temayı kullanarak biçimlendirdiğinizde Button örneği, Widget.AppCompat.Button stili kullanılarak biçimlendirilir. Bir düğmeye farklı bir widget stili uygulamak istiyorsanız bunu düzen dosyanızdaki style özelliğiyle yapabilirsiniz. Örneğin, aşağıdaki kodda kitaplığın kenarlıksız düğme stili uygulanır:

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

Bu stili tüm düğmelere uygulamak istiyorsanız temanızın buttonStyle dosyasında aşağıdaki gibi tanımlayabilirsiniz:

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

Widget stillerini, diğer stilleri genişlettiğiniz 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 kaynaklara göz atın:

Blog yayınları