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:
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:
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.
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"/>
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:
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>
...
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:
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:
Good ol' opaque status bar
Related Topics
Android - Android.View.Inflateexception: Binary Xml File Line #8: Error Inflating Class Fragment
How to Send String from One Activity to Another
Set Icon For Android Application
How to Display a List View in an Android Alert Dialog
How to Get the Width and Height of an Android.Widget.Imageview
Android Spinner: Get the Selected Item Change Event
How to Delete an Sms in Android Before It Reaches the Inbox
Android Studio Add External Project to Build.Gradle
How to Include *.So Library in Android Studio
Check Android Application Is in Foreground or Not
Open Application After Clicking on Notification
How to Run a Method Every X Seconds
Convert View to Bitmap on Android
Android: Java.Lang.Securityexception: Permission Denial: Start Intent
What Is Difference Between Getsupportfragmentmanager() and Getchildfragmentmanager()