CODEWITHSUNDEEP
androidandroid-layoutandroid-recyclerviewandroid-adapterandroid-nestedscrollview
Shrikanth Narayan
Shrikanth Narayan

Reputation: 33

Last item in recyclerview (inside a nestedscrollview) is cut, landscape orientation cuts the viewpager

I have a scrolling AppBarLayout inside the CoordinatorLayout, and I include another layout inside the first one which has a NestedScrollView, RecyclerView and some other views.

I have a couple of problems that I am facing in this layout.

  1. No smooth scrolling in the activity, inside the RecyclerView it scrolls smoothly.

  2. The last item in the RecyclerView is cut from the bottom.

  3. When I change the orientation it completely cuts of the ViewPager in the bottom. As I am not able to scroll anymore.

Item in the RecyclerView is cut

Orientation cuts the ViewPager

I am also attaching the main layout and the child layouts below.

activity_detail.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".DetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_movie_backdrop"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/str_movie_backdrop_image"
                android:scaleType="fitXY" />

            <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>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@drawable/ic_favorite_black_24dp" />

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

movie_details.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/cv_poster_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            android:elevation="@dimen/card_elevation"
            app:cardCornerRadius="8dp"
            app:cardUseCompatPadding="true"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/iv_movie_poster"
                android:layout_width="150dp"
                android:layout_height="200dp"
                android:contentDescription="@string/str_movie_poster"
                android:padding="@dimen/poster_padding"
                android:scaleType="fitXY"
                android:src="@drawable/not_found" />
        </android.support.v7.widget.CardView>

        <TextView
            android:id="@+id/tv_movie_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="70dp"
            android:layout_marginStart="10dp"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceLarge"
            android:textColor="@android:color/black"
            android:textStyle="bold"
            app:layout_constraintLeft_toRightOf="@+id/cv_poster_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@+id/cv_poster_image"
            tools:text="Spider Man and Iron Man" />


        <TextView
            android:id="@+id/tv_release_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:drawablePadding="@dimen/poster_padding"
            android:drawableStart="@drawable/ic_date_range_black_24dp"
            android:gravity="start"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toLeftOf="@+id/tv_movie_title"
            app:layout_constraintTop_toBottomOf="@+id/tv_movie_title"
            tools:text="March, 2017" />

        <TextView
            android:id="@+id/tv_rating"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:drawablePadding="@dimen/poster_padding"
            android:drawableStart="@drawable/ic_star_black_24dp"
            android:gravity="start"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toLeftOf="@+id/tv_release_date"
            app:layout_constraintTop_toBottomOf="@+id/tv_release_date"
            tools:text="7.1" />

        <TextView
            android:id="@+id/tv_genre"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            android:textStyle="italic"
            app:layout_constraintLeft_toLeftOf="@+id/tv_rating"
            app:layout_constraintTop_toBottomOf="@+id/tv_rating"
            tools:text="Horror | Comedy | Drama" />

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/CategoryTab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cv_poster_image"
            app:tabGravity="fill" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sliding_tabs" />

    </android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

Inside the movie_details.xml activity the "viewPager" is where I am loading the RecyclerView.

Its a simple RecyclerView I have added the code for the adapter and the RecyclerView below.

movie_trailers_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rv_movie_trailer_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Below is the layout of each item in the RecyclerView.

movie_trailer_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="@dimen/card_elevation"
    card_view:cardCornerRadius="8dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_trailer_poster"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/str_trailer_poster"
            android:scaleType="fitXY"
            android:src="@drawable/not_found" />

        <TextView
            android:id="@+id/tv_trailer_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="@dimen/detail_activity_text_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            tools:text="This Trailer Is Awesome" />

    </LinearLayout>

</android.support.v7.widget.CardView>

Below is the code for the adapter class.

TrailerAdapter.java

public class MovieTrailersFragment extends Fragment {
    public static final String MOVIE_TRAILERS_KEY = "trailer";

    public MovieTrailersFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.movie_trailers_fragment, container, false);
        savedInstanceState = this.getArguments();
        List<MovieTrailer> movieTrailerList = (List<MovieTrailer>) savedInstanceState.getSerializable(MOVIE_TRAILERS_KEY);
        RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv_movie_trailer_list);
        TrailerAdapter trailerAdapter = new TrailerAdapter(view.getContext());
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(view.getContext(),LinearLayoutManager.VERTICAL,false);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setNestedScrollingEnabled(true);
        recyclerView.setHasFixedSize(true);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(trailerAdapter);
        trailerAdapter.prepareMovieTrailers(movieTrailerList);
        return view;
    }

}

Upvotes: 0

Views: 2043

Answers (2)

jeremex
jeremex

Reputation: 96

In my case this problem is resolved adding 0dp in layout_height on layout main when the recyclerView is hospitalized in case using on the fragments

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:navGraph="@navigation/navigation" />

Upvotes: 1

Shrikanth Narayan
Shrikanth Narayan

Reputation: 33

I had to separate out the TabLayout and ViewPager in a separate LinearLayout and then it worked properly.

Below is the modified layout for reference :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/cv_poster_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            android:elevation="@dimen/card_elevation"
            app:cardCornerRadius="8dp"
            app:cardUseCompatPadding="true"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/iv_movie_poster"
                android:layout_width="150dp"
                android:layout_height="200dp"
                android:contentDescription="@string/str_movie_poster"
                android:padding="@dimen/poster_padding"
                android:scaleType="fitXY"
                android:src="@drawable/not_found" />
        </android.support.v7.widget.CardView>

        <TextView
            android:id="@+id/tv_movie_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="60dp"
            android:layout_marginStart="10dp"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceLarge"
            android:textColor="@android:color/black"
            android:textStyle="bold"
            app:layout_constraintLeft_toRightOf="@+id/cv_poster_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@+id/cv_poster_image"
            tools:text="Spider Man and Iron Man" />


        <TextView
            android:id="@+id/tv_release_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:drawablePadding="@dimen/poster_padding"
            android:drawableStart="@drawable/ic_date_range_black_24dp"
            android:gravity="start|center_vertical"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toLeftOf="@+id/tv_movie_title"
            app:layout_constraintTop_toBottomOf="@+id/tv_movie_title"
            tools:text="March, 2017" />

        <TextView
            android:id="@+id/tv_rating"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:drawablePadding="@dimen/poster_padding"
            android:drawableStart="@drawable/ic_star_black_24dp"
            android:gravity="start|center_vertical"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toLeftOf="@+id/tv_release_date"
            app:layout_constraintTop_toBottomOf="@+id/tv_release_date"
            tools:text="7.1" />

        <TextView
            android:id="@+id/tv_genre"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:padding="@dimen/poster_padding"
            android:textAppearance="?android:textAppearanceSmall"
            android:textColor="@android:color/black"
            android:textStyle="italic"
            app:layout_constraintLeft_toLeftOf="@+id/tv_rating"
            app:layout_constraintTop_toBottomOf="@+id/tv_rating"
            tools:text="Horror | Comedy | Drama" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_tab_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:layout_marginRight="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@drawable/ic_favorite_border_black_24dp" />

    </android.support.constraint.ConstraintLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/CategoryTab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp"
            app:tabGravity="fill" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="10dp" />

    </LinearLayout>

</LinearLayout>

Update

I am using fragments so the above layout is layout is showed inside a FrameLayout which contains the NestedScrollView and is only used in case of Tablet large screen devices.

The container for the above fragment in large screens :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <FrameLayout
        android:id="@+id/detail_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>

Upvotes: 0

Related Questions