Dowemo
0 0 0 0


Question:

I am using Android Navigation bar in my project, I want to change the top color in action bar to something red, How can i do that? I have something like this,

top black

and i want something like this,

top red

how can i achieve that?


Best Answer:


In general Android OS leverages a “theme” to allow app developers to globally apply a universal set of UI element styling parameters to Android applications as a whole, or, alternatively, to a single Activity subclass.

So there are three mainstream Android OS “system themes,” which you can specify in your Android Manifest XML file when you are developing apps for Version 3.0 and later versions

I am referring the (APPCOMPAT)support library here:-- So the three themes are 1. AppCompat Light Theme (Theme.AppCompat.Light)

enter image description here

  • AppCompat Dark Theme(Theme.AppCompat),
  • enter image description here

  • And a hybrid between these two ,AppCompat Light Theme with the Darker ActionBar.( Theme.AppCompat.Light.DarkActionBar)
  • AndroidManifest.xml and see the tag, the android theme is mentioned as:-- android:theme="@style/AppTheme"

    Open the Styles.xml and we have base application theme declared there:--

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

    We need to override these parent theme elements to style the action bar.

    ActionBar with different color background:--

    To do this we need to create a new style MyActionBar(you can give any name) with a parent reference to @style/Widget.AppCompat.Light.ActionBar.Solid.Inverse that holds the style characteristics for the Android ActionBar UI element. So definition would be

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

    And this definition we need to reference in our AppTheme, pointing to overridden ActionBar styling as--

    @style/MyActionBar ActionBar with pink background color

    Change the title bar text color (e.g black to white):--

    Now to change the title text color, we need to override the parent reference parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

    So the style definition would be

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

    We’ll reference this style definition inside the MyActionBar style definition, since the TitleTextStyle modification is a child element of an ActionBar parent OS UI element. So the final definition of MyActionBar style element will be

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

    SO this is the final 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 With white title color For further ActionBar options Menu styling, refer this link




    Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs