android custom bottom navigation tab

Creating Raised Tab in Android using Custom Bottom Navigation Bar

Hi all, have a look at below image in which center tab is raised.

I will accomplish this with the help of ConstraintsLayout in Android.

Raised Center Tab using ConstraintLayout
Raised Center Tab

Actually, we have nothing to do with Navigation Bar and we are not customizing Bottom Navigation Bar in any way.

But we will design our custom layout in such a way that it will behave and look like Bottom Navigation Bar in Android.

Raised Center Tab Code:

As we have five sections to display in our bottom navigation bar.

so we will give equal weights to all views using constraints.

All views are constraint to the bottom and top of parents.

I have added all ImageViews inside RelativeLayout so our images are not stretched to parent top and bottom.

 

// custom_raised_bottom_tab.xml
 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content">


    <RelativeLayout
        android:id="@+id/rltv_imgBell"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="4dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/rltv_imgHeadFone"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/imgBell"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bell" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rltv_imgHeadFone"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="4dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/rltv_imgBell"
        app:layout_constraintRight_toLeftOf="@id/rltv_imgMenu"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imgHeadfone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/headphones" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rltv_imgMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/rltv_imgHeadFone"
        app:layout_constraintRight_toLeftOf="@id/rltv_imgFeedback"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/imgMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/menu" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/rltv_imgFeedback"
        app:layout_constraintStart_toEndOf="@id/rltv_imgHeadFone"
        app:layout_constraintTop_toTopOf="@id/rltv_imgHeadFone"></RelativeLayout>

    <RelativeLayout
        android:id="@+id/rltv_imgFeedback"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="4dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/rltv_imgMenu"
        app:layout_constraintRight_toLeftOf="@id/rltv_imgSettings"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/imgFeedback"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/feedback" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rltv_imgSettings"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="4dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/rltv_imgFeedback"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/imgSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/settings" />

    </RelativeLayout>

</android.support.constraint.ConstraintLayout>

Thank you 🙂

If this helped you please share this post 🙂

 

copyright @ http://developine.com

 

Post Created 30

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top