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. web tasarımındaki stil sayfalarına benzerdir.
style, tek bir öğenin görünümünü belirten
View
. Stil, özellikleri
yazı tipi rengi, yazı tipi boyutu, arka plan rengi ve daha fazlasını görebilirsiniz.
Tema; bir uygulamanın, etkinliğin veya görünümün tamamına uygulanan bir özellikler koleksiyonudur tek bir görünüm değil hiyerarşik yapıdadır. Bir tema uyguladığınızda, uygulamadaki her görünüm veya etkinliği, temanın desteklediği her bir özelliği uygular. Temalar, görünüm olmayan öğeleri (ör. durum çubuğu ve pencere arka planı)
Stiller ve temalar
stil kaynak dosyanızı
res/values/
, genellikle styles.xml
olarak adlandırılır.
![](https://developer.android.com/static/training/material/images/material-themes_2x.png?authuser=19&hl=tr)
Ş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 kaynaklar.
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ı olabilir. Tüm özellikleri bir stile ayıklamak, bunların kullanımını ve bakımını kolaylaştırır birçok widget'ta kullanabilirsiniz.
Tema, stiller, düzenler ve öğeler tarafından referans verilebilen adlandırılmış kaynak koleksiyonunu tanımlar.
widget'lar vb. Temalar, Android'e colorPrimary
gibi anlamsal adlar atar
kaynaklar.
Stiller ve temalar birlikte kullanılabilir. Örneğin,
bir kısmının colorPrimary
, diğer bir kısmının ise
colorSecondary
. Bu renklerin gerçek tanımları temada sunulur. 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. Stilleri değiştirmeniz gerekmez çünkü
stilleri, belirli renk tanımlarını değil, anlamsal adları kullanıyor.
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 stil oluşturmak için projenizin res/values/styles.xml
dosyasını açın. Örneğ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. İlgili içeriği oluşturmak için kullanılan Her bir öğedekiname
, kullanır.<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 görünümlere tek tek stil uygulamak yerine, 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ğiyle genişletmek istediğiniz stili seçin. Ardından, devralınan
stil özelliklerini kullanın ve yenilerini ekleyin.
Örneğin, Android platformunun varsayılan metin görünümünü devralabilir ve şöyle olur:
<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. Bu
Destek Kitaplığı,
. 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
olmadan önceki örnekte gösterildiği gibi @android:style/
bölümü gösterilmiştir. Ö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, platformdakiler hariç olmak üzere, bir stilin
parent
özelliği yerine nokta gösterimiyle reklam adını girin. 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 zincir kullanarak bunun gibi stilleri istediğiniz kadar devralmaya devam edebilirsiniz. gösterir.
Bir <item>
etiketiyle tanımlayabileceğiniz özellikleri bulmak için "XML
özellikleri" tablosunda yer alır. 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'ı.
Stili tema olarak uygulama
Stil oluşturduğunuz gibi bir tema da oluşturabilirsiniz. Aradaki fark, onu nasıl uyguladığınızdır:
Bir görünümde style
özelliğine sahip bir stil uygulamak yerine, aşağıdakileri içeren bir tema uygularsınız:
<application>
veya birandroid:theme
AndroidManifest.xml
dosyasında <activity>
etiketi.
Örneğin, Android Destek Kitaplığı'nın Materyal Tasarımı "koyu"nun nasıl uygulanacağı burada açıklanmaktadır temasını uygulamanın tamamı:
<manifest ... > <application android:theme="@style/Theme.AppCompat" ... > </application> </manifest>
"Işığı" nasıl uygulayacağınızı tek bir etkinlikle bağdaştırın:
<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,
Bu görünüm, belirli bir öğede tema renk paletlerini değiştirmek için kullanışlıdır
bölümünü seçin.
Ö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ızdaki özellikleri ayarlamak için çeşitli yöntemler sunar. Örneğin, Öznitelikleri doğrudan bir düzen içinde ayarlayabilir, görünüme stil uygulayabilir, düzene tema uygulayabilir ve özellikleri bile 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 aşağıdaki liste, hangi özelliklerin uygulanacağını belirler. Liste en yüksek öncelikten en düşüğe doğru sıralanır.
TextView
türetilmiş metne metin yayılmaları kullanarak karakter veya paragraf düzeyinde stil uygulama sınıflar.- Ö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.
- Görünüme özgü belirli bir stil uygulama, örneğin
TextAppearance
.TextView
cihazında.
![](https://developer.android.com/static/guide/topics/ui/images/text-multiple-styles.png?authuser=19&hl=tr)
Şekil 2. span
öğesinden stil,
textAppearance
.
Metin Görünümü
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
, metne özel stil tanımlamanıza ve aynı zamanda bir stilin dışına çıkmamanıza olanak sağlar
View
diğer kullanımlar için kullanılabilir. Bununla birlikte, metin özelliği tanımlarsanız
veya bir stilde doğrudan View
üzerinde veya bir stilde
TextAppearance
değerleri.
TextAppearance
, TextView
özelliğine sahip bir stil özelliği alt grubunu destekler
tekliflerdir. Tam özellik listesi için bkz.
TextAppearance
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
Tüm düzeni etkileyen özellikler desteklenmez.
Varsayılan temayı özelleştirin
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ığı'ndan bir temayı genişletir ve kullanılan renk özelliklerine yönelik geçersiz kılmalar içerir
uygulama çubuğu ve
kayan işlem düğmesi (kullanılıyorsa). Siz de
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 diğer
renk kaynakları,
projenin res/values/colors.xml
dosyasına ekleyin. Bu, renkleri değiştirmek için düzenlediğiniz dosyadır.
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
Eklerken
stillerini ayarlamak istiyorsanız, özellikleri görmek için "XML özelliklerine"
tablosunda görebilirsiniz. Ö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 uygulanır. Bazıları tüm görünümler için geçerlidir. Ancak,
adresinde listelenen bazı tema özellikleri
R.styleable.Theme
,
etkinlik penceresi açılır. Ö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 Başlatma
bir etkinliktir.
Android Destek Kitaplığı, temanızı özelleştirmek için kullanabileceğiniz başka özellikler de sunar.
Theme.AppCompat
öğesinden uzatılmış (ör. şurada gösterilen colorPrimary
özelliği):
örneğini ele alalım. En iyi deneyim için
kitaplığının attrs.xml
dosyasını kullanabilirsiniz.
Destek Kitaplığı'nda, genişletmek isteyebileceğiniz farklı temalar da vardır.
. Mevcut temaları görmek için en iyi yer:
"the"
kitaplığının themes.xml
dosyasını kullanabilirsiniz.
Sürüme özgü stiller ekle
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 başka bir styles.xml
dosyası
şunu içeren bir values
dizinine kaydedilir:
kaynak sürümü
niteleyici:
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 da ekip arkadaşlarınızın
bir "temel" ile başlayarak stilleri kopyalama ve sonra bunu sürüme özel sürümde genişletme
stillerini ayarlayın.
Ö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 ö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. Ardından sistem, stilleri seçer
her sistem sürümü için geçerli.
Farklı cihazlar için alternatif kaynakları kullanma hakkında daha fazla bilgi edinmek istiyorsanız şu sayfaya göz atın: Alternatif kaynaklar sağlama.
Widget stillerini özelleştir
Çerçevedeki ve Destek Kitaplığı'ndaki her widget'ın varsayılan bir stili vardır. Örneğin,
Uygulamanızın stilini belirlemek için Destek Kitaplığı'ndan bir tema kullanın.
Button
,
Widget.AppCompat.Button
stili. 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 stilleri güncellerken 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 stilleri: temalar veya stiller
- Android stili: ortak tema özellikleri
- Android stili: Tema özelliklerini tercih etme