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. 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, 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ünüm olmayan öğelere de stil uygulayabilir.
Stiller ve temalar, res/values/
'de bir stil kaynak dosyasında tanımlanır ve genellikle styles.xml
olarak adlandırılır.
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 stil, 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ın birden çok widget'ta kullanımını ve korunmasını kolaylaştırır.
Tema, stiller, düzenler, widget'lar vb. tarafından referans verilebilecek bir adlandırılmış kaynak koleksiyonunu tanımlar. Temalar, Android kaynaklarına colorPrimary
gibi anlamsal adlar atar.
Stiller ve temalar birlikte kullanılabilir. Ö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 sunulur. 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ını değil, 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 stil: 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 aşağıdaki adımları uygulayın:
- Stili benzersiz şekilde tanımlayan bir ada sahip bir
<style>
öğesi ekleyin. - Tanımlamak istediğiniz her stil özelliği için bir
<item>
öğesi ekleyin. Her öğedekiname
, 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, stilleri ayrı ayrı görünümlere uygulamak yerine, genellikle bu kılavuzun başka bir bölümünde açıklandığı gibi uygulamanızın tamamı, etkinliğiniz veya görünüm koleksiyonunuz için stilleri tema olarak uygularsınız.
Bir stili genişletin ve özelleştirin
Kendi stillerinizi oluştururken platform kullanıcı arayüzü stilleriyle uyumluluğu koruyabilmek için daima ç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ümdeki kullanıcı arayüzü özellikleri için her stili optimize ederek uyumluluk sağlar. Destek Kitaplığı stilleri, genellikle platformdaki stile benzer bir ada sahiptir 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 ö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 stilin adını nokta gösterimiyle genişleterek (platform dışındakiler) stilleri de devralabilirsiniz. Yani, devralmak istediğiniz stilin adını nokta ile ayırarak stilinizin adının önüne 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 GreenText
öğesindeki tüm stilleri alır ve ardından metin boyutunu artırır:
<style name="GreenText.Large"> <item name="android:textSize">22dp</item> </style>
Daha fazla ada zincirleme ekleyerek 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 metin görünümüne uygulayabileceğiniz android:inputType
özelliğini içerir.
Stili tema olarak uygulama
Stil oluşturduğunuz gibi bir tema da oluşturabilirsiniz. Aralarındaki 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'daki "koyu" temasının tüm uygulamaya nasıl uygulanacağı burada açıklanmaktadır:
<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>
Uygulamadaki veya etkinlikteki her görünüm, 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 ö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ızın genelinde özellik ayarlamak için çeşitli yöntemler sunar. Örneğin, özellikleri doğrudan bir düzen içinde ayarlayabilir, görünüme stil uygulayabilir, düzene tema uygulayabilir, 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 stilleri mümkün olduğunca 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.
TextView
türetilmiş sınıflara metin aralıkları kullanarak karakter veya paragraf düzeyinde stil uygulama.- Özellikleri programatik olarak uygulama.
- Görünüme tek tek özellikler uygulama.
- Bir görünüme stil uygulama.
- Varsayılan stil.
- Bir tema koleksiyonuna, bir etkinliğe veya uygulamanızın tamamına tema uygulama.
TextView
içinTextAppearance
ayarlama gibi görünüme özgü belirli stiller uygulama.
Metin Görünümü
Stillerle ilgili bir sınırlama, 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ızı sağlarken View
stilini başka kullanımlar için de kullanılabilir hale getirir. Bununla birlikte, 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. Tam özellik listesi için TextAppearance
bölümüne bakın.
Dahil olmayan yaygın TextView
özelliklerinden bazıları şunlardır:
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ştirin
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 ş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. Bu, renkleri değiştirmek için düzenlediğiniz dosyadır.
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 öğ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, 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 özellikler tablosuna bakın. Düzeninizdeki görünümler için stiller 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üntüleme türlerine uygulanır. Bazıları tüm görünümler için geçerlidir. 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ş animasyonu tanımlar. Daha fazla bilgi için Animasyon kullanarak etkinlik başlatma bölümüne bakın.
Android Destek Kitaplığı, Theme.AppCompat
genişletilmiş temanızı özelleştirmek için kullanabileceğiniz, önceki örnekte gösterilen colorPrimary
özelliği gibi başka özellikler de sunar. Bunları en iyi kitaplığının attrs.xml
dosyasında görüntüleyebilirsiniz.
Destek Kitaplığı'nda, önceki örnekte gösterilenlerin 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 ekle
Android'in yeni bir sürümü, kullanmak istediğiniz tema özelliklerini eklerse eski sürümlerle uyumlu olmaya devam ederken bunları temanıza ekleyebilirsiniz. Tek ihtiyacınız olan, 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ümler için kullanılabildiğinden values-v21/styles.xml
temalarınız bunları devralabilir. Bu, "temel" bir temayla başlayıp bunu sürüme özgü stillerinizde genişleterek stillerin kopyalanmasını ö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 özellikleri kullanmanız gerekir. Yani 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 ö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 AppTheme
öğesini manifest dosyanıza 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 başlıklı makaleye bakın.
Widget stillerini özelleştir
Ç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ğıdakiler kitaplığın kenarlıksız düğme stilini uygular:
<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>
Ayrıca, widget stillerini diğer stilleri genişlettiğinizde olduğu gibi genişletebilir ve ardından, özel widget stilinizi düzeninizde veya temanızda uygulayabilirsiniz.
Ek kaynaklar
Temalar ve stiller hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara bakın:
Blog yayınları
- Android stilleri: temalar veya stiller
- Android stili: ortak tema özellikleri
- Android stili: Tema özelliklerini tercih etme