Card view with Fab Button like Material bottom App bar

Question

I can able to make a card view with a fab button. I can anchor the fab button in card view but here I want to make a card view which will look like BottomAppBar (Material designing).

Code

 <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context=".fragments.ViewHistoryFragment"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        style="@style/Widget.MaterialComponents.BottomAppBar">

    <!--    style="@style/Widget.MaterialComponents.BottomAppBar"-->

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/cv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.CardView">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="#C3EFC2">


                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="sdfkjgasdfjasdf"/>


            </LinearLayout>

        </com.google.android.material.card.MaterialCardView>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/cv"
            android:src="@mipmap/ic_launcher"
            android:layout_marginEnd="@dimen/margin8"
           app:layout_anchorGravity="bottom|right|end"
            app:borderWidth="@dimen/margin8"
            app:backgroundTint="#343433" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

I want to like this type of It means I want that cradle diameter in mine card view. attached my wanted output

Any suggestion of anyone will be appreciated.

@GabrieleMariotti Maybe If I am right you can not use BottomApp Bar instead of card View But if you think so can you give me an example. — BlackBlind, Sep 02 '19 at 09:37
Neved used in this way and I don't know if it can work. In any case you have to apply a MaterialShapeDrawable also to the CardView. Check this link: https://medium.com/ackee/create-beautiful-shapes-with-materialshapedrawable-874dd46e0fd5 — Gabriele Mariotti, Sep 02 '19 at 09:43
@GabrieleMariotti Did you give me downvote? I don't think so but maybe your link will work for me. — BlackBlind, Sep 02 '19 at 09:57
Use BotttomAppBar if you are looking to have a view like that. I am not sure why you are using cardview instead. — Rashiq, Sep 02 '19 at 10:31
I clearly mention that I don't want to BottomAppBar I want to make that view in a card. If you have any suggestion you can tell me instead of it. — BlackBlind, Sep 02 '19 at 10:36
You can create that with designing a bottom bar and placing the FAB accordingly on the center. — Oren Zakay, Sep 07 '19 at 12:46
Hey @BlackBlind, I didn't but it will work as you design well. ConstraintLayout will help you to place the FAB wherever you want. just need to create the design for the bottom bar and place the FAB accordingly. — Oren Zakay, Sep 22 '19 at 06:19

score 3 · Answer 1 · answered Jun 19 '20 at 13:39

You can apply to the MaterialCardView an EdgeTreatment:

    BottomAppBarTopEdgeTreatment bottomAppBarTopEdgeTreatment = new BottomAppBarTopEdgeTreatment(
            fabMargin),
            roundedCornerRadius,
            cradleVerticalOffset
    );
    bottomAppBarTopEdgeTreatment.setFabDiameter(fabSize);

    MaterialCardView cardView = findViewById(R.id.card);
    cardView.setShapeAppearanceModel( cardView.getShapeAppearanceModel().toBuilder()
            .setTopEdge(bottomAppBarTopEdgeTreatment)
            .build());

Then just anchor the Fab to the CardView:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    app:layout_anchorGravity="top|center"
    app:layout_anchor="@id/card"
    .../>

<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    ../>

which are values to set for a default FAB in `fabMargin`, `roundedCornerRadius`, `cradleVerticalOffset`, `setFabDiameter`? — NiceToMytyuk, Apr 22 '21 at 07:45

Card view with Fab Button like Material bottom App bar

1 Answers1