Stiller ve temalar

Oluşturma yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da tema oluşturma hakkında bilgi edinin.

Oluşturma'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. Bir stil, yazı tipi rengi, yazı tipi boyutu, arka plan rengi ve daha birçok özelliği 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üntülenmeyen öğelere de stil uygulayabilir.

Stiller ve temalar, res/values/ içinde genellikle styles.xml olarak adlandırılan bir stil kaynak dosyasında tanımlanır.

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

Temalar ve stiller

Temalar ve stiller birçok açıdan benzer 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.

style, belirli bir görüntüleme türüne ait özellikleri belirtir. Örneğin, bir stil bir düğmenin özelliklerini belirtebilir. Bir stilde belirttiğiniz her özellik, düzen dosyasında ayarlayabileceğiniz bir özelliktir. Bir stilin tüm özelliklerini ayıklamak, bu özellikleri birden fazla widget'ta kullanmayı ve yönetmeyi kolaylaştırır.

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

Stil ve temalar birlikte çalışacak şekilde tasarlanmıştır. Ö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 sağlanır. Cihaz gece moduna geçtiğinde uygulamanız "açık" temasından "koyu" temaya geçerek tüm bu kaynak adlarının değerlerini değiştirebilir. Stiller belirli renk tanımları yerine 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 stili: temalar ve stiller başlıklı blog yayınını inceleyin.

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, tek tek görünümlere stil 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ı için 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çevedeki veya Destek Kitaplığı'ndaki mevcut bir stili genişletin. Bir stili genişletmek için parent özelliğini kullanarak 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ü devralıp 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 mevcut kullanıcı arayüzü özellikleri için optimize ederek uyumluluk sağlar. Destek kitaplığı stillerinin adları genellikle platformdaki stile benzerdir 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 ö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>

parent özelliğini kullanmak yerine, stilin adını noktayla genişleterek de platformdakiler hariç stilleri devralabilirsiniz. Yani, devralmak istediğiniz stilin adını nokta ile ayırarak stilinizin adının önüne ekleyin. Genellikle bunu yalnızca kendi stillerinizi genişletirken yaparsınız, diğer kitaplıklardaki stilleri değil. Örneğin, aşağıdaki stil önceki örnekteki GreenText stilinin tümünü 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 tür stilleri istediğiniz kadar devralmaya devam edebilirsiniz.

<item> etiketiyle hangi özellikleri tanımlayabileceğ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şturma işlemiyle aynı şekilde tema oluşturabilirsiniz. Aradaki 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 "koyu" temasını uygulamanın tamamına uygulamak için aşağıdaki adımları uygulayın:

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

Uygulama veya etkinlikteki her görünüm, belirli temada tanımlananlardan 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ı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ıza nasıl stil vereceğinizi seçerken Android'in stil hiyerarşisini göz önünde bulundurun. Genel olarak, tutarlılık için mümkün olduğunca çok tema ve stil 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. Ö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, etkinliğe veya uygulamanızın tamamına tema uygulama
7. TextView üzerinde TextAppearance ayarlamak gibi görünüme özgü belirli bir stil uygulama

Şekil 2. span'ten gelen stil, textAppearance'ten gelen stili geçersiz kılar.

Metin Görünümü

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, View stilini diğer kullanımlar için kullanılabilir durumda bırakırken metne özgü stili tanımlamanıza olanak tanır. Bununla birlikte, doğrudan View veya bir stilde metin özelliği 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 bölümüne bakın.

Dahil edilmeyen bazı yaygın TextView özellikleri: 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ştirme

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 aşağıdaki gibi görünür:

<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. 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ış bölümüne bakın.

Renklerinizi belirledikten 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 özellik tablosuna bakın. Görünüm sınıfı referanslarındaki "XML özellikleri" tablosuna bakarak da görünümler için stil eklerken ö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, bazıları ise tüm görüntülemelere uygulanır. 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ş animasyonunu tanımlar. Daha fazla bilgi için Animasyon kullanarak işlem başlatma başlıklı makaleyi inceleyin.

Android Destek Kitaplığı, Theme.AppCompat'den genişletilmiş temanızı özelleştirmek için kullanabileceğiniz diğer özellikleri de sağlar (Örneğin, önceki örnekte gösterilen colorPrimary özelliği). Bu dosyaları en iyi şekilde görüntülemek için kitaplığın attrs.xml dosyasını kullanın.

Ayrıca, önceki örnekte gösterilenlerin yerine Destek Kitaplığı'nda bulunan ve genişletmek isteyebileceğiniz farklı temalar da vardır. Kullanılabilir temaları görmenin en iyi yolu kitaplığın themes.xml dosyasıdır.

Sürüme özgü stiller ekleme

Android'in yeni bir sürümünde kullanmak istediğiniz tema özellikleri eklenirse eski sürümlerle uyumluluğunuzu korurken bunları temanıza ekleyebilirsiniz. Tek ihtiyacınız olan, kaynak sürüm belirteci içeren bir 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. Yani "temel" bir temayla başlayıp bunu sürüme özgü stillerinizde genişleterek stil kopyalamalarından kaçınabilirsiniz.

Ö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. Bu nedenle, res/values/styles.xml'teki 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 manifest dosyanıza AppTheme 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 için 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, 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ğıdaki kodda kitaplığın kenarsız düğme stili uygulanmaktadır:

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

Diğer stilleri genişletmek gibi widget stillerini de 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ı

• Android stili: temalar ve stiller
• Android stili: ortak tema özellikleri
• Android stili: Tema özelliklerini tercih edin