Question 128329 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Own custom icon not showing up in bottomnavigation bar android studio

I’m trying to make a bottomnavigation bar where the middle icon is my own icon which should be clickable and should fit in
like this

In menu dir i made bottom_navigation.xml where lines responsible for the icon i want are :

<item
    android:id="@+id/park"
    android:icon="@drawable/ic_parkcenter"
    android:title="Park here"/>

In my maps_activity.xml (my main page where i want this shown) i use this :

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_height="75dp"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:id="@+id/bottom_nav"
            map:menu="@menu/bottom_navigation" />

and this is the result I get

I thought of putting it as imageview instead of an item but sadly it doesnt work in the menu. How should I proceed here?
Thanks in advance!

Edit: my acitivty_maps.xml,

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Can be ignored -->
        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible" />
        <!-- Can be ignored -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            map:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_left"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:layout_gravity="bottom"
            map:menu="@menu/bottom_navigation"
            android:background="@color/purple_500"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="bottom">

            <!-- For the image i want in the middle -->
            <ImageView
                android:id="@+id/parkcenter"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/ic_parkcenter" />
        </LinearLayout>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_right"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:layout_gravity="bottom"
            map:menu="@menu/bottom_navigation"
            android:background="@color/purple_500"/>

        <!-- Can be ignored -->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/parking"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:layout_margin="16dp"
            android:contentDescription="@string/parking"
            android:src="@drawable/ic_parking" />

    </FrameLayout>

</LinearLayout>

This is all inside drawerlayout if that helps! Thanks a lot again!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So i was finally able to figure out what to do, make a frame layout and add bottom navigation inside that with 5 items and the middle item with no name, no icon and checkable as false, and finally add an image view inside the frame layout and place it on the middle icon.

    <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:id="@+id/bottom_nav"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:layout_gravity="bottom"
                android:elevation="15dp"
                map:itemIconSize="34dp"
                android:background="@color/purple_500"
                map:menu="@menu/bottom_navigation"
                android:paddingLeft="5dp"
                map:itemIconTint="@drawable/select"
                map:itemTextColor="@drawable/select"
                android:focusableInTouchMode="true"
                />

            <ImageView
                android:layout_width="wrap_content"
                android:id="@+id/tofront"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_parkcenter"
                android:layout_gravity="center"
                android:scaleType="center"
                android:elevation="@android:dimen/app_icon_size"/>

            </FrameLayout>

    and you can use

    val front = findViewById<ImageView>(R.id.tofront)
    front.bringToFront()

    to bring the image in front. Once you add a listener to the image it works as intended!


  2. 0

    Just try this code of java in your activity or fragment:

        bottomNavigationView.setItemIconTintList(null) ;

    Initialize it with your id when using the bottomNavigationView.

    Login or Signup to reply.
  3. 0

    There could be a better way to do this, But a hacky way of achieving something like this would be

    <LinearLayout>
    <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_height="75dp"
                android:layout_gravity="bottom"
                android:layout_width="wrap_content"
                android:id="@+id/bottom_nav_left"
                map:menu="@menu/bottom_navigation" />
    
        <LinearLayout
             android:layout_height="100dp"
             android:layout_width="match_parent"
             android:layout_gravity="bottom">
                <ImageView
                   android:layout_height="100dp"
                   android:layout_width="100dp"
                   src = ... />
                //Add textview or any other view. Otherwise remove linearlayout
       </LinearLayout>
    
       <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_height="75dp"
                android:layout_gravity="bottom"
                android:layout_width="wrap_content"
                android:id="@+id/bottom_nav_right"
                map:menu="@menu/bottom_navigation" />
</LinearLayout>

    This will give you additional flexibility while displaying image(Have the middle image larger without tint from the bottom nav). For bottom nav left populate with items with icons left of the image and same for the bottom nav right

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search