How to set status bar background as gradient color or a drawable in Android?

Question

I want to set status bar background as gradient theme also status bar and action bar color should same gradient drawable, as per documentation we can set color to status bar in API level 21 and above by using

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

But I am searching something like

<item name="android:statusBarDrawable">@drawable/myDrawable</item>

I have seen example that use

<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">false</item>

But in that case status bar and action bar overlap (use fitSystemWindow=true but still not solved) also try with https://github.com/jgilfelt/SystemBarTint this library but still no luck.

Sushant Gosavi · Accepted Answer · 2022-02-11T20:58:25.150

97

For some one who want to set gradient color to status bar background you can use following method in your activity before setContentView()

For Java

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public static void setStatusBarGradiant(Activity activity) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        Window window = activity.getWindow();
        Drawable background = activity.getResources().getDrawable(R.drawable.gradient_theme);
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        
        window.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent));
        window.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent));
        window.setBackgroundDrawable(background);
    }
}

For Kotlin

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
fun setStatusBarGradiant(activity: Activity) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        val window: Window = activity.window
        val background =ContextCompat.getDrawable(activity, R.drawable.gradient_theme)
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        
        window.statusBarColor = ContextCompat.getColor(activity,android.R.color.transparent)
        window.navigationBarColor = ContextCompat.getColor(activity,android.R.color.transparent)
        window.setBackgroundDrawable(background)
    }
}

Thanks every one for your help

EDIT

If the above code don't work, try to add this in your styles.xml:

<style name="AppTheme.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

If you want to override status bar with your view then use window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

edited Feb 11 '22 at 20:58

answered Apr 14 '17 at 05:06

Sushant Gosavi

3,647
3
35
55

2

This answer is not working. Is there any thing else we need to do in style for getting gradient effect in status bar? – Vivek Barai Nov 20 '17 at 06:22
show me what you have did !! May be check your device version code if it is below Build.VERSION_CODES.LOLLIPOP means 21 or below 21 if yes than this feature is not work with that device – Sushant Gosavi Nov 20 '17 at 09:30
i did implement your code as you said @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setStatusBarGradiant(this); setContentView(R.layout.activity_detail); } – Vivek Barai Nov 20 '17 at 10:17
so what is issue means any error or just not working – Sushant Gosavi Nov 22 '17 at 09:40
@VívêkBåräì can you tell me the way you found? I'm not able to use this. It doesn't work for me. – Arda Çebi Jan 31 '18 at 22:49
@ArdaÇebi i have posted answer you may check – Vivek Barai Feb 01 '18 at 06:11
@VívêkBåräì Thanks! – Arda Çebi Feb 01 '18 at 10:54
don't know why its not working for both of u ? did you check on LOLLIPOP and above ?? It should work this is the real screenshot of my app – Sushant Gosavi Feb 01 '18 at 11:39
work here, but only after add on styles.xml the following code: – Guilherme Ramos Feb 19 '18 at 03:08
3

did you call above method before setContentView method of the activity ? show us your code @VindhyaPratapSingh – Sushant Gosavi Feb 01 '19 at 13:12
2

Not Working, in api 29 – Muhammed Aydogan Nov 22 '20 at 18:36
This works, just adding that this also sets your navigation bar to the gradient, while the OP asked only for status bar. Comment out the line if you dont want that – mathematics-and-caffeine Jul 16 '22 at 09:10

score 11 · Answer 2 · answered Jan 31 '18 at 18:33

an extension to the sushant's answer since getColor is deprecated and in kotlin language.

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
fun backGroundColor() {
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.statusBarColor = ContextCompat.getColor(this, android.R.color.transparent)
    window.navigationBarColor = ContextCompat.getColor(this, android.R.color.transparent)
    window.setBackgroundDrawableResource(R.drawable.ic_drawable_vertical_background)
}

The idea is to make transparent status bar and setting a background to the whole window which will also cover the status bar in the same background.

Kartik Garasia · Answer 3 · 2019-01-10T06:10:54.527

Here how you do it without any Java code,

Gradient drawable file drawable/bg_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#11998e"
        android:endColor="#38ef7d" />
</shape>

add this in your values/style.xml

<item name="android:windowBackground">@drawable/bg_toolbar</item>
<item name="toolbarStyle">@style/Widget.Toolbar</item>
<item name="android:statusBarColor">#00000000</item>

make a new file for your toolbar Gradient values/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Widget.Toolbar" parent="@style/Widget.AppCompat.Toolbar">
        <item name="contentInsetStart">0dp</item>
        <item name="android:background">@drawable/bg_toolbar</item>
    </style>
</resources>

Edit: Add background android:background="#ffffff" in your Activity Layout file.

score 8 · Answer 4 · answered Nov 22 '20 at 11:39

Add this code in onCreate

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
android.graphics.drawable.Drawable background = MainActivity.this.getResources().getDrawable(R.drawable.status);
getWindow().setBackgroundDrawable(background);

Now add a file with name status in drawable folder and put this code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item><!-- Edit hex colors as you like -->
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:endColor="#806AF8"
android:startColor="#F16EB5" />
</shape></item></layer-list>

just use the below line to get drawable. ContextCompat.getDrawable(this, R.drawable.status_bar_gradient) — Gunavant Patel, Mar 11 '21 at 10:08

score 4 · Answer 5 · edited Nov 28 '22 at 11:49

the answer of @sushant gosavi is right but it does not work on DrawerLayout unless you do the following in DrawerLayout.

<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_navigation"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_navigation"
        app:menu="@menu/activity_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

