'Android status bar is the same color as Toolbar
I am running an android project. My toolbar and status bar are all green in my activity_main layout. If i change toolbar color to other color the status bar will change to the new one too.
I have an activity with activity_hotel_detail.xml layout. The status bar and toolbar colors are different color which is i need.
Why does the same configuration for Toolbar makes the status bar color are different?
How can i make my main_activity layout is the same one as my activity_hotel_detail layout?
I am new on android, any help thanks!
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".ViewController.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/red"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
style="@style/ThemeOverlay.AppCompat.Dark"/>
</RelativeLayout>
activity_hotel_detail.xml
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/Blue"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
style="@style/ThemeOverlay.AppCompat.Light"/>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fillViewport="true"
android:background="@color/cell">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/white"
android:padding="0dp"
android:stretchColumns="1">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="@string/img_description"
fresco:placeholderImage="@drawable/test_image"
fresco:actualImageScaleType="fitStart"
android:id="@+id/hotel_image_view" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/hotel_name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="New Text New Text New Text New TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew Text"
android:id="@+id/hotel_description"/>
<fragment
class="com.example.william.willhotel.ViewController.HotelDetailFragment"
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="@+id/fragement">
</fragment>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back"
android:background="@color/BlueViolet"
android:id="@+id/back_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next"
android:background="@color/DarkRed"
android:id="@+id/next_button" />
</LinearLayout>
</ScrollView>
EDIT: styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/DarkRed</item>
<item name="colorPrimaryDark">@color/IndianRed</item>
<item name="colorAccent">@color/yellow</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" />
<style name="AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml(v21)
<resources>
<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>
</resources>
EDIT2 replace 'transparent1 by @color/IndianRed in styles.xml(v21) didn't work.
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/IndianRed</item>
</style>
</resources>
EDIT
my activity extend from AppCompatActivity, i see the source code only sdk version larger than 23 can get the system theme.
public class MainActivity extends AppCompatActivity
So if i run under sdk 23, the status bar appears correct as expect.
if (delegate.applyDayNight() && mThemeId != 0) {
// If DayNight has been applied, we need to re-apply the theme for
// the changes to take effect. On API 23+, we should bypass
// setTheme(), which will no-op if the theme ID is identical to the
// current theme ID.
if (Build.VERSION.SDK_INT >= 23) {
onApplyThemeResource(getTheme(), mThemeId, false);
} else {
setTheme(mThemeId);
}
}
Solution 1:[1]
Use following code in your activity's onCreate() method
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.primary_dark));
}
Where primary_dark color is your toolbar's color
Solution 2:[2]
Add this in your
values-v21/styles.xml.
<item name="android:statusBarColor">@color/IndianRed</item>
Your theme should Look like this remove
Transparent.
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/IndianRed</item>
</style>
Solution 3:[3]
This may help you.
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
Reference: https://developer.android.com/training/material/theme.html#StatusBar
Note: as per the google doc"the toolbar uses the 500 version of indigo, while the status bar uses the 700 version." Doc Link: https://www.google.com/design/spec/style/color.html#color-color-schemes
Solution 4:[4]
<item name="android:windowBackground">@color/cardview_dark_background</item>
<item name="android:statusBarColor">@color/cardview_dark_background</item>
it works for me if you have multiple theme
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Krishna Meena |
| Solution 2 | Jay Rathod RJ |
| Solution 3 | Naveen Shriyan |
| Solution 4 | EKREM YİĞİT |