14

I am just starting to learn android, I am learning to add AppBar. But if I use Relative Layout as the root then Status Bar don't use the color "colorPrimaryDark" defined in the theme. But changing the layout to CoordinatorLayout make it works.

Can someone explain the difference? is it a requirement to use the CoordinatorLayout Layout?

Activity Extends AppCompatActivity.

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:context="com.example.ankit.designdemo.MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">

    </android.support.v7.widget.Toolbar>
</RelativeLayout>

enter image description here

<?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="com.example.ankit.designdemo.MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">

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

enter image description here

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


public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.custom_activity);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        actionBar.setDisplayHomeAsUpEnabled(true);


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }


}
Ankit
  • 1,867
  • 2
  • 21
  • 40
  • Can you show styles where you defined `colorPrimaryDark`? – hrskrs May 26 '16 at 07:58
  • @hrskrs Added to the question.. – Ankit May 26 '16 at 08:03
  • Are you sure your styles page is on `values-v21`? – hrskrs May 26 '16 at 08:08
  • Firstly you don't need the `CoordinatorLayout` in order to use `Toolbar`. The status bar should be colored with your `colorPrimaryDark` out of the box just because you inherit from `AppCompatActivity`, so I couldn't reproduce your problem is there any manipulation you are doing in your code? – Alex.F May 26 '16 at 08:31
  • @Alex.F, I just created new android project with Scrolling Activity, hadn't touched any code except main_activity.xml file.. It automatically got created with coordinate layout and was working fine.. As I was referring to some tutorial so used relative layout.. that's it.. Nothing else changed. – Ankit May 26 '16 at 09:24
  • @ironman I don't see any answer mate.. – Ankit May 26 '16 at 09:25
  • @hrskrs I am not sure what you mean but I do see 2 style files.. one under values and 1 values-21.. what I posted in question is values/style.xml ,, as I understand that 21 variation should run only on api level 21.. but emulator I am testing is on 23.. – Ankit May 26 '16 at 09:28

3 Answers3

32

In v21/styles.xml you probably have this line of code:

  <item name="android:statusBarColor">@android:color/transparent</item>

And as you are running on API 23, the declared styles are overrided from the ones in v21/styles.xml.

As a solution:

Just remove that line and it will work fine

hrskrs
  • 4,447
  • 5
  • 38
  • 52
  • spot on, My problem is solved and as I am learning, can you please add clarification about override.. I was under impression that v21/styles.xml will come to use only on API 23.. Also why things were working with CoordinatorLayout that will a good addition as well – Ankit May 26 '16 at 10:31
  • 1
    @Ankit About styles you can read [here](https://developer.android.com/guide/topics/ui/themes.html) on how they work based on platform. About `CoordinatorLayout`: it works because of `android:fitsSystemWindows="true"`, if you remove it it will show you same behaviour. – hrskrs May 26 '16 at 10:45
  • 1
    I see now.. so v21/styles.xml is going to run when API 21 or above.. Thanks for helping.. – Ankit May 26 '16 at 10:58
  • @Ankit yeap, declared styles will be taken from `v21/styles.xml`, non-declared ones but declared on `styles.xml`, it will be taken from `styles.xml` – hrskrs May 26 '16 at 11:01
2

The styling of the statusbar is done by the

android:fitsSystemWindows

tag. This is currently not supported for RelativeLayout. Either you try another layout like FrameLayout which could work but for know i would suggest to stick to the CoordinatorLayout.

Maybe you get some more details here: https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec

and_dev
  • 3,723
  • 1
  • 20
  • 28
0

just add this

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
Mycoola
  • 1,135
  • 1
  • 8
  • 29