0

I have the menu item that consists of 5 items which are Home, Property, Help, Users & Account. My question is, how should I do to make the Help menu looks like the picture below. Can someone help me?

Here is my xml code for menu

<?xml version="1.0" encoding="utf-8"?>


<item
    android:id="@+id/nav_home"
    android:icon="@drawable/bottom_menu_home_s"
    android:title="Home" />

<item
    android:id="@+id/nav_property"
    android:icon="@drawable/bottom_menu_property_s"
    android:title="Property" />

<item
    android:id="@+id/nav_panic"
    android:icon="@drawable/bottom_menu_panic"
    android:title="Help" />

<item
    android:id="@+id/nav_user"
    android:icon="@drawable/bottom_menu_users_s"
    android:title="Users" />

<item
    android:id="@+id/nav_account"
    android:icon="@drawable/bottom_menu_accounts_s"
    android:title="Account" />

enter image description here

Haziq Abdullah
  • 83
  • 1
  • 10

2 Answers2

1

Try this, as you can not do directly 

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@android:color/black"
        app:menu="@menu/bottom_navigation"
        android:clipChildren="false"
        android:layout_height="56dp">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/help_button"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_gravity="center"
            android:layout_marginBottom="8dp"
            app:elevation="6dp"
            android:scaleType="center"/>
    </com.google.android.material.bottomnavigation.BottomNavigationView>
Pankaj Kumar
  • 81,967
  • 29
  • 167
  • 186
  • How to make floating button looks like the above picture? I try it many times and it doesn't display correctly – Haziq Abdullah Dec 16 '19 at 07:07
  • @HaziqAbdullah you need to play with styling. I will look and let you know after few hours. Till you look by your own or other geeks will be helping you soon :) – Pankaj Kumar Dec 16 '19 at 07:16
  • @HaziqAbdullah play with https://medium.com/@vadim.zhukov/easy-way-to-make-curved-bottomnavigationview-with-floatingactionbutton-12b979009e64 Not sure if you can match it but can give a try – Pankaj Kumar Dec 16 '19 at 07:21
  • 1
    For a square fab you can check this [answer](https://stackoverflow.com/a/58220198/2016562). – Gabriele Mariotti Dec 16 '19 at 07:26
-1

You have to download/create customized icon first. Menu doesn't allow customization like a drawable.

Rohit Joshi
  • 1
  • 1