Android BottomSheet gray grapple/handle bar

Question

I've seen this sort of gray handle bar decoration on BottomSheets in a few popular apps. This is a screenshot of a BottomSheet in Google Maps. Notice the gray handle/gripper at the top of the BottomSheet.

What is the best way to implement a decoration or background like this? Is there a standard material or Android style for this decoration?

Answer 1

I inserted an SVG for the grapple/handle into my layout for the bottom sheet.

MyBottomSheetDialogFragmentLayout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
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="wrap_content">

    <ImageView
        android:id="@+id/bottomSheetGrapple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/topMargin"
        android:src="@drawable/ic_bottom_sheet_grapple"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    .... // rest of layout
</androidx.constraintlayout.widget.ConstraintLayout>

ic_bottom_sheet_grapple.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="3dp"
    android:viewportWidth="24"
    android:viewportHeight="3">

    <path
        android:fillColor="@android:color/darker_gray"
        android:pathData="M 1.5 0 L 22.5 0 Q 24 0 24 1.5 L 24 1.5 Q 24 3 22.5 3 L 1.5 3 Q 0 3 0 1.5 L 0 1.5 Q 0 0 1.5 0 Z"
        android:strokeWidth="1" />
</vector>

Answer 2

Use MaterialCardView

<com.google.android.material.card.MaterialCardView
    android:layout_width="40dp"
    android:layout_height="5dp"
    android:backgroundTint="@color/ms_material_grey_400"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginTop="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

Use can configure the dimensions and corner radius as per your needs.