Statusbar of new activities turns white when using transparent statusbar - android

Everytime I launch a new activity from my MainActivity the new activity's statusbar turns white. For some reason this problem does not affect the Activity MainActivity which is initially loaded though.
I realize this behavior has been discussed enough on the thread Status bar turns white and does not show content behind it but most of the solutions suggested center around disabling your transparent statusbar and I couldn't get any other solutions to work for me.
This is the layout of one of my activities:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/search_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The attribute android:fitsSystemWindows="true" appears to have no effect here though, since all contents of my activity layout already fit the system window boundaries. It is only that the statusbar is colored completely white.
I rely on my transparent statusbar and thus can not disable it. Is there any other way to prevent the described behavior?

I have now identified two solutions for achieving the desired behavior:
Modifying window flags in the activity's onCreate method:
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
This will color the status bar grayish so that the system icons are visible again.
Modifying the background color of the activities root layout to match the desired statusbar color:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/colorPrimaryDark">
<FrameLayout
android:id="#+id/search_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I was able to find the last solution thanks to a friendly comment from Phoenix Wang.

Related

Align icons vertically in BottomNavigationView

In short, I don't want the empty space below the icons of bottom navigation view. Here is how it looks.
Screenshot with layout bounds enabled in developer options
Screenshot without layout bounds enabled in developer options
This is what I have done in MainActivity layout file:
<?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:theme="#style/Theme.Breathe"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainFrag" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.9"
android:gravity="center">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_50sdp"
android:layout_marginRight="#dimen/_50sdp"
android:elevation="8dp"
app:itemIconTint="#drawable/bottom_navigation_color"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_navigation_menu" />
</LinearLayout>
This is what I have done on the Java side:
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
Log.d("Dark Mode","Dark mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40 );
shape.setColor(Color.DKGRAY);
bottomNavigationView.setBackground(shape);
break;
case Configuration.UI_MODE_NIGHT_NO:
Log.d("Light Mode","Light mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40);
shape.setColor(Color.WHITE);
bottomNavigationView.setBackground(shape);
break;
}
I have used java to set the shape drawable so as to implement light/dark theme based on system settings.
I have tried padding, it works but then the layout of the icons messes up on smaller display sizes. I am hoping there's another way to do it.
The issue was with the bottom navigation view conflicting somehow with the sticky immersive mode. Changing the way how I achieved full screen solved the problem.
Even though it's an old question.
For those that still encounter this. The problem is that on older phones with system built-in bottom navigation bar
like this
the system does NOT render correctly BottomNavigationView if the system navigation bar is transparent.
So quick fix: If your system navigation bar is transparent (from the Themes.xml or programtically) change it to solid and it should fix it.

BottomNavigationView not display properly

I want to remove the extra space from the navigation bar to the bottom of my screen.
As you can see below:
My BottomNavigationView leaves some space below it and I have no idea why.
The layout that contains theBottomNavigationView is very simple:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/layout"
tools:context=".NavBarActivity">
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/menu"
android:background="#drawable/scroll_background"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/main_color_background"
app:itemIconTint="#color/secondaryTextColor"
app:itemTextColor="#color/secondaryTextColor"
app:menu="#menu/nav_items" />
</RelativeLayout>
I have checked that the problem is not coming from the custom background of the nav bar (I have checked it with some simple color and I got the same results)
Any ideas on why this is happening and how can I prevent it from happening?
Why your navigation background is circular?
Have you used main_color_background for circular background?
Remove that background which is making it circular and try it again. May be you have added some padding/margin in those background, which are leaving space.
So this is a funny solution:
In my phone, (galaxy j7 pro-2017) by default, there is some kind of black thin frame around every app and well, everything.
So I never had a problem, it just the way the phone is made.

Design transparent glass type bar with gradient

I am trying to design a transparent glass type bar like this -
I am poor in designing. How can I achieve it. Is there any property?
Thanks in Advance
Just ensure that you use RelativeLayout to lay Toolbar and the body.
Put the Toolbar in the last.
Put transparent color for android:background attribute of the Toolbar
This is an example of a working code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical">
<fragment
android:id="#+id/fragment_editor"
android:name="ichsan.myapp.HelloFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_editor" />
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#10000000"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
Source : transparent Actionbar with AppCompat-v7 21
The glass style background is a bit more complex than just simple transparency. You might wanna use intrinsic blur. So the way to do this would be take a simple white image, perform intrinsic blur -> set the blurred output bitmap as the background for your toolbar. Now set alpha to somewhere around 0.6f and you will have something similar. It won't exactly be exactly like the image you provided, but might be the easiest way to get a similar effect.

Change background color of tabBar in v4 viewPager

I'm building an app for Android using a viewPager, and things work just fine on a phone, but on a tablet there is a gray background on both sides of the tabs, the need is to change this background color to white.
On a phone it Looks just fine, sorry for ugly censoring
On a tablet the gray background appears
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#color/white" />
The styles I've tried to override are the ones below, I've tried to set most properties that contain the word "color" to white, but nothing has worked.
android:actionBarStyle
android:actionBarTabStyle
android:actionBarTabBarStyle
I base my theme on Theme.AppCompat.Light
I've also tried setting the background of the viewPager and actionBar in code, but it did nothing, I'm guessing it's a subview I need to get to. I've been googling my heart out but I can't find anything about this specific styling.
You can do something like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</RelativeLayout>

Strange padding on the bottom after hide and show the fragment using the transparent status bar in DrawerLayout

I used the way https://stackoverflow.com/a/27051852/3875363 to achieve the drawer behind the status bar, it seems fine before only stay for one view.
But I faced a strange case after I hide and show this fragment, a white padding appears on the bottom of the drawerlayout, it likes below.
I comment most codes to show a simple example.
The layout of activity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
The layout of fragment with drawer
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/action_bar_in_list"
layout = "#layout/toolbar"/>
</RelativeLayout>
<com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/debug_content"
android:background="#color/setting_item_group_title_text"
app:insetForeground="#4000"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:layout_height="match_parent"
android:layout_width="#dimen/navigation_drawer_width">
</com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
The layout of the second fragment:
<FrameLayout 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">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment"/>
</FrameLayout>
Once I hide the drawer fragment, show the second fragment, then I popup the back stack to return. The drawer fragment will seem like the image, a padding with the height of status bar always appear. So strange.
Try to remove android:paddingBottom from DrawerLayout.
android:paddingTop makes Drawer doesn't cover the Status Bar, but there is no reason to duplicate padding at the bottom.
EDIT:
After your update, I analyzed it once more and I think your issue can be caused by your unusual design. All guides suggest that DrawerLayout should be root element of view hierarchy (as in your example you provided). See here: link
So I suggest one of these solutions.
Use separate Activities to display Views with and without Drawer. (I recommend this, especially when your Drawer plays navigational role.)
Use one Activity with Drawer Layout as root and put Fragments as Drawer's main content. If you don't want Drawer to be openable use this method after changing Fragment:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
Try to remove the android attribute:
fitsSystemWindows = "true"
This worked for me.
According to the official documentation it's a
Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this
view to leave space for the system windows.

Categories

Resources