BottomNavigationBar underneath NavBar

Question

The Goal:

1) Make the status bar transparent - Done

2) Make the BottomNavigationView and the Navbar the same color. - Almost Done

The Problem

By adding the following code in my Activity, the status bar becomes transparent. BUT, BottomNavigationView falls underneath the NavBar. If I remove this line of code, the StatusBar no longer is transparent. You feel my pain here? Furthermore... How would I make the TOP of the layout go underneath the statusbar?

The Code in the Activity:

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);
}

The Activity 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">

<com.custom.app.view.ClickableViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/tab_layout" />

<android.support.design.widget.BottomNavigationView
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/custom_black"
    app:itemIconTint="@color/white"
    app:itemTextColor="@color/white"
    app:menu="@menu/bottom_navigation_main" />

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

The Style.xml

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">@color/md_white_1000</item>
    <item name="android:actionMenuTextColor">@color/custom_black</item>
    <item name="actionMenuTextColor">@color/custom_black</item>
    <item name="android:alertDialogStyle">@style/AppTheme.AlertDialog</item>
    <item name="colorControlNormal">@color/md_white_1000</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:navigationBarColor">@color/custom_black</item>
</style>

can't really understand what u want to ask...try posting some screenshots of ur problem — Aayush Singla, Sep 15 '18 at 01:07
use this link https://stackoverflow.com/questions/33347297/can-i-set-flag-layout-no-limits-only-for-status-bar — Roufal SMB, Jul 03 '19 at 07:14

AskNilesh · Answer 1 · 2018-10-04T07:03:33.573

BottomNavigationBar underneath NavBar

The reason your BottomNavigationView hiding behind NavBar because your are setting this flags

w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

SEE the result using that flags

SIMPLE SOLUTION

To make your statusbar transparent just use <item name="colorPrimaryDark">@android:color/transparent</item>

and use below flags

 getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
 getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

Root layout

You need to use android.support.design.widget.CoordinatorLayout as your rootlayout

CartActivity

public class CartActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        } else {

            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        setContentView(R.layout.activity_cart);

        bottomNavigationView = findViewById(R.id.tab_layout);


    }

}

layout.activity_cart

<?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"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#199bd2"
    android:fitsSystemWindows="true">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="#000"
        app:itemIconTint="#FFFFFF"
        app:itemTextColor="#FFFFFF"
        app:menu="@menu/bottom_navigation_main" />


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

CustAppTheme2

<style name="CustAppTheme2" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@android:color/transparent</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlNormal">#FFFFFF</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:navigationBarColor">#000</item>

</style>

Finally OUTPUT

Finally OUTPUT on kitkat

I've tried exactly as you've recommended but the top status bar is grey'ish instead of transparent. — Subby, Sep 22 '18 at 23:02
@Subby r u sure you have made changes as per my answer because its working fine for me in all device — AskNilesh, Sep 24 '18 at 03:49
@Subby make `android.support.design.widget.CoordinatorLayout` your `rootlayout ` — AskNilesh, Oct 04 '18 at 07:07
@Subby have u tried with `android.support.design.widget.CoordinatorLayout` as root layout — AskNilesh, Oct 19 '18 at 11:49
it doesn't work for me .... I've done all you said , this is my root — Navid Abutorab, Dec 19 '19 at 06:50
@NavidAbutorab have you tried using `getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);` — AskNilesh, Dec 19 '19 at 06:51

score 2 · Answer 2 · edited Oct 02 '18 at 11:58

How would I make the TOP of the layout go underneath the statusbar?

Add this to root layout of each activity you need:

android:fitsSystemWindows="true"

BottomNavigationView falls underneath the NavBar

I don't know if you can find a way to handle this as long as you keep using FLAG_LAYOUT_NO_LIMITS. If you still want to use it, you may try to check if device has a NavigationBar and calculate its height which you can give to BottomNavigationView as a bottom margin.

To do that you can find some useful methods in this SO answer. Add another method like:

public void setMargin(int height){
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) mBottomNavigationView.getLayoutParams();
    params.bottomMargin = height;
}

And in onCreate(), get the height of the NavigationBar if it exists and setMargin of BottomNavigationView:

int bottomNavHeight = getNavigationBarSize(this).y;
if( bottomNavHeight > 0){
         setMargin(bottomNavHeight);
}

Result will be like:

score 0 · Answer 3 · answered Sep 15 '18 at 01:28

I haven't tested this code but, most probably it should work

 if (Build.VERSION.SDK_INT >= 21) {
    setWindowFlag(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
            | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, false);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    getWindow().setNavigationBarColor(Color.TRANSPARENT);
}

The code you have added allows the window to extend outside the actual output area.So. most probably that is allowing your activity to come beneath system widgets that is status bar and nav bar and giving them a transparent look.

Try to remove the code you mentioned from java activity and replace it with mine. I hope it helps.

BottomNavigationBar underneath NavBar

3 Answers3

Linked

Related