วิธีตั้งค่าสี / สไตล์ ActionBar แบบกำหนดเอง

ฉันใช้Android Navigation barในโปรเจ็กต์ของฉันฉันต้องการเปลี่ยนสีด้านบนในแถบการทำงานเป็นสีแดงฉันจะทำอย่างไร ฉันมีบางอย่างเช่นนี้

และฉันต้องการอะไรแบบนี้

ฉันจะบรรลุเป้าหมายนั้นได้อย่างไร

คุณสามารถกำหนดสีของ ActionBar (และสิ่งอื่น ๆ ) ได้โดยสร้างสไตล์ที่กำหนดเอง :

เพียงแก้ไขไฟล์res / values ​​/ styles.xmlของโครงการ Android ของคุณ

ตัวอย่างเช่นนี้:

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

จากนั้นตั้งค่า "MyCustomTheme" เป็น Theme ของกิจกรรมของคุณที่มี ActionBar

คุณยังสามารถกำหนดสีให้กับ ActionBar ได้เช่นนี้:

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

นำมาจากที่นี่: ฉันจะเปลี่ยนสีพื้นหลังของ ActionBar ของ ActionBarActivity โดยใช้ XML ได้อย่างไร

โดยทั่วไประบบปฏิบัติการ Android ใช้ประโยชน์จาก "ธีม" เพื่อให้นักพัฒนาแอปสามารถใช้ชุดพารามิเตอร์รูปแบบองค์ประกอบ UI แบบสากลกับแอปพลิเคชัน Android โดยรวมหรือใช้กับคลาสย่อยกิจกรรมเดียว

ดังนั้นจึงมี "ธีมระบบ" ของระบบปฏิบัติการ Android หลักสามแบบซึ่งคุณสามารถระบุได้ในไฟล์ XML Manifest ของ Android เมื่อคุณกำลังพัฒนาแอปสำหรับเวอร์ชัน 3.0 และเวอร์ชันที่ใหม่กว่า

ฉันอ้างถึงไลบรารีสนับสนุน (APPCOMPAT) ที่นี่: - ดังนั้นสามธีมคือ 1. AppCompat Light Theme (Theme.AppCompat.Light)

2. AppCompat Dark Theme (Theme.AppCompat),

3. และลูกผสมระหว่างสองอย่างนี้คือ AppCompat Light Theme กับ Darker ActionBar (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml และดูแท็กชุดรูปแบบ Android จะกล่าวถึง: - android: theme = "@ style / AppTheme"

เปิด Styles.xml และเรามีธีมแอปพลิเคชันพื้นฐานที่ประกาศไว้ที่นั่น: -

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

เราจำเป็นต้องลบล้างองค์ประกอบธีมหลักเหล่านี้เพื่อจัดรูปแบบแถบการทำงาน

ActionBar ที่มีพื้นหลังสีต่างกัน: -

ในการดำเนินการนี้เราจำเป็นต้องสร้าง MyActionBar สไตล์ใหม่ (คุณสามารถตั้งชื่ออะไรก็ได้) โดยมีการอ้างอิงระดับบนไปที่@ style / Widget.AppCompat.Light.ActionBar.Solid ตรงกันข้าม ที่มีลักษณะสไตล์สำหรับองค์ประกอบ Android ActionBar UI คำจำกัดความก็จะเป็น

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

และคำจำกัดความนี้เราจำเป็นต้องอ้างอิงใน AppTheme ของเราโดยชี้ไปที่สไตล์ ActionBar ที่ถูกแทนที่ด้วย -

@ style / MyActionBar

เปลี่ยนสีข้อความของแถบหัวเรื่อง (เช่นดำเป็นขาว): -

ตอนนี้ในการเปลี่ยนสีข้อความหัวเรื่องเราจำเป็นต้องแทนที่ parent reference parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

ดังนั้นคำจำกัดความของสไตล์จะเป็น

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

เราจะอ้างอิงนิยามสไตล์นี้ภายในนิยามสไตล์MyActionBarเนื่องจากการปรับเปลี่ยน TitleTextStyle เป็นองค์ประกอบลูกขององค์ประกอบ UI ของระบบปฏิบัติการหลักของ ActionBar ดังนั้นคำจำกัดความสุดท้ายขององค์ประกอบสไตล์ MyActionBar จะเป็น

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

ดังนั้นนี่คือ Styles.xml สุดท้าย

<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 เพิ่มเติมสไตล์เมนูโปรดดูที่ลิงค์นี้

สำหรับ Android 3.0 ขึ้นไปเท่านั้น

เมื่อรองรับ Android 3.0 ขึ้นไปเท่านั้นคุณสามารถกำหนดพื้นหลังของแถบการทำงานได้ดังนี้:

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>

สำหรับ Android 2.1 และสูงกว่า

เมื่อใช้ไลบรารีการสนับสนุนไฟล์ XML สไตล์ของคุณอาจมีลักษณะดังนี้:

<?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>

จากนั้นใช้ธีมของคุณกับทั้งแอพหรือกิจกรรมแต่ละอย่าง:

สำหรับรายละเอียดเพิ่มเติมDocumentaion

คุณสามารถเปลี่ยนสีของแถบการกระทำได้ด้วยวิธีนี้:

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

นั่นคือทั้งหมดที่คุณต้องการสำหรับการเปลี่ยนสีของแถบการกระทำ

นอกจากนี้หากคุณต้องการเปลี่ยนสีของแถบสถานะเพียงแค่เพิ่มบรรทัด:

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

นี่คือภาพหน้าจอที่นำมาจากไซต์ Android ของนักพัฒนาเพื่อให้ชัดเจนยิ่งขึ้นและนี่คือลิงค์เพื่ออ่านเพิ่มเติมเกี่ยวกับการปรับแต่งจานสี

ความเป็นไปได้ในการทำ

actionBar.setBackgroundDrawable (ColorDrawable ใหม่ (Color.parseColor ("# 0000ff")));

ฉันสามารถเปลี่ยนสีข้อความ ActionBar ได้โดยใช้ titleTextColor

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

สีที่กำหนดเอง:

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

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

สไตล์ที่กำหนดเอง:

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

สำหรับเพิ่มเติม: Android ActionBar

เนื่องจากฉันใช้AppCompatActivityคำตอบข้างต้นไม่ได้ผลสำหรับฉัน แต่วิธีแก้ปัญหาด้านล่างใช้งานได้:

ใน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: ฉันเคยใช้colorPrimaryแทนandroid:colorPrimary

ใน style.xml เพิ่มรหัสนี้

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

ใช้สิ่งนี้ - http://jgilfelt.github.io/android-actionbarstylegenerator/

เครื่องมือที่ดีในการปรับแต่งแถบการทำงานของคุณด้วยการแสดงตัวอย่างแบบสดในไม่กี่นาที