I'm trying to create something similar to the picture. I am using CoordinatorLayout
, BottomAppBar
and BottomNavigation
, but the bottom app bar needs a floating action button to create the cradle around the button.
I need the floating action button to have an image and a text view which I will update programmatically.
Is there a way for this to be achieved without creating an entire custom bottom app bar?
CodePudding user response:
You can have a transparent FAB, and draw on top of it a layout with your custom Image & TextView
;
Similar to FAB, app:layout_anchor
& app:layout_anchorGravity
can be used on the layout to lay it on top of the FAB.
Here is an implementation:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@ id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@ id/fab_cutout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0"
app:layout_anchor="@id/navigation" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
app:layout_anchor="@id/navigation"
app:layout_anchorGravity="center_horizontal">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="60dp"
android:layout_height="60dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearance="@style/roundedimage"
app:srcCompat="@drawable/with_cart1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="99"
android:textColor="@color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@ id/navigation"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@android:color/holo_blue_dark"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:fabCradleMargin="10dp"
app:fabCradleVerticalOffset="8dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@ id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:backgroundTint="@android:color/transparent"
app:elevation="0dp"
app:itemIconTint="@android:color/white"
app:itemRippleColor="@android:color/white"
app:itemTextColor="@android:color/white"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_nav_menu_4" />
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Result: