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();
        }
    }
}

see this solution https://stackoverflow.com/a/27093330/4824088 may help — Mohamed Mohaideen AH, Nov 26 '17 at 07:36

score 3 · Answer 1 · answered Dec 10 '15 at 21:28

3

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.

answered Dec 10 '15 at 21:28

cstew

119
6

I have the styles file as it as you indicate, so it looks good in the preview of the IDE – Marlaurita Dec 10 '15 at 21:45
You may also need to manually set the status bar background color on your DrawerLayout with the `setStatusBarBackgroundColor` method. The response here lays it out nicely: http://stackoverflow.com/a/26440880/5664832 – cstew Dec 10 '15 at 22:14

score 1 · Answer 2 · answered Apr 20 '16 at 19:53

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.

score 0 · Answer 3 · answered Apr 26 '22 at 15:29

0

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

answered Apr 26 '22 at 15:29

Chetan Gaikwad

1,268
1
13
26

Mohamed ElSawaf · Answer 4 · 2017-11-26T06:29:39.930

-1

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

edited Nov 26 '17 at 06:29

answered Nov 25 '17 at 05:01

Mohamed ElSawaf

229
2
8

That should be a comment. – Samir Bhatt Nov 25 '17 at 05:20
maybe you are right, but I think he made everything at styles file so the android studio is showing the theme he wants but when running the app on any device the notification bar doesn't change, I had the same case and the solution was very simple like I did. – Mohamed ElSawaf Nov 26 '17 at 06:27

AppBarLayout Background

4 Answers4