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.
No smooth scrolling in the activity, inside the RecyclerView it scrolls smoothly.
The last item in the RecyclerView is cut from the bottom.
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;
}
}
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" />
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>
I think you have a problem because navigation bar overlap your app layout. You need to setup your navigation bar, throw main theme or activity styles
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.