Issue
Where can I find this View/Resource? I've seen it on several apps. It's supposed to expose some hidden layouts.
Here is the View/Resource I talked about:
And here, on the gray background, you can also see the hidden layouts:
Solution
A child View of a CoordinatorLayout can have Standard Bottom Sheet characteristics enabled by using BottomSheetBehavior. In doing so, the bottom anchoring, drag up/down gesture support and animated state transitions and more are handled for us.
The attributes:
behavior_hideable: Determines whether or not the sheet can be hidden when using a drag down gesture (bearing in mind that it can always be hidden programmatically). The default value is false for Standard Bottom Sheets and true for Modal Bottom Sheets.
behavior_draggable: Determines whether or not the sheet can be collapsed/expanded when using a drag gesture (bearing in mind that a custom way to expand/collapse the sheet will need to be implemented). The default value is true.
behavior_skipCollapsed: Determines whether or not the collapsed state should be ignored when hiding the sheet. This does not affect if behavior_hideable is not set to true. The default value is false.
behavior_fitToContents: Determines whether or not the height of the expanded sheet wraps its contents. Alternatively, it expands in two stages: half the height of the parent container, full height of the parent container. The default value is true.
behavior_halfExpandedRatio: Determines the height of the sheet (as a ratio of the parent container height) when in a half-expanded state. This does not affect if behavior_fitToContents is not set to false and should be greater than the peek height. The default value is 0.5 (the recommended ratio in the Material Guidelines).
behavior_expandedOffset: Determines the offset of the sheet from the top of the parent container when in an expanded state. This does not affect if behavior_fitToContents is not set to false and should be greater than the offset when in a half-expanded state. The default value is 0dp (the top of the sheet matches the top of the parent container).
behavior_peekHeight: The initial “peek” (collapsed state) height of the sheet. The default value is auto, which sets the peek height at the 16:9 ratio keyline of the parent container. A dimension (or pixel value, programmatically) can otherwise be used.
Now the implementation:
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
app:elevation="0dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="@android:color/transparent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
/>
</com.google.android.material.appbar.AppBarLayout>
<!-- Adding bottom sheet after main content -->
<include
layout="@layout/bottomsheet_layout" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
bottomsheet_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.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="wrap_content"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="115dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="fitXY"
android:src="@drawable/frame_curved_border_top" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:background="@color/white">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="3dp"
android:fontFamily="@font/opensans_semibold"
android:text=" Siliguri - Gangtok (6123)"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="23dp"
android:layout_marginBottom="4dp"
android:fontFamily="@font/opensans_bold"
android:text="8:00 AM - 6:00 AM"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="23dp"
android:fontFamily="@font/opensans_semibold"
android:text="STNM Government"
android:textSize="13sp"
app:layout_constraintBottom_toTopOf="@+id/textView14"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:fontFamily="@font/opensans_bold"
android:text="Journey Updates"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:drawablePadding="8dp"
android:drawableTint="@color/light_grey"
android:fontFamily="@font/opensans_regular"
android:text="Driver started the journey"
android:textAlignment="center"
android:textSize="16sp" />
<View
android:layout_width="2dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:background="#ddd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:drawablePadding="8dp"
android:drawableTint="@color/light_grey"
android:fontFamily="@font/opensans_regular"
android:text="Driver has left the bus stop (SNT)"
android:textAlignment="center"
android:textSize="16sp" />
<View
android:layout_width="2dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:background="#ddd" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:drawablePadding="8dp"
android:drawableTint="@color/light_grey"
android:fontFamily="@font/opensans_regular"
android:text="Driver is on the way"
android:textAlignment="center"
android:textSize="16sp" />
<View
android:layout_width="2dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:background="#ddd" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
You can use this as frame_curved_border_top.png
Now you have other options like the MotionLayout to achieve the same result in Android, it is up to you to decide. And if you wanted just a simple FragmentDialog implementation without the drag effect, I shall update the answer with that as well. Please select it as an answer if this helps.
Answered By - AkkixDev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.