androidandroid-layoutmaterial-designfloating-action-button

How to make FAB with icon and text

I'm working on customizing a floating action button (FAB) in my Android application. I'd like to modify it so that it can accommodate both an icon and text, similar to the design shown in this image:

the design

I've been searching for guidance on how to achieve this, but I haven't found a solution yet. Could someone please provide some advice or code examples on how to implement this feature while adhering to Android development best practices?

I've already tried ExtendedFloatingActionButton, but i don't know how to set the ExtendedFloatingActionButton into circle without removing the icon

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test"
    app:icon="@drawable/ic_back"
    app:iconGravity="textTop"
    android:background="@drawable/circle_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

this is the result of above code

enter image description here

Solution

  • As FloatingActionButton(FAB) cannot have text and icon both we need to customize the UI with out FAB.

    Please find the below code for your expected UI , also make sure that you dont hide the Dummy Fab as it will help you in creation of curves in the bottom bar

    <?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="16dp"
            android:background="@android:color/transparent"
            app:menu="@menu/bottom_nav_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_dummy"
        android:visibility="visible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/selected_home"
        app:layout_anchor="@id/bottomAppBar" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottomAppBar"
        app:layout_anchorGravity="center_horizontal"
        android:elevation="20dp">
        <LinearLayout
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:id="@+id/fab"
            android:orientation="vertical"
            android:background="@drawable/solid_circle"
            android:src="@drawable/selected_home"
            android:layout_marginBottom="20dp">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/selected_home"
                android:layout_margin="5dp">
            </ImageView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/tv_fab_text"
                android:text="Fab"
                android:textColor="#000"
                android:layout_gravity="center_horizontal">
            </TextView>
        </LinearLayout>
    </LinearLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

    solid_circle.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#1E90FF"></solid>
</shape>

    enter image description here