Android Transparent Status Bar and Actionbar

Transparent actionBar and statusBar in Android lollipop

You can change your toolbar color to transparent like this:

mToolbar.setBackgroundColor(getResources().getColor(android.R.color.transparent));

You can change it's background on the XML too:

android:background="@android:color/transparent"

Or if you're using ActionBar:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));

Use getActionBar() if you're not using ActionBarActivity

Result:

Sample Image

Android Completely transparent Status Bar?

All you need to do is set these properties in your theme:

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

Your activity / container layout you wish to have a transparent status bar needs this property set:

android:fitsSystemWindows="true"

It is generally not possible to perform this for sure on pre-kitkat, looks like you can do it but some strange code makes it so.

EDIT: I would recommend this lib: https://github.com/jgilfelt/SystemBarTint for lots of pre-lollipop status bar color control.

Well after much deliberation I've learned that the answer to totally disabling the translucency or any color placed on the status bar and navigation bar for lollipop is to set this flag on the window:

// In Activity's onCreate() for instance
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

No other theme-ing is necessary, it produces something like this:

Sample Image

Transparent status bar (with visible navigation bar)

Step 1: To make the status bar transparent: add the below into the style themes.xml or sytles.xml:

<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>

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

Step 2: Then in activity to make the status bar overlaps with the activity:

The used window flags are deprecated as of API level 30, so they can be used till API level 29:

if (Build.VERSION.SDK_INT in 21..29) { 
window.statusBarColor = Color.TRANSPARENT
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.decorView.systemUiVisibility =
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or SYSTEM_UI_FLAG_LAYOUT_STABLE

} else if (Build.VERSION.SDK_INT >= 30) {
window.statusBarColor = Color.TRANSPARENT
// Making status bar overlaps with the activity
WindowCompat.setDecorFitsSystemWindows(window, false)
}

UPDATE For API-30

This doesn't actually make the status bar transparent, it makes it translucent and will still have a shadow to it

This is right on API-30, and reason because setting <item name="android:windowTranslucentStatus">true</item>.

Actually the <item name="android:windowTranslucentStatus">true</item> is only required on API level 19. If your app is greater than that, you can dismiss it at all.

Anyways, the way to fix this is to override the themes.xml/styles.xml in API-30; i.e. to have a res\values-v30\themes.xml; you can just add the main app theme like:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.TransparentStatusBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
</style>
</resources>

UPDATE 2 For API-30

Just discovered a bug on API 30 that the bottom navigation overlaps with the activity obscuring the bottom part of it, that probably couldn't be discovered by the OP as they are using a map.

To solve this, As per documentation:

You can address overlaps by reacting to insets, which specify which
parts of the screen intersect with system UI such as the navigation
bar or the status bar. Intersecting can mean simply being displayed
above the content, but it can also inform your app about system
gestures, too.

So, we need to handle the System bars insets for API level 30+ to avoid your app overlapping with the navigation bar:

This requires the top root ViewGroup of the activity layout, and accordingly the LayoutParams need to be coasted appropriately.

Here I am using a ConstraintLayout as a root layout, and FrameLayout.LayoutParams:

/*
* Making the Navigation system bar not overlapping with the activity
*/
if (Build.VERSION.SDK_INT >= 30) {

// Root ViewGroup of my activity
val root = findViewById<ConstraintLayout>(R.id.root)

ViewCompat.setOnApplyWindowInsetsListener(root) { view, windowInsets ->

val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())

// Apply the insets as a margin to the view. Here the system is setting
// only the bottom, left, and right dimensions, but apply whichever insets are
// appropriate to your layout. You can also update the view padding
// if that's more appropriate.

view.layoutParams = (view.layoutParams as FrameLayout.LayoutParams).apply {
leftMargin = insets.left
bottomMargin = insets.bottom
rightMargin = insets.right
}

// Return CONSUMED if you don't want want the window insets to keep being
// passed down to descendant views.
WindowInsetsCompat.CONSUMED
}

}

This is tested on 8 devices/emulators on the range of API level 19 to API level 30.

Sample Image

Android transparent status bar and actionbar

I'm developing an app that needs to look similar in all devices with >= API14 when it comes to actionbar and statusbar customization. I've finally found a solution and since it took a bit of my time I'll share it to save some of yours.
We start by using an appcompat-21 dependency.

Transparent Actionbar:



values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">@null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
<item name="windowActionBarOverlay">false</item>
<item name="colorPrimary">@color/default_yellow</item>
</style>



values-v21/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
<item name="colorPrimaryDark">@color/bg_colorPrimaryDark</item>
<item name="colorPrimary">@color/default_yellow</item>
</style>

Now you can use these themes in your AndroidManifest.xml to specify which activities will have a transparent or colored ActionBar:

    <activity
android:name=".MyTransparentActionbarActivity"
android:theme="@style/AppTheme.ActionBar.Transparent"/>

