[FIXED] Designing a custom navigation bar

Issue

At the moment I am trying to make a custom navigation bar like the image given.

My Code to make this navigation bar looks at the moment like this:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:alpha="0.8"
        android:background="#0089BA"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout3"
        app:layout_constraintEnd_toEndOf="parent"></View>


    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:background="@android:color/transparent"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/floatingActionButton"
                android:layout_width="100dp"
                android:layout_height="70"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:clickable="true"
                app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#0089BA"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/home_img"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />

            <ImageView
                android:id="@+id/home_img4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                app:srcCompat="@drawable/googleg_standard_color_18" />
        </LinearLayout>

    </LinearLayout>


</android.support.constraint.ConstraintLayout>

But because I am really terrible at designing in xml I would appreciate some help. How can I make this design happen and how can I get better at designing in xml? Color:#0089BA transparency: 80 % I am using at the moment the same google icons to test this design.

Solution

I would recommend using the bottom navigation view. Declaring the object will look like this

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="start"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white"
    app:elevation="16dp"
    app:menu="@menu/bottom_navigation_main" /> 

and the bottom_navigation_main :

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_1"
        android:enabled="true"
        android:icon="@drawable/someImage"
        android:title="@string/tab1_title"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_1"
        android:enabled="true"
        android:icon="@drawable/someImage"
        android:title="@string/tab2_title"
        app:showAsAction="ifRoom" />
</menu>

Answered By - Marc Laliberté
Answer Checked By - Gilberto Lyons (JavaFixing Admin)