Change Color of AppBar

android android-layout android-studio android-styles

16,943

Solution 1

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

Solution 2

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

16,943

Author by

Tech Labs

Updated on June 08, 2022

Comments

Tech Labs almost 2 years

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>