Search code examples
androidandroid-layoutandroid-fragmentskotlinandroid-nestedscrollview

Fragment content is hidden behind BottomNavigationView when scrolling

I've researched through this quite heavily and am at a loss on what to do - I have some content in a fragment that is being clipped off by the BottomNavigation bar in the activity and am not sure what to do. I've tried adding app:layout_behavior="@string/appbar_scrolling_view_behavior" to the NestedScrollView but the bottom piece of the content (the names of the locations) is still being cut off - there's probably an easy fix for this but I can't figure it out. The XML for my main activity and the "home" fragment is as follows:

activity_home.xml

<?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"
    android:id="@+id/home_screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/app_bar" />

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:background="@color/navbarBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

home_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<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/home_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">

    <ImageView
        android:id="@+id/tokyo_placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/main_screen_placeholder" />

    <ImageView
        android:id="@+id/airplane_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle_background"
        app:layout_constraintBottom_toBottomOf="@+id/tokyo_placeholder"
        app:layout_constraintLeft_toLeftOf="@+id/tokyo_placeholder"
        app:layout_constraintRight_toRightOf="@+id/tokyo_placeholder"
        app:layout_constraintTop_toTopOf="@+id/tokyo_placeholder"
        app:srcCompat="@drawable/icons8_airplane_48"
        tools:layout_constraintBottom_creator="1"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="0dp"
        android:layout_height="286dp"
        android:layout_marginBottom="@dimen/app_bar_height"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tokyo_placeholder"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                android:id="@+id/destination_headline"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/featured_destinations_headline"
                android:textAllCaps="true"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textSize="14sp"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/featured_destinations_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/destination_headline" />

            <TextView
                android:id="@+id/saved_trips_headline"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/featured_destinations_recycler_view"
                android:fontFamily="sans-serif"
                android:text="@string/saved_trips"
                android:textAllCaps="true"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textSize="14sp"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/saved_trips_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/saved_trips_headline" />
        </RelativeLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    android:background="#fff"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

As an example to show what I mean, here is the content when the navigation bar is moved out of the way and here is the content with the bar in the way. I'm thinking that the problem is some sort of margin/padding issue, but can't quite figure out what to fix.

Edit: I've create a repository with the relevant code (and a workable emulator example) here - please be aware that the code is written in Kotlin, but I don't imagine the issue lies witihn any of the actual code, but more within the layout

Solution

  • I'm not sure what is the expected behavior, I cannot understand that just by reading your question. Having applied this patch, which just includes home_fragment.xml layout changes:

    <?xml version="1.0" encoding="utf-8"?>
<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/home_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">

    <FrameLayout
        android:id="@+id/header_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/tokyo_placeholder"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitStart"
            app:srcCompat="@drawable/main_screen_placeholder"
            tools:ignore="ContentDescription" />

        <ImageView
            android:id="@+id/airplane_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            android:background="@drawable/circle_background"
            app:srcCompat="@drawable/icons8_airplane_48"
            tools:ignore="ContentDescription" />
    </FrameLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fillViewport="true"
        android:paddingLeft="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header_container">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView
                android:id="@+id/destination_headline"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/featured_destinations_headline"
                android:textAllCaps="true"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textSize="14sp"
                android:textStyle="bold" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/featured_destinations_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/destination_headline"
                app:layout_constraintBottom_toTopOf="@id/saved_trips_headline"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/destination_headline" />

            <TextView
                android:id="@+id/saved_trips_headline"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:text="@string/saved_trips"
                android:textAllCaps="true"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline"
                android:textSize="14sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintBottom_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/featured_destinations_recycler_view" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/saved_trips_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toTopOf="@id/app_bar"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/saved_trips_headline" />
        </android.support.constraint.ConstraintLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

    Then you'll get this output:

    enter image description here