Stiller ve temalar

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

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 bir ö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 özelliklerin toplamıdır. Bir tema uyguladığınızda, uygulamadaki veya etkinlikteki her görünüm, temanın desteklediği her bir özelliği uygular. Temalar, durum çubuğu ve pencere arka planı gibi görünmeyen öğelere de stiller uygulayabilir.

Stiller ve temalar, res/values/ dilindeki bir stil kaynak dosyasında belirtilir ve genellikle styles.xml olarak adlandırılır.

Şekil 1. Aynı etkinliğe uygulanan iki tema: 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 kaynaklar ile eşleyen bir anahtar/değer çiftidir.

style, 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 özellikleri bir stile çıkarmak, bunları birden fazla widget'ta kullanmayı ve sürdürmeyi kolaylaştırır.

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

Stillerin ve temaların birlikte çalışması amaçlanır. Örneğin, düğmenin bir parçasının colorPrimary ve diğer bölümünün colorSecondary olduğunu belirten bir stiliniz olabilir. Bu renklerin asıl tanımları temada yer alır. Cihaz gece moduna geçtiğinde uygulamanız "açık" temadan "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 stili: 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 şu 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 özellikleri yoksayar.

Ancak bu kılavuzun başka bir bölümünde açıklandığı gibi, tek tek 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.

Bir stili genişletme ve özelleştirme

Kendi stillerinizi oluştururken platform kullanıcı arayüzü stilleriyle uyumluluğu koruyabilmek 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ır. Destek Kitaplığı'ndaki stiller, her sürümde bulunan kullanıcı arayüzü özellikleri için her stili optimize ederek uyumluluk sağlar. Destek Kitaplığı stilleri, genellikle platformun stiline benzer bir ada sahiptir ancak AppCompat eklenmiştir.

Bir kitaplıktan veya kendi projenizden stil 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 bir stilin adını nokta gösterimiyle genişleterek stilleri (platformdakiler hariç) devralabilirsiniz. Yani stilinizin adına, devralmak istediğiniz stilin adını noktayla ayrılmış şekilde 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 bulunan GreenText öğesindeki tüm stilleri devralır ve daha sonra, metin boyutunu artırır:

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

Daha fazla ada zincir 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 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.

Bir stili tema olarak uygulama

Stilleri oluştururken aynı şekilde tema oluşturabilirsiniz. Aradaki fark onu nasıl uyguladığınızdır: Bir görünümde style özelliğiyle bir stil uygulamak yerine, ya <application> etiketine ya da AndroidManifest.xml dosyasındaki <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ı uygulamanın tamamına nasıl uygulayacağınız burada gösterilmektedir:

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

"Açık" temasını şu şekilde tek bir etkinliğe uygulayabilirsiniz:

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

Uygulamadaki veya etkinlikteki her görünüm, belirtilen temada tanımlanan stillerin desteklediği stilleri uygular. Bir görünüm, stilde belirtilen özniteliklerin yalnızca bir kısmını destekliyorsa yalnızca bu öznitelikleri uygular ve desteklemediğini yok sayar.

Android 5.0 (API düzeyi 21) ve Android Destek Kitaplığı 22.1 sürümünden başlayarak, 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 renk paletlerini değiştirmek için faydalıdır.

Ö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, aşağıdaki bölümde açıklandığı gibi bu stilleri Destek Kitaplığı'ndan genişletmek ve özelliklerden bazılarını geçersiz kılmaktır.

Stil hiyerarşisi

Android, Android uygulamanızın tamamındaki özellikleri ayarlamak için çeşitli yollar sunar. Örneğin, özellikleri doğrudan bir düzen içinde 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. Tutarlılık için genellikle tema ve stilleri kullanın. Aynı özellikleri birden fazla yerde belirtirseniz son olarak hangi özelliklerin uygulanacağı aşağıdaki listeyle belirlenir. Liste en yüksek öncelikten en düşüğe doğru sıralanır.

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

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

Metin Görünümü

Stillerle ilgili sınırlamalardan biri, bir View öğesine yalnızca bir stil uygulayabilmenizdir. Ancak bir TextView içinde, aşağıdaki örnekte gösterildiği gibi, 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 ve aynı zamanda bir View öğesinin stilini diğer kullanımlar için kullanılabilir durumda bırakmanıza olanak tanır. Bununla birlikte, herhangi bir metin özelliğini doğrudan View içinde veya bir stilde tanımlarsanız bu değerlerin TextAppearance değerlerini geçersiz kıldığını unutmayın.

TextAppearance, TextView'ın sunduğu stil özelliklerinin bir alt kümesini destekler. Özelliklerin tam listesi için TextAppearance adresini 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ız varsayılan olarak Materyal Tasarım temasını uygular. Bu AppTheme stili, Destek Kitaplığı'ndaki bir temayı genişletir ve uygulama çubuğu ve kullanılıyorsa 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 referanslardır. Renkleri değiştirmek üzere 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 değerlerindeki 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 ş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 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 özellikleri bulabilirsiniz. Örneğin, tüm görünümler View temel sınıfındaki XML özelliklerini destekler.

Çoğu özellik, belirli görünüm türlerine, bazıları ise tüm görünümlere 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 ayrıntılı bilgi için Animasyon kullanarak etkinlik başlatma bölümüne bakın.

Android Destek Kitaplığı, Theme.AppCompat ürününden genişletilen 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 şekilde kitaplığın attrs.xml dosyasında görüntüleyebilirsiniz.

Ayrıca, önceki örnekte gösterilenler yerine Destek Kitaplığı'nda yer alan temaları genişletmek isteyebilirsiniz. Mevcut 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ünde kullanmak istediğiniz tema özellikleri ekleniyorsa bunları eski sürümlerle uyumlu olmaya devam ederken temanıza ekleyebilirsiniz. Tek ihtiyacınız olan, kaynak sürümü niteleyicisini 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ümlerde kullanılabildiğinden values-v21/styles.xml uygulamasındaki temalarınız bunları devralabilir. Bu, bir "temel" temayla başlayıp ardından 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ümler için pencere geçişlerini bildirmek üzere 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, res/values-v21/styles.xml paketine sürüme özel stilleri 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 isterseniz Alternatif kaynaklar sağlama bölümüne göz atı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ığı'ndaki 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 şekilde beyan edebilirsiniz:

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

Ayrıca, herhangi bir stili genişletirken olduğu gibi widget stillerini genişletebilir, 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 bakın:

Blog yayınları