How to change the size and shape of a particular bottom bar navigation item

Question

I am trying to implement this bottom bar which contains an item with a bigger size and a different shape than the other ones.

Is there a non-hacky way to achieve this using the native Bottom navigation component ? I guess not because it does not seem compliant with Material Design specs.

Otherwise, what would be the best approach to follow ? I see only 2 ways to achieve this but none of them seems reliable to me.

• For every "small item", adding a transparent bar at the top of the drawable to reach the size of the camera icon.
• Implementing a 5 items bottom bar with a "ghost item" in the middle, on top of which I could place some other component. This would require this component to be coupled with the bottom bar.

EDIT

This is what I obtained by increasing the icon size as suggested by Harshit and fmaccaroni.

When the item is not selected :

When the item is selected :

Pro: The icon is bigger than the other ones

Cons: It is still contained inside the bottom bar. Also, it is not centered vertically when selected

---

Answer 1

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/colorPrimary"
    app:itemTextColor="@android:color/black"
    app:menu="@menu/navigation"
    android:clipChildren="false">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"
        app:elevation="6dp"
        android:scaleType="center" />
</android.support.design.widget.BottomNavigationView>

also add android:clipChildren="false" to root layout