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.

Oluşturma'da Tasarım Sistemleri →

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

Style, tek bir View öğesinin görünümünü belirten bir özellik koleksiyonudur. Stil, özellikleri yazı tipi rengi, yazı tipi boyutu, arka plan rengi ve daha fazlasını görebilirsiniz.

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 özellik koleksiyonudur. Bir tema uyguladığınızda, uygulamadaki her görünüm veya etkinliği, temanın desteklediği her bir özelliği uygular. Temalar, durum çubuğu ve pencere arka planı gibi görüntülenmeyen öğelere de stil uygulayabilir.

Stiller ve temalar stil kaynak dosyanızı res/values/, genellikle styles.xml olarak 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 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 düğmenin özelliklerini belirtin. 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 ve öğeler tarafından referans verilebilen adlandırılmış kaynak koleksiyonunu tanımlar. widget'lar vb. 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 kısmının ise colorSecondary olduğunu belirten bir stiliniz olabilir. Bu renklerin gerçek tanımları temada sağlanır. Zaman cihaz gece moduna geçtiğinde uygulamanız "ışık" modundan geçiş yapabilir "koyu" temasına tema, tüm bu kaynak adlarının değerlerini değiştirebilirsiniz. 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 stilleri: temalar veya stiller.

Stil oluşturma ve uygulama

Yeni bir stil oluşturmak için projenizin res/values/styles.xml dosyasını açın. Örneğ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 gibi uygulayabilirsiniz:

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

Stilde belirtilen her özellik, görünüm tarafından kabul edilirse söz konusu görünüme uygulanır. Görünüm kabul etmediği özellikleri yoksayar.

Not: Bu stil özellikleri yalnızca style özelliğini eklediğiniz öğeye gönderilir. Alt görünümler stilleri uygulamaz. Alt görünümlerin stilleri devralmasını isterseniz bunun yerine stili android:theme özelliğiyle uygulayın.

Ancak, görünümleri tek tek uygulamak yerine, genellikle Uygulamanızın, etkinliğinizin veya koleksiyonun tamamı için stilleri tema olarak uygulayın bu kılavuzun başka bir bölümünde açıklandığı gibi).

Bir stili genişletin ve özelleştirin

Kendi stillerinizi oluştururken çerçeve veya Destek bölümünden mevcut bir stili her zaman genişletin. Kitaplık'ı tıklayın. Bir stili genişletmek için parent özelliğini kullanarak genişletmek istediğiniz stili belirtin. Ardından, devralınan stil özelliklerini kullanın ve yenilerini ekleyin.

Ö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 adı genellikle platformun stiline benzer bir ada sahiptir. ancak AppCompat dahil.

Bir kitaplıktan veya kendi projenizden stilleri devralmak için üst stil adını tanımlayın önceki örnekte gösterilen @android:style/ bölümü olmadan Ö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>

parent özelliğini kullanmak yerine, stilin adını noktayla genişleterek de platformdakiler hariç stilleri devralabilirsiniz. Diğer bir deyişle, stilinizin adını, devralmak istediğiniz stilin adıyla noktayla ayırın. Siz Bunu genellikle yalnızca kendi stillerinizi genişlettiğinizde yapar, diğer kitaplıklardaki stilleri genişletmez. Örneğin, aşağıdaki stil, önceki örnekte GreenText öğesinden tüm stilleri devralır ve ardından metin boyutunu büyütü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.

Not: Bir stili genişletmek için nokta gösterimini kullanır ve parent özelliğini de eklerseniz üst stiller, nokta gösterimi aracılığıyla devralınan tüm stilleri geçersiz kılar.

