Android BottomSheet серый грейфер / ручка

Я видел такое оформление серой ручки-панели на BottomSheets в нескольких популярных приложениях. Это снимок экрана BottomSheet в Google Maps. Обратите внимание на серую ручку / захват в верхней части BottomSheet.

Как лучше всего реализовать такое украшение или фон? Есть ли для этого украшения стандартный материал или стиль Android?

Источник

3 ответа

Решение

Я вставил SVG для захвата / ручки в свой макет для нижнего листа.

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>
Источник

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.

Источник

Также вы можете добавить программно

      private fun addLine() {
        val bottomSheet = requireDialog().findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as? FrameLayout
        val line = View(context)
        val frameLayoutParams =  FrameLayout.LayoutParams(dip(180), dip(6))
        frameLayoutParams.gravity = Gravity.CENTER_HORIZONTAL
        frameLayoutParams.topMargin = dip(16)
        line.layoutParams = frameLayoutParams
        line.setBackgroundResource(R.drawable.rounded_tv_grey)
        line.backgroundTintList = ColorStateList.valueOf(Color.rgb(226, 231, 233))
        bottomSheet?.addView(line,0)
        requireView().updatePadding(requireView().paddingLeft,dip(24),requireView().paddingRight, requireView().paddingBottom)
    }
```
Источник
Другие вопросы по тегам