Main Bottom Navigation - Android Layouts

Main

Download MaterialX 2.8

Get the Full Android Source Code for all the listed Layouts and more.

Buy Now for $25

Layout Screenshot

Chat Bottom Navigation

Layout
Java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey_10"
    android:orientation="vertical">

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

<com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/blue_900"
                android:gravity="center_vertical"
                android:orientation="horizontal">

<ImageButton
                    android:id="@+id/bt_menu"
                    android:layout_width="?attr/actionBarSize"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:tint="@android:color/white"
                    app:srcCompat="@drawable/ic_menu" />

<View
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_weight="1" />

<ImageButton
                    android:id="@+id/bt_search"
                    android:layout_width="?attr/actionBarSize"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:tint="@android:color/white"
                    app:srcCompat="@drawable/ic_search" />

</LinearLayout>

</com.google.android.material.appbar.AppBarLayout>

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

<LinearLayout
                android:layout_width="250dp"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:orientation="vertical">

<LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

<ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_marginEnd="@dimen/spacing_mlarge"
                        android:layout_marginRight="@dimen/spacing_mlarge"
                        android:src="@drawable/shape_circle"
                        android:tint="@color/grey_20" />

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

<View
                            android:layout_width="70dp"
                            android:layout_height="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

<View
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/spacing_middle"
                            android:layout_marginTop="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

<View
                            android:layout_width="40dp"
                            android:layout_height="@dimen/spacing_middle"
                            android:layout_marginTop="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

</LinearLayout>

</LinearLayout>

<LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/spacing_xlarge"
                    android:orientation="horizontal">

<ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_marginEnd="@dimen/spacing_mlarge"
                        android:layout_marginRight="@dimen/spacing_xlarge"
                        android:src="@drawable/shape_circle"
                        android:tint="@color/grey_20" />

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

<View
                            android:layout_width="100dp"
                            android:layout_height="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

<View
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/spacing_middle"
                            android:layout_marginTop="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

<View
                            android:layout_width="40dp"
                            android:layout_height="@dimen/spacing_middle"
                            android:layout_marginTop="@dimen/spacing_middle"
                            android:background="@color/grey_20" />

</LinearLayout>

</LinearLayout>

</LinearLayout>

</RelativeLayout>

</LinearLayout>

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white">

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

<ImageView
                android:id="@+id/menu_nav_1"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:padding="@dimen/spacing_smlarge"
                android:tint="@color/blue_900"
                app:srcCompat="@drawable/ic_home" />

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

<ImageView
                android:id="@+id/menu_nav_2"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:padding="@dimen/spacing_smlarge"
                android:tint="@color/blue_900"
                app:srcCompat="@drawable/ic_event_seat" />

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="2" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:tint="@android:color/white"
                app:backgroundTint="@color/blue_900"
                app:elevation="2dp"
                app:fabSize="mini"
                app:rippleColor="@android:color/white"
                app:srcCompat="@drawable/ic_add" />

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="2" />

<ImageView
                android:id="@+id/menu_nav_4"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:padding="@dimen/spacing_smlarge"
                android:tint="@color/blue_900"
                app:srcCompat="@drawable/ic_notifications" />

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

<ImageView
                android:id="@+id/menu_nav_5"
                android:layout_width="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:padding="@dimen/spacing_smlarge"
                android:tint="@color/blue_900"
                app:srcCompat="@drawable/ic_shopping_cart" />

<View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

</LinearLayout>
    </com.google.android.material.bottomnavigation.BottomNavigationView>

</LinearLayout>

											
package com.material.components.activity.bottomnavigation;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.ImageView;

import com.material.components.R;
import com.material.components.utils.Tools;

public class BottomNavigationMain extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_navigation_main);
        initToolbar();
        initComponent();
    }

    private void initToolbar() {
        Tools.setSystemBarColor(this, R.color.blue_900);
    }

    private void initComponent() {
        // display image
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_1), R.drawable.image_18);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_2), R.drawable.image_30);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_3), R.drawable.image_21);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_4), R.drawable.image_23);
        Tools.displayImageOriginal(this, (ImageView) findViewById(R.id.image_5), R.drawable.image_19);
    }
}