Sígvardr Ólavrsson Sígvardr Ólavrsson - 3 months ago 75
Android Question

Android - Scroll and Bottom Sheet in CoordinatorLayout

first of all I am not familiar with CoordinatorLayouts, I have a fragment that contain several scrollable CardViews, when I tried to add a bottom sheet I got the Bottom Sheet must be a child of a coordinatorLayout error, so I added a coordinatorLayout and now I can't seem to be able to scroll anymore

PS: I tried replacing

ScrollView
with a
NestedScrollView
and it didn't work, I even tried to edit the XML tags order but nothing solved it, I still can't scroll

Is there a way that I can use
Bottom Sheets
without having to use a
CoordinatorLayout
??


Here's the XML layout fragment with ScrollView :

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ThreeFragment" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/MainScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
style="@style/MyCardViewStyleTitle"
android:id="@+id/view">
<TextView
android:text="I- Pure Vowels"
android:textStyle="normal"
android:background="@color/colorPrimaryDark"
android:textSize="20dp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_marginBottom="1dp"
android:layout_height="wrap_content"
style="@style/MyCardViewStyleContent"
android:id="@+id/textView10"
android:layout_below="@+id/view"
android:layout_alignParentStart="true">
<TextView
android:text="Pronouncing : á"
android:textStyle="bold|italic"
android:textSize="17dp"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="\n\nas in English father\nE.g. ár ‘year’"
android:textStyle="normal"
android:textSize="40px"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.CardView>
<!-- more cardviews -->
</LinearLayout>
</ScrollView>
<!-- Bottom Sheet Layout-->
<include layout="@layout/learn_more_sheet" />
</android.support.design.widget.CoordinatorLayout>


Here's the XML layout fragment with NestedScrollView :

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ThreeFragment" >
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/MainScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
style="@style/MyCardViewStyleTitle"
android:id="@+id/view">
<TextView
android:text="I- Pure Vowels"
android:textStyle="normal"
android:background="@color/colorPrimaryDark"
android:textSize="20dp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_marginBottom="1dp"
android:layout_height="wrap_content"
style="@style/MyCardViewStyleContent"
android:id="@+id/textView10"
android:layout_below="@+id/view"
android:layout_alignParentStart="true">
<TextView
android:text="Pronouncing : á"
android:textStyle="bold|italic"
android:textSize="17dp"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="\n\nas in English father\nE.g. ár ‘year’"
android:textStyle="normal"
android:textSize="40px"
android:textColor="@color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.CardView>
<!-- more cardviews -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!-- Bottom Sheet Layout-->
<include layout="@layout/learn_more_sheet" />
</android.support.design.widget.CoordinatorLayout>


Main Activity XML layout

<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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.incorp.anisvikernes.englishtonorse.MainActivity">
>

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="160px"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Answer

EDIT: Remove BottomSheetLayout from the fragment, and put it in the Activity under the ViewPager. Then put one NestedScrollView on the top of the fragment, with attributes like this:

<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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:fillViewport="true">

To make the BottomSheet appear only in the fragment, you can do this: Set visbility to android:visiblity="gone", and in the fragment set it to visibile, like this:

var sheet = (View)getActivity().findViewById(R.id.{sheet});
sheet.setVisbility(view.Visible);

Then, in the other fragments you have, do the same, just with sheet.setVisbility(view.Gone);

To hide it when pressing on back, use this in the Activity:

 @Override
public void onBackPressed() {

       if (sheet.getVisibility() == View.VISIBLE) {
    sheet.setVisbility(view.Gone);

    }