BottomSheetDragHandleView only accessible in material design demo

Question

I'm using the github repository project for testing purposes and I stumbled accross BottomSheetDragHandleView which displays a handle bar in the demo license (see link for the code):

The issue I am having is that using the the similar layout structure or almost the same structure in my demo license, the handle bar is not visible.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="@dimen/view_margin_small"
        android:paddingBottom="@dimen/view_margin_small">

        <com.google.android.material.bottomsheet.BottomSheetDragHandleView
            android:id="@+id/handlebar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/setImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/set_image"
            app:icon="@drawable/baseline_photo_camera_24"
            style="@style/ThemeStyleBottomSheetIconMaterialButton"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/handlebar"
            />


        <com.google.android.material.button.MaterialButton
            android:id="@+id/deleteImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/delete_image"
            app:icon="@drawable/baseline_no_photography_24"
            style="@style/ThemeStyleBottomSheetIconMaterialButton"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/setImage"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Is there anything that must be taken care of in order to display the handle bar?

Answer 1

This seems to be happening when using material 2 themes currently and works as expected when switching to material 3 (tested on material lib version 1.8.0 - seems it won't be addressed in the future).

While BottomSheetDragHandleView seem to have default style defined its not picked up - which results in the view not showing up.

Even if thats fixed this style expect material 3 color attributes for tint color so it needs to be overridden anyway with the color of your choice.

Workaround:

define new style:

<style name="Widget.MaterialComponents.BottomSheet.DragHandle" parent="Widget.Material3.BottomSheet.DragHandle">
    <item name="tint">?colorOnSurface</item>
     <!--Alpha can be added optionally to achieve nice color blend-->
    <item name="android:alpha">0.3</item>
</style>

use it in your theme by adding:

    <item name="bottomSheetDragHandleStyle">@style/Widget.MaterialComponents.BottomSheet.DragHandle</item>