0

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

My navigation bar

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.

2 Answers 2

0

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>
0

I think, there are 3 steps,

1- Use BottomAppBar and FloatingActionButton like this

<com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="bottom"
    
            app:backgroundTint="@android:color/transparent"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="10dp">
    
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginEnd="16dp"
                android:background="@drawable/rounded_corner"
                app:menu="@menu/bottom_nav_menu" />
    
        </com.google.android.material.bottomappbar.BottomAppBar>
    
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_baseline_add_24"
            app:backgroundTint="#FF5252"
            app:layout_anchor="@id/bottomAppBar" />

2- Use bottom_navigation_main as @Marc Laliberté mentioned

3- Use a shape to make a Rounded Corner like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:topLeftRadius="15dp"
    android:topRightRadius="15dp"/>
    <solid android:color="#6F0B49B1"/>
</shape>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.