AppBarLayout Background

Question

I want to do this,

In the preview of Android Studio looks good but in runtime I get this

As you can see at begin of the screen the color is white, I want to put my own color, in this case green.

Originally its used Cordinator layout but I need to use Drawer Layout for purposes of the menu

Here my XML

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout 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:orientation="vertical"
        android:fitsSystemWindows="true"
        android:background="@drawable/bg_app"
        tools:context=".ui.home.HomeActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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="@color/green_tataki"
                app:popupTheme="@style/AppTheme.PopupOverlay">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_user"
                    android:background="@color/green_tataki"
                    android:layout_marginRight="5dp"/>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right">
                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/menu_icon"
                        android:padding="20dp"
                        android:src="@drawable/ic_menu"
                        android:background="@color/green_tataki"/>
                </LinearLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.AppBarLayout>
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:divider="@color/white"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="right"
        android:choiceMode="singleChoice"
        android:dividerHeight="1dp"
        android:background="@color/brown_tataki"
        android:id="@+id/left_drawer"/>
</android.support.v4.widget.DrawerLayout>

And here is the code

    public class HomeActivity extends AppCompatActivity {
    public static final String TAG = "HomeActivity";
    //==============Menu Variables=====================
    private ListView listViewItems;
    private ArrayList<MenuBean> arrayOptionMenu;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        ImageButton iconMenu = (ImageButton) findViewById(R.id.menu_icon);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.END)) {
            drawer.closeDrawer(GravityCompat.END);
        } else {
            super.onBackPressed();
        }
    }
}

Answer 1

The typical way of coloring the status bar is to set the colorPrimaryDark attribute on your theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="colorPrimaryDark">@color/green_tataki</item>
</style>

Also, I'd recommend still using a CoordinatorLayout. You may be able to replace your RelativeLayout with a CoordinatorLayout in the code you provided.

Answer 2

There is a lot of confusing information out there regarding coloring the AppBar and StatusBar and how they work with the CoordinatorLayout. As a rule I would recommend keeping things as simple as possible rather than try to mash together multiple solutions.

In your case you should replace the RelativeLayout with a CoordinatorLayout as you had originally.

As cstew mentions above, the default color for the status bar will be the colorPrimaryDark in your main theme. The recommendation for this color is a complimentary darker version of your colorPrimary (which is used for the ToolBar).

In your v21/styles.xml use the following settings:

<style name="Theme.MyApp" parent="Base.Theme.MyApp">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Finally you should remove the

android:fitsSystemWindows="true"

from the CoordinatorLayout. This will prevent the layout from filling the entire viewspace (it should start just after the StatusBar). With no content under it the status bar should default to your colorPrimaryDark.

A reason that all may appear good on an emulator but not on a real device could be because the real device you are testing with is below v21. The ability to color the status bar is not available before then.

Due to some bugs in the early releases of the design library I'd also recommend using the latest version you can which at the time of writing is 'com.android.support:design:23.3.0'.

For more details you should check out the sample app by Chris Banes on github: https://github.com/chrisbanes/cheesesquare. The main activity in this sample appears to map very closely to your own requirements.

Answer 3

toolbar.setBackgroundColor(resources.getColor(R.color.toolbar_background))

Answer 4

I think you add all colors you want to style file so the android studio is showing the right theme but when you running the app on any device the notification bar doesn't change if that your case then the solution very simple. check the targetSdkVersion value on app gradle file if the value < 21 you should change it to 21