I am developing an Activity where I need to make the navigation bar opaque, and the status bar transparent on devices running 5.0+ (API 21+). The styles I am using are below, along with an explanation of my problem.
AppTheme extends Theme.AppCompat.Light.NoActionBar
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/welbe_red_transparent</item>
FullscreenTheme extends AppTheme
<item name="android:windowNoTitle">true</item>
<item name="android:statusBarColor">#color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
This makes the app look like this
If I remove the android:windowTranslucentNavigation style, or set it to false in Fullscreen, it fixes the navigation bar issue. The problem is the status bar turns completely white instead of staying transparent and displaying the content behind it.
I have tried using fitsSystemWindow="true" in my layouts, but it didn't fix the issue. Anyone know why this is happening?
android:windowTranslucentNavigation does one thing that android:statusBarColor doesn't do, which is requesting the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags.
These are the ones that you need to request in order to draw behind the status bar.
Request them in the onCreate of your Activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Alternatively you can also simply set your apps theme background and that will also pop up behind your status bar.
More information here.
As far as I know there's no proper way to set the color of the status bar on APIs lower than 19.
For API 19+ you can use a similar attribute to windowTranslucentNavigation only for the status bar:
<item name="android:windowTranslucentStatus">true</item>
Notes:
The reason you were getting a white status bar is because of
<item name="android:statusBarColor">#color/transparent</item>
There are some hacks that work on specific manufacturer devices, but I wouldn't use them myself.
I struggle with this for over 3 hours. Wrap everything in a CoordinatorLayout it is the only one that seems to pay attention to the fitsSystemWindow="true" or "false"
This is my main activity fragment
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/layout_google_map"/>
<include layout="#layout/layout_toolbar_transparent"/>
<include layout="#layout/layout_action_buttons"/>
<include layout="#layout/layout_bottom_sheet"/>
</android.support.design.widget.CoordinatorLayout>
this is my toolbar layout
<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="?actionBarSize"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:srcCompat="#drawable/ic_fynd_logo_red"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
as you can see, my fragment layout makes the google map be drawn under the status bar.
I have an action bar where the company's logo goes.
And other ui buttons "layout_action_buttons" also wrapped in a Coordinator layout , so the fitsSystemsWindows works.
Check it out.
To achieve this in any activity
Add the style:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Use CoordinatorLayout as root layout in XML
In oncreate() method, before setcontentview use
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
For the latest android version R and backward compatibility, this works for me.
WindowCompat.getInsetsController(window, window.decorView)?.isAppearanceLightStatusBars =false /* true for dark icon on StatusBar and false for white icon on StatusBar */
WindowCompat.setDecorFitsSystemWindows(window, false)
WindowCompat.getInsetsController(window, window.decorView)?.show(WindowInsetsCompat.Type.statusBars())
ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)) { rootView, insets ->
val navigationBarHeight = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
rootView.setPadding(0, 0, 0, navigationBarHeight)
insets
}
For Fragment, you can use activity?.window...
Related
When I launch my virtual machine it doesn´t match with the layout, it seems that I have activated the status bar but I already disabled in the theme.xml
The code of the layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white"
tools:context=".MainActivity">
And I already disable the status bar, here´s the code of the theme.xml:
<style name="Theme.Ev" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <!-- Hiding the ActionBar with the parent -->
<item name="colorPrimary">#color/logo_colorblack</item>
<item name="colorPrimaryVariant">#color/logo_colorblack</item>
<item name="colorOnPrimary">#color/logo_colorblack</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<item name="android:statusBarColor">#color/gray_pewter</item>
</style>
Here is the image of my project:
comparison
Thank you for reading this.
First lets go through the differences of Status Bar and Toolbar.
Status bar: On Android, the status bar contains notification icons and system icons.
Toolbar/top app bar/Action bar: Display information and actions at the top of a screen.
You've set your app to inherit from Theme.MaterialComponents.DayNight.NoActionBar which means the action bar is disabled, but that doesn't mean the status bar won't be shown.
To hide the status bar in your application, follow this quick official guide from Google: https://developer.android.com/training/system-ui/status
When I open the overflow menu in my application, I see a solid rectangle of the menu background color displayed behind the menu itself throughout the enter/exit animations. Here's an animation showing this (slowed to 75% speed):
The presence of this extraneous colored rectangle spoils the nice enter/exit animations! How can I remove it while retaining all other Toolbar styling?
Research
I've read a bunch of answers on Toolbar styling on SO, and Chris Banes' own posts on the subject. It seems that usage of the style/theme tags on a per-View basis has changed in the past couple years, which has made it difficult to find definitive information anywhere.
I've reproduced this using versions 22.1.0 through 23.2.0 (inclusive) of the support library.
App files
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ToolbarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/colorPrimary</item>
</style>
</resources>
activity_main.xml
<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="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:style="#style/ToolbarStyle" />
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Runtime View Analysis
As #Commonsware suggested, I took a look at the view hierarchy at run time. Editing in the results:
Menu collapsed (overflow button present, no mysterious extra rectangle):
Menu expanded (overflow menu views displayed in separate Window):
The main application view hierarchy (as displayed in the original Window) is unchanged when comparing the two menu (steady) states. My guess is therefore that the extra rectangle is temporarily added to the main application's window during menu animations, and immediately removed upon their completion. I'm not sure why this would be done - perhaps it's a hangover from an older (and now unused) method of showing and hiding the overflow menu? If my deduction is correct, then this question could be resolved if we can determine how to prevent this transitory behavior...
An extract from the Chris Bane's answer to the question AppCompat style background propagated to the Image within the ToolBar
style = local to the Toolbar
theme = global to everything inflated in the Toolbar
Based on the above post it seems, the android:background attribute you are setting in the android:theme is the reason for the extra background color during the animation.
I'd set the background to the toolbar directly and used the android:colorBackground attribute to set the background color for the popup. The animation seems to work fine.
Code:
activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/CustomToolbarTheme" />
styles.xml
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:colorBackground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
How do I remove the boundary between action and toolbar?
Bad Case
Good Case, I want to like it.
Activity XML
Fragment XML
What you are looking for is a way to remove the shadow under toolbar.
For android 4.4 or below, you will have to set the window content overlay in your activity theme like this
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
...
<!--To hide shadow effect in toolbar for Android 4.4 or below-->
<item name="android:windowContentOverlay">#null</item>
</style>
For Android 5.0+, you will also need to set the toolbar elevation to 0 in the activity layout like this.
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>
<android.support.design.widget.AppBarLayout
...
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Actually, many people ask about this. See answer here
Try to search for existing answer next time ;)
Is there a way to disable the fade-in / fade-out animation for ToolBar elements?
I found a solution for the status bar:
getWindow().getEnterTransition().excludeTarget(android.R.id.statusBarBackground, true);
But I can not find a similar fix for the ToolBar. Everytime I load a new Activity, it causes an undesired flash.
Edit:
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Status Bar Color -->
<item name="android:colorPrimaryDark" tools:targetApi="21">#color/primary_4</item>
</style>
<!-- Toolbar Style -->
<style name="toolbar">
<item name="android:textColorPrimary">#color/primary_0</item>
<item name="colorControlNormal">#color/primary_0</item>
<item name="colorControlHighlight">#color/primary_3</item>
</style>
</resources>
In activity_main.xml & activity_details.xml
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/toolbar"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/primary_4" />
The Elevation animation duration value is R.integer.app_bar_elevation_anim_duration which by default is 150.
To avoid the animation, just put following into any xml under res/values and that's it:
<integer name="app_bar_elevation_anim_duration" tools:override="true">0</integer>
The documentation for excludeTarget() says:
public Transition excludeTarget (View target,
boolean exclude) :
Whether to add the given target to the list of targets to exclude from
this transition. The exclude parameter specifies whether the target
should be added to or removed from the excluded list.
Excluding targets is a general mechanism for allowing transitions to
run on a view hierarchy while skipping target views that should not be
part of the transition. For example, you may want to avoid animating
children of a specific ListView or Spinner. Views can be excluded
either by their id, or by their instance reference, or by the Class of
that view
This means that the way you excluded the status bar from the enter transition would also work for the toolbar.
I tried it and it's working.
secondActivity.xml:
...
<include
android:id="#+id/customToolbar"
layout="#layout/toolbar" />
...
SecondActivity.java (Inside onCreate()):
...
getWindow().getEnterTransition().excludeTarget(R.id.customToolbar, true);
...
My Android app has a translucent ActionBar. It hides when I touch the screen and shows up again when the screen is touched again.
/value-11/styles.xml
<style name="FullscreenTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="buttonBarStyle">?android:attr/buttonBarStyle</item>
<item name="buttonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
</style>
<style name="FullscreenActionBarStyle" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#color/black_overlay</item>
</style>
When I start the app, the ActionBar is translucent, that's the expected state. When I hide it using getActionBar().hide(); and make it show up again using getActionBar().show(); it's not translucent anymore.
It's a Fragment in a ViewPager. If I just scroll right, hide and show works like expected: the ActionBar is translucent after show(); gets called.
Update: Everytime I scroll left, the bug is there again.
Has anybody an idea how to fix this, so it works also on the first page or when the user has scrolled one or more to the left?
I solved my problem:
The layout of the view inside the ViewPager was the following:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/presentation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:contentDescription="#string/presentation"
android:scaleType="fitCenter"
android:fitsSystemWindows="true" >
</ImageView>
android:fitsSystemWindows="true" was responsible for this weird bug, without this, all works fine.
And sorry for writing so less code, I just thought it was a javacode-issue and not related to the xml. And I could not find a codeblock, that approx. would be the one with the error in it. How should I, the error was in my layout-file. ;)