Bagaimana cara mengatur warna / gaya ActionBar kustom?

89

Saya menggunakan Android Navigation bardalam proyek saya, saya ingin mengubah warna atas di bilah tindakan menjadi sesuatu yang merah, Bagaimana saya bisa melakukannya? Saya punya sesuatu seperti ini,

hitam atas

dan saya menginginkan sesuatu seperti ini,

merah atas

bagaimana saya bisa mencapai itu?

android colors background android-actionbar navigation-drawer hemantsb
sumber

Jawaban:

176

Anda dapat menentukan warna ActionBar (dan hal-hal lain) dengan membuat Style kustom :

Cukup edit file res / values ​​/ styles.xml dari proyek Android Anda.

Contohnya seperti ini:

<resources>
    <style name="MyCustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

Kemudian setel "MyCustomTheme" sebagai Tema Aktivitas Anda yang berisi ActionBar.

Anda juga dapat mengatur warna untuk ActionBar seperti ini:

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

Diambil dari sini: Bagaimana cara mengubah warna latar belakang ActionBar dari ActionBarActivity menggunakan XML?

Philipp Jahoda
sumber
2
Apa yang Anda maksud dengan "Kemudian setel" MyCustomTheme "sebagai Tema Aktivitas Anda yang berisi ActionBar." Bagaimana aku melakukan itu?
Kala J
2
Dalam XML aktivitas Anda, Anda harus menambahkan android: theme = "@ style / MyCustomTheme" sebagai paremeter di dalam tag <android.support.v4.view.ViewPager ... />
PedroD
2
bagaimana dengan file valuesv14 dan valuesv21 yang tersisa di android
Harsha
Bagaimana cara mengubah judul textStyle?
Adam Hurwitz
KalaJ digunakan setTheme(R.style.MyCustomTheme) dalam metode onCate aktivitas Anda.
NullByte08
59

Secara umum, OS Android memanfaatkan "tema" untuk memungkinkan pengembang aplikasi secara global menerapkan sekumpulan universal parameter gaya elemen UI ke aplikasi Android secara keseluruhan, atau, sebagai alternatif, ke satu subkelas Aktivitas.

Jadi, ada tiga "tema sistem" OS Android utama, yang dapat Anda tentukan dalam file XML Manifes Android saat Anda mengembangkan aplikasi untuk Versi 3.0 dan versi yang lebih baru

Saya merujuk pustaka dukungan (APPCOMPAT) di sini: - Jadi ketiga temanya adalah 1. AppCompat Light Theme (Theme.AppCompat.Light)

masukkan deskripsi gambar di sini

  1. Tema Gelap AppCompat (Theme.AppCompat),

masukkan deskripsi gambar di sini

  1. Dan perpaduan antara keduanya, AppCompat Light Theme dengan Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml dan melihat tagnya, tema android disebutkan sebagai: - android: theme = "@ style / AppTheme"

Buka Styles.xml dan kami memiliki tema aplikasi dasar yang dideklarasikan di sana: -

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  </style>

Kita perlu mengganti elemen tema induk ini untuk mengatur gaya bilah tindakan.

ActionBar dengan latar belakang warna berbeda: -

Untuk melakukan ini, kita perlu membuat gaya baru MyActionBar (Anda dapat memberikan nama apa pun) dengan referensi induk ke @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse yang menyimpan karakteristik gaya untuk elemen Android ActionBar UI. Jadi definisinya

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
</style>

Dan definisi ini perlu kita rujuk di AppTheme kita, menunjuk ke gaya ActionBar yang diganti sebagai--

@ style / MyActionBar ActionBar dengan warna background pink

Ubah warna teks bilah judul (mis. Hitam menjadi putih): -

Sekarang untuk mengubah warna teks judul, kita perlu mengganti referensi induk parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

Jadi definisi gaya akan menjadi

<style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

Kami akan mereferensikan definisi gaya ini di dalam definisi gaya MyActionBar , karena modifikasi TitleTextStyle adalah elemen anak dari elemen UI OS induk ActionBar. Jadi definisi terakhir dari elemen gaya MyActionBar adalah

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
    <item name="titleTextStyle">@style/MyActionBarTitle</item>
</style>

JADI ini adalah Styles.xml terakhir

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

ActionBar Dengan warna judul putih Untuk opsi ActionBar lebih lanjut Penataan menu, lihat tautan ini