<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 desteği Tabandan XML özellikleri View sınıfı içerir ve birçok görünüm kendi özel özelliklerini ekler. Örneğin, TextView XML özellikleri şunları içerir: android:inputType özelliği (örneğin, EditText widget'ı.

Bir stili tema olarak uygulama

Stil oluşturma işlemiyle aynı şekilde tema oluşturabilirsiniz. Aradaki fark, uygulama şeklidir: 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 uygulamak için aşağıdaki adımları uygulayın:

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

"Açık" temayı yalnızca bir etkinliğe nasıl uygulayacağınızı aşağıda görebilirsiniz:

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

Uygulamadaki veya etkinlikteki her görünüm, açıklayacağım. Bir görünüm stilde belirtilen özelliklerden yalnızca bazılarını destekliyorsa söz konusu görünüm geçerli olur. bu özellikleri kullanır ve desteklemedikleri özellikleri yok sayar.

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

Önceki örneklerde Theme.AppCompat gibi bir temanın nasıl uygulanacağı gösterilmektedir Android Destek Kitaplığı tarafından sunulmaktadır. Ancak genellikle temayı size uygun şekilde marka bilinci oluşturma. Bunu yapmanın en iyi yolu, bu stilleri Destek Kitaplığı'ndan genişletmek ve özelliklerden bazılarını geçersiz kılabilir.

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 nasıl belirleyeceğinizi seçerken Android'in stil hiyerarşisine dikkat edin. Genel olarak, Tutarlılık için tema ve stiller mümkün olduğunca. 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 göre 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, 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.

Dikkat: Uygulamanızın stilini değiştiriyorsanız ve beklediğiniz sonuçları görmüyorsanız büyük olasılıkla değişikliklerinizi geçersiz kılacağından emin olun. Örneğin uygulamanıza birlikte bir tema da bağımsız bir View stiline ayarlanırsa stil özellikleri, eşleşen tüm temaları geçersiz kılar özellikleri View ile değiştirin. Ancak stil tarafından geçersiz kılınmayan tüm tema özelliklerinin kullanılmaya devam edeceğini unutmayın.

TextAppearance

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

<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, metin özelliği tanımlarsanız veya bir stilde doğrudan View üzerinde veya bir stilde TextAppearance değerleri.

TextAppearance, TextView'un sunduğu bir stil özelliği 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 aşağıdakileri yaparak uygulamanıza bir Materyal Tasarım teması uygular: projenizin styles.xml dosyasında tanımlanan şekilde varsayılan olarak ayarlanır. Bu AppTheme stili, Destek Kitaplığı'ndaki bir temayı genişletir ve uygulama çubuğu ve yüzen işlem düğmesi (kullanılıyorsa) gibi önemli kullanıcı arayüzü öğelerinin kullandığı renk özelliklerinin geçersiz kılınmasını içerir. 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 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. Bkz. Materyal Tasarım Renge Genel Bakış kullanarak kullanıcı deneyimini dinamik renk ve daha fazla özel renkle iyileştirir.

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, Yeşil Ofis’teki şu şekilde bir arka plan rengi oluşturabilirsiniz:

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

Temanızda kullanabileceğiniz özelliklerin listesi için şuradaki özellikler tablosuna bakın: R.styleable.Theme 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 XML özellikleri sınıfını kullanın.

Ç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 bazı tema özellikleri, düzendeki görünümler için değil, etkinlik penceresi için geçerlidir. Örneğin, windowBackground, pencere arka planı ve windowEnterTransition, aşağıdaki durumlarda kullanılacak bir geçiş animasyonu tanımlar: etkinlik başlar. Daha fazla bilgi için Animasyon kullanarak işlem başlatma başlıklı makaleyi inceleyin.

Android Destek Kitaplığı, temanızı özelleştirmek için kullanabileceğiniz başka özellikler de sunar. Theme.AppCompat tarih aralığından uzatılmış (ör. şurada gösterilen colorPrimary özelliği) örneğini ele alalım. Bu dosyaları en iyi şekilde görüntülemek için kitaplığın attrs.xml dosyasını kullanın.

Not: Destek Kitaplığı'ndaki özellik adlarında android: ön eki kullanılmaz. Bu ayar yalnızca Android çerçevesindeki özellikler için kullanılır.

Destek Kitaplığı'nda, 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ü, kullanmak istediğiniz tema özelliklerini ekliyorsa bunları temanıza ekleyebilirsiniz. bir yandan da eski sürümlerle uyumlu hale gelir. 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ümler için pencere geçişlerini bildirmek üzere kullanabilirsiniz. res/values/styles.xml uygulamasındaki temel temanız şöyle görünebilir: bu:

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

Çerçeve 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 dosyaya farklı bir widget stili uygulamak düğmesini kullanıyorsanız, bunu düzen dosyanızdaki style özelliğiyle yapabilirsiniz. Örneğin, şu seçenek 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 şöyle:

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

Ayrıca, widget stillerini diğer stillerde olduğu gibi genişletebilirsiniz. ardından özel widget stilinizi düzeninize veya temanıza uygulayın.

Ek kaynaklar

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

Blog yayınları

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