You must change to false android:fitsSystemWindows="false" in DrawerLayout and set it to true in the childs

score 2 · Answer 6 · edited Dec 02 '18 at 20:32

2

Adding the following two lines helped me:

window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

edited Dec 02 '18 at 20:32

rene

41,474
78
114
152

answered Dec 02 '18 at 20:22

Miramax Mars

147
2
3

This is for sending toolbar up (under the status bar ) – Hamed Jaliliani Dec 04 '18 at 09:28
@HamedJaliliani so how can I add a gradient background color to statusbar without removing the navigation bar ? – Navid Abutorab Dec 19 '19 at 06:08

score 1 · Answer 7 · answered Feb 01 '18 at 06:10

Step1: Create a status bar class like below

public class StatusBarView extends View
{
    private int mStatusBarHeight;

    public StatusBarView(Context context)
    {
        this(context, null);

    }

    public StatusBarView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        if( Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            setSystemUiVisibility(SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }
    }

    @Override
    public WindowInsets onApplyWindowInsets(WindowInsets insets)
    {
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            mStatusBarHeight = insets.getSystemWindowInsetTop();
            return insets.consumeSystemWindowInsets();
        }
        return insets;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),mStatusBarHeight);
    }
}

Step2: create a drawable gradient like below

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="135"
        android:endColor="#F34D80"

        android:startColor="#FF5858"/><!--android:centerColor="#C12389"-->
</shape>

Step3: create a layout like below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <YOURPACKAGENAME.StatusBarView
        android:id="@+id/status_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/toolbar_bg_gradient"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@drawable/toolbar_bg_gradient"
        android:elevation="0dp"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetStartWithNavigation="0dp"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:subtitleTextColor="@android:color/white"
        app:theme="@style/AppTheme.AppBarOverlay"
        app:titleTextColor="@android:color/white" />
</LinearLayout>

Step4: create a style for activity

<style name="AppTheme.NoActionBarMain" parent="Base.Theme.AppCompat.Light">
        <item name="windowActionBar">false</item>
        <item name="android:windowDisablePreview">true</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowEnableSplitTouch">false</item>
        <item name="android:splitMotionEvents">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
        <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
        <item name="android:colorForeground">@color/foreground_material_light</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeStyle">@style/LywActionMode</item>
    </style>

<style name="LywActionMode" parent="Base.Widget.AppCompat.ActionMode">
        <item name="background">@color/colorPrimary</item>
        <item name="backgroundSplit">@color/colorPrimary</item>
    </style>

Should I create the class (step 1) as a separate file or copy that code to my Activity's class? — Arda Çebi, Feb 01 '18 at 11:16
Should I do the same [create a new .xml file (layout)] or copy that code to my activity_main.xml file? (Step 3) — Arda Çebi, Feb 01 '18 at 19:49
@ArdaÇebi You should copy that code there and its a example you can make changes as per requirements — Vivek Barai, Feb 02 '18 at 06:39
Really, doesn't work. I've been trying different places and different forms to insert the code (after finding the real place of course just to make sure I can fix it). — Arda Çebi, Feb 02 '18 at 12:56
code i gave you is completely working you can first create example of it. — Vivek Barai, Feb 02 '18 at 13:10
@style/AppTheme.AppBarOverlay @style/AppTheme.PopupOverlay not found — avez raj, Nov 29 '19 at 08:47

Suhail Kawsara · Answer 8 · 2018-07-18T01:32:56.270

I used the answer on this link here. and if you want to show action bar I added next code make it transparent background

final ActionBar ab = getSupportActionBar();
    if (ab != null) {
        Drawable gradientBG = getResources().getDrawable( R.drawable.bg_transperant);
        ab.setBackgroundDrawable(gradientBG);
    }

and then in bg_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid android:color="@android:color/transparent" />
</shape>

score 0 · Answer 9 · answered Apr 06 '19 at 19:13

I solved it like this

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/backfull</item>
    <item name="android:windowActionBar">false</item>

    <item name="android:windowActionModeOverlay">true</item>
    <item name="windowActionModeOverlay">true</item>

</style>

<style name="AppTheme2" parent="AppTheme.Base">
    <item name="colorPrimary">@drawable/backfull</item>
    <item name="colorPrimaryDark">@android:color/white</item>>
    <item name="colorAccent">@android:color/black</item>
    <item name="colorButtonNormal">@android:color/white</item>
</style>

<style name="ToolbarTheme" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">@drawable/backfull</item>
    <item name="background">@android:color/black</item>
    <item name="titleTextAppearance">@style/ToolbarTitleTheme</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="ToolbarTitleTheme">
    <item name="android:textColor">@android:color/holo_red_dark</item>
    <item name="android:textStyle">bold</item>
</style>

score 0 · Answer 10 · answered May 29 '19 at 05:51

the answer provided by sushant goswami is actually working fine, after wasting one day finally realized that the status bar color and the gradient start color both were same in my case,after changing gradient color to some color other than default status bar color it was working well

score 0 · Answer 11 · answered Nov 11 '21 at 23:14

Kotlin version. Based on sushant gosavi's answer

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
fun setBackgroundDrawableResource(window: Window, @DrawableRes drawableRes: Int) {
    val context = window.context
    val backgroundDrawable = ContextCompat.getDrawable(context, drawableRes) ?: return
    val transparentColor = ContextCompat.getColor(context, android.R.color.transparent)
    window.apply {
        addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        statusBarColor = transparentColor
        setBackgroundDrawable(backgroundDrawable)
    }
}

How to set status bar background as gradient color or a drawable in Android?

11 Answers11

Linked

Related