BottomNavigationBar underneath NavBar

问题

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>

回答1:

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

回答2:

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:

回答3:

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.

来源：https://stackoverflow.com/questions/52294746/bottomnavigationbar-underneath-navbar

标签

android

android-layout

styles

navbar

bottomnavigationview