Traabefi Traabefi - 10 days ago 5
Android Question

Expandable scrolling fragment/view over another fragment

I need to make an Android app, that works in a similar way that the latest google maps (You click on a spot, and a view pops up from the bottom. You can even expand this view to fullscreen fragment)
Unfortunately, I have not been able to replicate this behaviour. I found a library on github, that provides scrolling panel. But I am not sure if it is what I need to use.
Any ideas ?

Answer

There is a Behavior available in google design support library named as BottomSheet you can use it to achieve that behavior. Add This to your App module gradle

compile 'com.android.support:design:23.2.0'

then in your xml add Bottom

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">



<android.support.v4.widget.NestedScrollView
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:clipToPadding="true"
    android:background="@android:color/holo_orange_light"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/ipsum"
        android:padding="16dp"
        android:textSize="16sp"/>

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


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

Note that the NestedScrollView is Given BottomSheetBehavior

app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

Then is Java file

private BottomSheetBehavior mBottomSheetBehavior;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View bottomSheet = findViewById( R.id.bottom_sheet );
mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
}

Then to show the bottom sheet use

mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

and to hide the bottom sheet use

mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

For further information please have a look at BottomSheet Example