Bottom soft NavigationBar overlaps my ListView

Question

I ran my app on a Nexus 5 (Android 5) but I encountered the problem that the soft NavigationBar at the bottom overlaps the last item of my ListView. I've tried to add fitsSystemWindows to my style and the ListView but that didn't work.

The XML of my layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/sf4l"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ListView android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/sf4l" />
</LinearLayout>

Rosiorosita

What navigation bar are you referring to? Is your activity full screen? – Togliatti

The soft navigation bar with the Back, Home and Options buttons. bit.ly/1vLpHSp – Rosiorosita

If I add a margin I will have a problem with devices without soft navigation buttons. – Rosiorosita

https://mcmap.net/q/560910/-navbar-overlapping-last-listview-item-android Please check above link it will help you. – Amoebaean

Answer 1

Add this to your themes.xml in a values-v21 dir:

<item name="android:windowDrawsSystemBarBackgrounds">false</item>

Example (I'm using AppCompat for actionbars):

<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="homeAsUpIndicator">@drawable/new_indicator</item>
    <item name="android:homeAsUpIndicator">@drawable/new_indicator</item>
    <item name="actionModeBackground">@android:color/black</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>

Blairblaire

i am using AppTheme.NoActionBar and this one is not working! any other idea ? – Kendyl

same with me...I am also using NoActionBar and this didnt work...any idea? – Quadrifid

It works for NoActionBar as well, just copy the same content of your style file, to v21 and include <item name="android:windowDrawsSystemBarBackgrounds">false</item> in it – Squeeze

i am using AppTheme.NoActionBar and this one is not working! any other idea ? i have also using the v21 folder but again no responce – Beriosova

doesn't seem to make a difference (when using noactionbar) – Eri

This is very helpfull : https://mcmap.net/q/560910/-navbar-overlapping-last-listview-item-android – Sternick

Its not working with Theme.AppCompat.Light.NoActionBar, Can someone help please? – Flail

In case of theme NoActionBar if your parent layout is ConstraintsLayout, this might be helpful https://mcmap.net/q/560910/-navbar-overlapping-last-listview-item-android – Dovap

Answer 2

It's because height of your listView is equal full screen height but action bar pushes layout few pixel lower what causes layout overlap by navigation buttons.

This is also happening if you have full screen fragment container under action bar.

Fix for this is to mesure height of screen and of action bar, and then set height of your parent view to it's difference. Example:

@Override
public void onWindowFocusChanged (boolean hasFocus) {
    LinearLayout lMain = (LinearLayout) findViewById(R.id.lMain);
    lMain.getLayoutParams().height = lMain.getHeight() - getNavigationBarHeight();
}

• you have to do this after layout is already drawn/rendered. In onCreate or onResume is too early. Doing so in onWindowFocusChanged() is maybe litle overkill but it works.

Narcose

Answer 3

I tried the accepted answer in this post and like many it didn't work for me.

However the following worker for me.

  <item name="android:windowTranslucentNavigation">false</item>

I placed in styles-21.xml

What is does is make the soft navigation bar have a solid background and somehow now components are rendered correctly.

Joub

Answer 4

This answer is kind of mixing other answers and my trials to achieve this Starting from API-15.

For API-21+

In styles.xml (v21) add below to the activity's style

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     ....
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>

For API-19+

In styles.xml (v19) add below to the activity's style

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     ....
    <item name="android:windowTranslucentNavigation">false</item>
</style>

For API-15+

Override below in your activity

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    // return for API-19+
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
        return;

    // Customize Activity to not overlap with the bottom software buttons
    // navigation bar (back, home, & menu)
    boolean hasMenuKey = ViewConfiguration.get(this).hasPermanentMenuKey();
    boolean hasBackKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_BACK);

    if (!hasMenuKey && !hasBackKey) { // check if this device has a bottom navigation bar
        ConstraintLayout rootLayout = findViewById(R.id.activity_root); // my activity root layout
        int NAVIGATION_BAR_HEIGHT = 70;
        rootLayout.getLayoutParams().height = rootLayout.getHeight() - NAVIGATION_BAR_HEIGHT;
    }
}

Rehearsal

Answer 5

Very easy solution. Simply use ConstraintLayout. Align the bottom edge of top view to the top edge of bottom view.

Sample is given below:-

xml:-

    <android.support.constraint.ConstraintLayout 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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ListView
    android:id="@+id/list_item"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:divider="@color/black"
    android:dividerHeight="2dp"
    app:layout_constraintBottom_toTopOf="@+id/navigation"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0"
    app:layout_constraintHorizontal_bias="1.0"></ListView>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />
    </android.support.constraint.ConstraintLayout>

Output Design:-

Kotick

For me this just adds a white block on above the bottom of the list view. – Aseptic

Answer 6

no body mentioned insets..

View.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {
        @Override
        public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
            int bottomInset = insets.getSystemWindowInsetBottom();
            // Do something with the bottom inset value, such as adjusting the layout
            v.getPaddingBottom();// useless.
            insets.getSystemWindowInsetBottom(); // correct
            insets.getStableInsetBottom();

            return insets;
        }
    });

this code is only to point readers to right direction, not mean to be functionally correct. checkout this post:

Corabelle

Answer 7

Add in your themes.xml

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>

In Activity before setContentView(view) set transparent color to status bar

 window.statusBarColor = Color.TRANSPARENT

Fahrenheit