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

Upvotes: 3

Answers (3)

Sam

Reputation: 140

In your ConstraintLayout you need to set the layout_height to 0dp and the bottom constraint to the top of the BottomNavigationView. An example:

<FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigation"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

Upvotes: 0

azizbekian

Reputation: 62209

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:

Upvotes: 3

theThapa

Reputation: 631

@Tai M. The problem seems to be the hardcoded height of the NestedScrollView. Since you are already using ConstraintLayout, you can easily lay this view without having to add another Relative layout.

If you want to have the Header images one on top of the other, please wrap those in a FrameLayout. Assign an id to the container and add: app:layout_constraintTop_toBottomOf="@+id/headerImageContainer" to the NestedScrollView.

Then you can probably get rid of the RelativeLayout and replace it with another ConstraintLayout to structure the rest of the views using constraints only.

Also, by material design definition, the height of the BottomNavigationView is 56dp which you can assign directly rather than making it wrap content in the activity_home.xml

<ConstraintLayout ...>

    <FrameLayout ...>
        <ImageView .../>

        <ImageView .../>

    </FrameLayout>

    <NestenScrollView ... wrap_content>
        <ConstraintLayout ...>
            <TextView .../>
            <RecyclerView .../>
            <!-- Assign constraints accordingly -->
            <TextView .../>
            <RecyclerView .../>

        </ConstraintLayout>

    </NestenScrollView>

</ConstraintLayout>

Hope this helps.

Upvotes: 0

Fragment content is hidden behind BottomNavigationView when scrolling

Answers (3)

Related Questions