javaandroidmaterial3mdc-components

MDC Material3 Android: BottomSheet with Menu Items

I would like to create a bottomsheet looking exactly like this (Example from https://m3.material.io/components/bottom-sheets/guidelines):

Material 3 BottomSheet Guideline Example

I was trying to figure out how to design this, is it just a ton of buttons in a LinearLayout, or is this a menu xml-file?

I tried building it on my own but it doesn't look very "native", because TextButtons look very different than the List Elements in the Preview Picture above:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="match_parent">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/bottom_sheet_image"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:background="#E6E6E6"
                    android:scaleType="centerCrop" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingLeft="20dp">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Text" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Description" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Date" />
        </LinearLayout>
    </LinearLayout>


    <Button
        style="@style/Widget.Material3.Button.TextButton.Icon"
        app:icon="@drawable/materialicons_add"
        android:text="Text button"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="left|center"
        android:title="Reise Bearbeiten" />

    <Button
        android:id="@+id/button"
        style="@style/Widget.Material3.Button.TextButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center"
        android:text="Text button"
        android:title="Reise Bearbeiten"
        app:icon="@drawable/materialicons_add" />


</LinearLayout>

I would appreciate if you could give me a hint in terms of if this is the right approach, or if there is another way to achieve this. Thanks!

Solution

  • If you want exactly same then i would suggest don't use textButton instead of use LinearLayout with horizontal or Relative layout (You can achieve same design with these two)

    just use like this and you will get native Design

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="@dimen/_30sdp"
                android:layout_height="@dimen/_30sdp"
                android:src="@drawable/dummy_twitter_img"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Add to Playlist..."
                android:layout_gravity="center_vertical"
                android:textSize="@dimen/_15ssp"
                android:textColor="@color/white"
                android:layout_marginStart="@dimen/_15sdp"/>

        </LinearLayout>