Nicks
sumber
2
hey man itu berhasil. satu keraguan bagaimana jika saya ingin mengubah warna ikon menu overflow, itu mengubah warna sesuai tema kita kan?. ikon putih untuk tema gelap dan ikon gelap untuk tema terang, bagaimana cara mengubahnya menjadi putih? pertimbangkan gambar terakhir dalam jawaban Anda.
Ameen Maheen
33

Hanya untuk Android 3.0 dan lebih tinggi

Saat hanya mendukung Android 3.0 dan lebih tinggi, Anda dapat menentukan latar belakang bilah tindakan seperti ini:

res / values ​​/ themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme" parent="@style/Theme.Holo.Light.DarkActionBar">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
  <style name="MyActionBar" parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
       <item name="android:background">#ff0000</item>
  </style>
</resources>

Untuk Android 2.1 dan lebih tinggi

Saat menggunakan Pustaka Dukungan, file XML gaya Anda mungkin terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <!-- the theme applied to the application or activity -->
 <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
  </style>
 </resources>

Kemudian terapkan tema Anda ke seluruh aplikasi atau aktivitas individu Anda:

untuk lebih jelasnya Documentaion

Ketan Ahir
sumber
Ini aneh: Anda memberi Android 3.0 dan lebih tinggi gaya yang lebih lama (holo) daripada 2.1 dan lebih tinggi (Desain Material / Appcompat) ...
Roel
@DalvikVM Yeah..Appcompat adalah untuk versi yang lebih lama. tidak perlu menggunakannya untuk versi yang lebih tinggi. Pada saat desain bahan jawaban ini tidak diperkenalkan.
Ketan Ahir
Saya mendapatkan kesalahan: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.Mengubahnya untuk android:style/Widget.Holo.Light.ActionBar.Solid.Inversemenyelesaikan masalah. Terima kasih.
Annie Lagang
@ style / Theme.AppCompat.Light.DarkActionBar tidak dapat diselesaikan dalam kasus saya (Android Studio) - bukankah seharusnya @android: style / Theme.AppCompat.Light.DarkActionBar - yaitu dengan "android" yang ditambahkan sebelum gaya?
AgentKnopf
32

Anda dapat mengubah warna bilah tindakan dengan cara ini:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/green_action_bar</item>
</style>

Hanya itu yang Anda butuhkan untuk mengubah warna bilah tindakan.

Ditambah jika Anda ingin mengubah warna bilah status cukup tambahkan baris:

 <item name="android:colorPrimaryDark">@color/green_dark_action_bar</item>

Berikut adalah screenshot yang diambil dari situs android developer agar lebih jelas, dan berikut ini adalah a tautan untuk membaca lebih lanjut tentang menyesuaikan palet warna

masukkan deskripsi gambar di sini

Gjoko Bozinov
sumber
7

Kemungkinan pembuatan lainnya.

actionBar.setBackgroundDrawable (ColorDrawable baru (Color.parseColor ("# 0000ff")));

Levi Saturnino
sumber
5

Saya dapat mengubah warna teks ActionBar dengan menggunakan titleTextColor

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>
Yigit
sumber
4

Warna Kustom:

 <style name="AppTheme" parent="Theme.AppCompat.Light">

                <item name="colorPrimary">@color/ColorPrimary</item>
                <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
                <!-- Customize your theme here. -->
     </style>

Gaya Kustom:

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
        <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
        <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
    </style>

Untuk Lebih Banyak: Android ActionBar

Bulan sabit
sumber
3

Karena saya menggunakan AppCompatActivityjawaban di atas tidak berhasil untuk saya. Tetapi solusi di bawah ini berhasil:

Di res / styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
</style>


PS: Saya sudah menggunakan colorPrimarysebagai gantinyaandroid:colorPrimary

zackygaurav.dll
sumber
1

di style.xml tambahkan kode ini

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyAction</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#333333</item>
    </style>
</resources>
Milaaaad
sumber
0

Gunakan ini - http://jgilfelt.github.io/android-actionbarstylegenerator/

Alat yang bagus untuk menyesuaikan bilah tindakan Anda dengan pratinjau langsung dalam beberapa menit.

chanu
sumber
1
Meskipun tautan ini mungkin menjawab pertanyaan, lebih baik menyertakan bagian penting dari jawaban di sini dan menyediakan tautan untuk referensi. Jawaban link saja bisa menjadi tidak valid jika halaman tertaut berubah.
Roman Marusyk