Android Code Snippet Theme Colors

Discussion in 'Code Snippets' started by Erel, Dec 28, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

    Changing the action bar, status bar and navigation bar colors is done with resources set in the manifest editor.
    The following code is fully supported by Android 5+ devices but it will also work properly on Android 4 devices.

    [​IMG]

    The manifest code:
    Code:
    SetApplicationAttribute(android:theme, "@style/LightTheme")
    CreateResource(values, 
    colors.xml,
    <resources>
        <color name=
    "actionbar">#ff039be5</color>
       <color name=
    "statusbar">#ff006db3</color>
       <color name=
    "textColorPrimary">#ffffffff</color>
       <color name=
    "navigationBar">#ff006db3</color>
    </resources>
    )
    CreateResource(values-v20, theme.xml,
    <resources>
        <style name=
    "LightTheme" parent="@android:style/Theme.Material.Light">
            <item name=
    "android:colorPrimary">@color/actionbar</item>
            <item name=
    "android:colorPrimaryDark">@color/statusbar</item>
            <item name=
    "android:textColorPrimary">@color/textColorPrimary</item>
            <item name=
    "android:navigationBarColor">@color/navigationBar</item>
        </style>
    </resources>
    )
    CreateResource(values-v14, theme.xml,
    <resources>
        <style name=
    "LightTheme" parent="@android:style/Theme.Holo.Light">
           <item name=
    "android:actionBarStyle">@style/CustomActionBarStyle</item>
        </style>
       <style name=
    "CustomActionBarStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
           <item name=
    "android:background">@color/actionbar</item>
       </style>
    </resources>
    )
    The colors are set in the first resources block. You can use the built-in color picker to get the values. Just change 0x to #.

    The project is attached.
     

    Attached Files:

  2. Erel

    Erel Administrator Staff Member Licensed User

    If you want to further customize the action bar then you should use AppCompat with a toolbar.

    [​IMG]

    This requires a bit more configuration but provides many features not available with the standard action bar:

    1. Add to activity:
    Code:
    #Extends: android.support.v7.app.AppCompatActivity
    2. Add an ACToolBarLight custom view to the layout and check the "Use as main action bar" option.
    3. Manifest editor code:
    Code:
    SetApplicationAttribute(android:theme, "@style/MyAppTheme")
    CreateResource(values, 
    colors.xml,
    <resources>
        <color name=
    "actionbar">#ff039be5</color>
       <color name=
    "statusbar">#ff006db3</color>
       <color name=
    "textColorPrimary">#ffffffff</color>
       <color name=
    "navigationBar">#ff006db3</color>
    </resources>
    )
    CreateResource(values, theme.xml,
    <resources>
        <style name=
    "MyAppTheme" parent="Theme.AppCompat.Light">
            <item name=
    "colorPrimary">@color/actionbar</item>
            <item name=
    "colorPrimaryDark">@color/statusbar</item>
           <item name=
    "android:textColorPrimary">@color/textColorPrimary</item>
           <item name=
    "android:navigationBarColor">@color/navigationBar</item>
           <item name=
    "windowNoTitle">true</item>
           <item name=
    "windowActionBar">false</item>
           <item name=
    "windowActionModeOverlay">true</item>
        </style>
    </resources>
    )
    4. The toolbar color is set in the code:
    Code:
    ACToolBarLight1.Color = 0xff039be5
     

    Attached Files:

    Last edited: Dec 28, 2017
  3. Robcom69

    Robcom69 Member Licensed User

    Hi Erel,
    just a simple question about your first example. I have changed the manfest as suggested and I have action bar, status bar and navigation bar colors changed.
    Really wonderfull. But now I have a little problem, I have used the addmenuitem to add menu items in the bar...but the textcolor of the menu is white and the backgrund of the menu is white too, so i can't really see nothing..

    I have seen the option in the manifest that set the primary color to white....
    <color name="textColorPrimary">#ffffffff</color>
    .. so acting on this value I can switch to color ff000000 (black) for example, and it to solve my menu problem, but on the other side, the text on the bar becomes black too, so probably I need to act on another parameter that I can't actually find.

    Any suggestion?
    Thanks a lot
     
    Last edited: Oct 27, 2019
  4. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread in the questions forum and if possible upload a small project with the theme.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice