CODEWITHSUNDEEP
androidxmlandroid-fragmentsandroid-coordinatorlayoutbottom-sheet
Thorvald
Thorvald

Reputation: 3563

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>

Upvotes: 1

Views: 4878

Answers (1)

amitairos
amitairos

Reputation: 2967

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

    }

Upvotes: 1

Related Questions