Setting Android Toolbar Background and Text Colors in Android Studio 1.4.1

Anas picture Anas · Nov 11, 2015 · Viewed 42.3k times · Source

I'm trying to change activity action bar's background color and title color, i tried official tutorial and some answers from here but none worked for me , i'm missing something.

styles.xml

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

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

styles.xml (v21)

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

MainActivity :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

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

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Answer

Anas picture Anas · Nov 11, 2015

So, if like me you are using Android Studio 1.4.1 and you are new to android programming, setting title and background colors can be done as follow :

Background:(check colors.xml with this generated code for BlanckActivity)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color><!--Background color for AppBar-->
    <color name="colorPrimaryDark">#303F9F</color><!--i ignore its use-->
    <color name="colorAccent">#FF4081</color><!--color effects, EditText, RadioButtons...-->
</resources>

Title,Subtitle and popup menu and its items (check "styles.xml") :

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">TITLE_COLOR_GOES_HERE</item>
        <item name="android:textColorSecondary">SUBTITLE_COLOR_GOES_HERE</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">MENU_POPUP_BACK_COLOR</item>
        <item name="android:textColor">@color/MENU_POPUP_ITEMS_COLOR</item>
</style>

Main Colors for an Activity

I hope this can help someone who like me is confused in first steps provided with official android tutorials.