Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bottom part of NestedScrollView hidden by navigation bar [Android]

I've got a problem with NestedScrollView on layout with CollapsingToolbarLayout. When I scroll text to bottom last sentences are covered by navigation bar.

enter image description here
layout.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="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/ExpandedAppBar"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Title">

            <ImageView
                android:id="@+id/toolbar_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/visit_at_office"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum" />
    </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

Adding margin bottom to TextView fixes this bug, but I'd like to know any better solution and why is that happens. Could anyone help me, please?

like image 253
dudeck Avatar asked Mar 02 '17 16:03

dudeck


People also ask

Will bottomnavigationview show and hide on scrolling?

When a BottomNavigationView will show and hide on scrolling it will look much more professional and practical. You have also seen in LinkedIn, that how it’s BottomNavigationView shows and hide on scrolling. Do you also not want to implement it in BottomNavigationView of your own app.

What is nestedscrollview and how to enable it?

It is enabled by default. NestedScrollView is used when there is a need for a scrolling view inside another scrolling view. You have seen this in many apps for example when we open a pdf file and when we reached the end of the PDF there is an Ad below the pdf file.

How do I Hide and show content behind the navigation bar?

On Android 4.1 and higher, you can set your application's content to appear behind the navigation bar, so that the content doesn't resize as the navigation bar hides and shows. To do this, use SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION . You may also need to use SYSTEM_UI_FLAG_LAYOUT_STABLE to help your app maintain a stable layout.

How to create bottom navigation bar in Android Studio?

Steps for Creating Bottom Navigation Bar. Step 1: Create a new Android Studio project. To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language. Step 2: Adding the dependency to the build.gradle(:app) file


1 Answers

In case anyone is still searching for a solution of this problem:

Cause of the problem is that CoordinatorLayout is not calculating correctly size of CollapsingToolbarLayout because it has Toolbar with app:layout_collapseMode="pin" setting. It thinks that CollapsingToolbarLayout will collapse to zero height so it leaves all available space to NestedScrollView, but actually what happens is that toolbar stays pinned so NestedScrollView moves down, behind NavigationBar.

Easiest way to solve this is just to add android:minHeight="?attr/actionBarSize" (or whatever toolbar height you are using) to CollapsingToolbarLayout. This way CoordinatorLayout will know properly how much space it needs to leave for NestedScrollView.

like image 151
MarkoR Avatar answered Sep 29 '22 22:09

MarkoR