<activity
android:name=".MyColoredActionbarActivity"
android:theme="@style/AppTheme.ActionBar"/>

Sample Image Sample Image
Sample Image Sample Image
Sample Image

Note: in API>=21 to get the Actionbar transparent you need to get the Statusbar transparent too, otherwise will not respect your colour styles and will stay light-grey.




Transparent Statusbar (only works with API>=19):


This one it's pretty simple just use the following code:

protected void setStatusBarTranslucent(boolean makeTranslucent) {
if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}

But you'll notice a funky result:
Sample Image

This happens because when the Statusbar is transparent the layout will use its height. To prevent this we just need to:

SOLUTION ONE:

Add this line android:fitsSystemWindows="true" in your layout view container of whatever you want to be placed bellow the Actionbar:

    ...
<LinearLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
...

SOLUTION TWO:

Add a few lines to our previous method:

protected void setStatusBarTranslucent(boolean makeTranslucent) {
View v = findViewById(R.id.bellow_actionbar);
if (v != null) {
int paddingTop = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ? MyScreenUtils.getStatusBarHeight(this) : 0;
TypedValue tv = new TypedValue();
getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true);
paddingTop += TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
v.setPadding(0, makeTranslucent ? paddingTop : 0, 0, 0);
}

if (makeTranslucent) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}

Where R.id.bellow_actionbar will be the layout container view id of whatever we want to be placed bellow the Actionbar:

...
<LinearLayout
android:id="@+id/bellow_actionbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
...

Sample Image

So this is it, it think I'm not forgetting something.
In this example I didn't use a Toolbar but I think it'll have the same result. This is how I customize my Actionbar:

@Override
protected void onCreate(Bundle savedInstanceState) {
View vg = getActionBarView();
getWindow().requestFeature(vg != null ? Window.FEATURE_ACTION_BAR : Window.FEATURE_NO_TITLE);

super.onCreate(savedInstanceState);
setContentView(getContentView());

if (vg != null) {
getSupportActionBar().setCustomView(vg, new ActionBar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayUseLogoEnabled(false);
}
setStatusBarTranslucent(true);
}

Note: this is an abstract class that extends ActionBarActivity

Hope it helps!

Transparent action bar and status bar like Uber

1. First, you have to change your layout structure to show MAP under transparent Toolbar & StatusBar and also to remove left and right gap from your existing Toolbar.

activity_main.xml:

<?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="false">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="24dp"
android:elevation="1dp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/sample_map">

<!-- put your content here -->

</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

2. In your MainActivity, do below things to initialize Toolbar and make Toolbar and StatusBar as transparent.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

// Toolbar :: Transparent
toolbar.setBackgroundColor(Color.TRANSPARENT);

setSupportActionBar(toolbar);
getSupportActionBar().setTitle("StackOverflow");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

// Status bar :: Transparent
Window window = this.getWindow();

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(Color.TRANSPARENT);
}

...........
..................
}

3. Apply below theme to your MainActivity.

values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
.......
...........

</style>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

AndroidManifest.xml:

<activity
android:name=".EmptyActivity"
android:theme="@style/AppTheme.NoActionBar">

</activity>

OUTPUT:

Sample Image

FYI, I have just used an sample image of map in my content LinearLayout to show the behavior. For your case put all of your content(searchbar, map) inside it.

Hope this will help~

Android Studio - How to have a transparent status bar?

You can check my answer on this post, as it seems like it is exactly what you are looking for.

Would hate to type it all here again but the answer from @Yunus might not work if all conditions are not met, mainly what the documentation for statusBarColor tells you.

The color for the status bar. If the color is not opaque, consider setting {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}. For this to take effect, the window must be drawing the system bar backgrounds with {@link android.R.attr#windowDrawsSystemBarBackgrounds} and the status bar must not have been requested to be translucent with {@link android.R.attr#windowTranslucentStatus}. Corresponds to {@link android.view.Window#setStatusBarColor(int)}.

Refer the answer for setting those required flags and style, also to keep navigation bar simply DO NOT add View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION flag in case you have it in some code.

Good Luck.

Android Status Bar transparent when using AppTheme.NoActionBar

Chances are, if you've come across this issue, you have a folder called values-v21 and in it a file called styles.xml. This file defines styling for devices using API 21+ (Android 5.0+). This file will also most likely contain the following style named AppTheme.NoActionBar. Sound familiar?

values-v21/styles.xml:

<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>

AppTheme.NoActionBar was defined in the values/styles.xml provided in the question, which is still valid, however that file is only used for devices under API 21. If you look at the code, you can immediately identify the issue just by seeing the word transparent towards the very end. A little to the left and we see statusBarColor and voila. That's the issue. If you do not which to provide this styling for more up-to-date users you can simply remove that line of styling.

values-v21/styles.xml:

<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>

And here's the result of that style removal:

Fixed result

Good ol' opaque status bar



Related Topics



Leave a reply



Submit