Change Color of AppBar

Question

I am trying to understand, what is the difference between Toolbar, Appbar, ActionBar. And i am trying to change the color of my AppBar or whatever it is to red.

Someone mention try changing the theme. I tried but don't know the difference and i am also new to android programming. So if you could help me out. Here is the styles.xml file code

<!-- Base application theme. -->
<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>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <item name="android:titleTextStyle">@style/MyTextTitle</item>
</style>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:titleTextStyle">@style/MyTextTitle</item>

</style>

<style name="MyTextTitle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@color/red</item>
</style>

I hope you understand what i am trying to say. And forgive me for my ignorance as i am keen to learn it so can't just wait.

Tool bar is a replacement for actionbar ,Tool bar is more customizable — Manohar, Dec 29 '16 at 12:01
@Redman And what is appbar? And how can I change the text color of toolbar? If you could help me. — Tech Labs, Dec 29 '16 at 12:14
The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions. — Charuක, Dec 29 '16 at 12:16
https://developer.android.com/training/appbar/index.html , see this appbar is also known as action bar — Manohar, Dec 29 '16 at 12:16
how can I change the text color of toolbar? --> while designing toolbar when you keep textview in it , make its textcolor to what ever colour you want — Manohar, Dec 29 '16 at 12:18

score 7 · Accepted Answer · edited May 23 '17 at 12:25

Quoting developer.android.com

The app bar, also known as the action bar, is one of the most important design elements in your app's activities....

and from material.io

The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions

again from developer.android.com

A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.

If this is not clear you need to clear theese two words first generalization vs specialization according to our topic Toolbar supports a more focused feature set than ActionBar.

Further from blog.xamarin.com

You can think of the Toolbar as the Action Bar’s bigger sibling that has grown up and is free to roam around the house by itself.

Let's clear things above mentioned

I have made a navigationDrawerActivity which i can easily create and did some change for you to clear the mess.

I change color of the AppBarLayout Removed the toolbar from it's position and set in inside content_main.xml because if both stand in the same spot you might not get the idea!

See you can place it anywhere!

If you want to change the color of AppBarLayout add this inside it android:background="@color/your_color"

Now if you read above quotes you know which one is toolbar

This is my action_bar_main.xml (i removed toolbar from this and set it inside content_main.xml)

Now you asked to change the text color of toolbar

If you want you can set your own design layout for that then include it.

<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" >
            <include layout="@layout/toolbar_inflater" />
        </android.support.v7.widget.Toolbar>

If you only want to change the background color change it's background

   <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/green"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

See i have inflated a layout as i need.There you can add your views as your preference.

or if you want to change the text in tool bar using code

 CharSequence title = "Your App Name";
        SpannableString s = new SpannableString(title);
        s.setSpan(new ForegroundColorSpan(Color.RED), 0, title.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        getSupportActionBar().setTitle(s);

or even you can do it by changing the textcolor of it's theme. Read www.murrayc.com post and this and this so posts

Side Note : Setting Up the App Bar

If you go the developer.android.com it says,

Beginning with Android 3.0 (API level 11), all activities that use the default theme have an ActionBar as an app bar. However, app bar features have gradually been added to the native ActionBar over various Android releases. As a result, the native ActionBar behaves differently depending on what version of the Android system a device may be using. By contrast, the most recent features are added to the support library's version of Toolbar, and they are available on any device that can use the support library.

For this reason, you should use the support library's Toolbar class to implement your activities' app bars. Using the support library's toolbar helps ensure that your app will have consistent behavior across the widest range of devices. For example, the Toolbar widget provides a material design experience on devices running Android 2.1 (API level 7) or later, but the native action bar doesn't support material design unless the device is running Android 5.0 (API level 21) or later

Below above description there is a main sub topic Add a Toolbar to an Activity which strongly force you to use tool bar by developer.android.com

So Bye bye App Bar say Hi to Toolbar

@Mahrukh Raza you are welcome you can up vote if it helps you ;) — Charuක, Dec 30 '16 at 15:01

score 1 · Answer 2 · answered Dec 29 '16 at 12:39

try this in your app theme :

<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>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>

hope his helps you out

score 0 · Answer 3 · answered Dec 29 '16 at 12:59

0

Try This,<color name="colorPrimary">#0b0b0c</color> <color name="colorPrimaryDark">#0b0b0c</color> <color name="colorAccent">#FF4081</color> Whatever color to change in hexadecimal code.then see ur app changes made it.

answered Dec 29 '16 at 12:59

Nandha Krishnan

1

score 0 · Answer 4 · answered Feb 19 '18 at 23:40

You can change color using setBackgroundColor method of Appbar. if you have tab bar in that you can set OnTabSelectedListener like this

tabs.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
        override fun onTabReselected(tab: TabLayout.Tab?) {
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
        }

        override fun onTabSelected(tab: TabLayout.Tab) {
            when(tab.position){
                0->app_bar.setBackgroundColor(Color.parseColor("#FF0000"))
                1->app_bar.setBackgroundColor(Color.parseColor("#4286f4"))
                2->app_bar.setBackgroundColor(Color.parseColor("#f2ff00"))
            }
        }

    } )

Change Color of AppBar

4 Answers4

Linked