Android – BottomBar layout

In these modern days , Mostly android applications UI Design is created by BottomBar layout because BottomBar layout creates a so beautiful layout UI Design. In this tutorial we learn step by step how to create BottomBar layout and structure a demo android application.

Step 1. 

Open your android studio and create new empty project and name it BottomBar. Nothing matter of project name, you can put any name as like see below picture:-

bottombar

Step 2

Go to app=>res=>layout folder and create xml file put the name it container_layout.xml

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

Step 3.

Now create one more xml file into app=>res=>layout and take  the name it item_tab_layout.xml file. Copy these below code and paste it into item_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<com.demo.bottombar.TabItemLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <FrameLayout
        android:layout_width="40dp"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginTop="6dp"
            android:src="@drawable/ic_home"/>

        <View
            android:id="@+id/red_point"
            android:layout_width="5dp"
            android:layout_height="5dp"
            android:background="@drawable/circle_point"
            android:layout_marginTop="5dp"
            android:layout_marginRight="6dp"
            android:layout_gravity="right"/>

        <TextView
            android:id="@+id/tv_count"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_marginTop="5dp"
            android:layout_gravity="right"
            android:textSize="8sp"
            android:gravity="center"
            android:background="@drawable/circle_point"
            android:textColor="#FFFFFF"/>

    </FrameLayout>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="8sp"
        android:layout_marginTop="2dp"
        android:text="首页"/>

</com.demo.bottombar.TabItemLayout>

Step 4.

Now create new java class take the name it BottomBarLayout.Java and paste these below code in BottomBarLayout.java class file.

package com.demo.bottombar;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.demo.bottombar.bottombar.R;

import java.util.ArrayList;
import java.util.List;

public class BottomBarLayout extends LinearLayout implements View.OnClickListener{

    private OnItemClickListener mOnItemClickListener;

    interface OnItemClickListener{
        void onItemClick(int position);
    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener){
        this.mOnItemClickListener = onItemClickListener;
    }


    private int normalTextColor;
    private int selectTextColor;

    private LinearLayout mLinearLayout;
    private List<TabEntity> tabList = new ArrayList<>();

    public BottomBarLayout(Context context) {
        super(context);
        init(context);
    }

    public BottomBarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    private void init(Context context) {
        mLinearLayout = (LinearLayout) View.inflate(context, R.layout.container_layout,null);
        addView(mLinearLayout);
    }

    public void setNormalTextColor(int color){
        this.normalTextColor = color;
    }

    public void setSelectTextColor(int color){
        this.selectTextColor = color;
    }

    public void setTabList(List<TabEntity> tabs){
        if(tabs == null || tabs.size() == 0){
            return;
        }
        this.tabList = tabs;
        for (int i=0;i<tabs.size();i++) {
            View itemView = View.inflate(getContext(), R.layout.item_tab_layout, null);
            itemView.setId(i);
            itemView.setOnClickListener(this);
            TextView text = (TextView) itemView.findViewById(R.id.tv_title);
            ImageView icon = (ImageView) itemView.findViewById(R.id.iv_icon);
            View redPoint = itemView.findViewById(R.id.red_point);
            TextView number = (TextView) itemView.findViewById(R.id.tv_count);
            TabEntity itemTab = tabList.get(i);
            text.setText(itemTab.getText());
            text.setTextColor(normalTextColor);
            icon.setImageResource(itemTab.getNormalIconId());
            if(itemTab.isShowPoint()){
                redPoint.setVisibility(View.VISIBLE);
            }else{
                redPoint.setVisibility(View.GONE);
            }
            if(itemTab.getNewsCount() == 0){
                number.setVisibility(View.GONE);
            }else if(itemTab.getNewsCount()>99){
                number.setVisibility(View.VISIBLE);
                number.setText("99+");
            }else {
                number.setVisibility(View.VISIBLE);
                number.setText(String.format("%d",itemTab.getNewsCount()));
            }
            mLinearLayout.addView(itemView);
            if(i==0){
                showTab(0,itemView);
            }
        }
    }



    @Override
    public void onClick(View view) {
        if(mOnItemClickListener == null){
            return;
        }
        switch(view.getId()){
            case 0:
                mOnItemClickListener.onItemClick(0);
                showTab(0,view);
                break;
            case 1:
                mOnItemClickListener.onItemClick(1);
                showTab(1,view);
                break;
            case 2:
                mOnItemClickListener.onItemClick(2);
                showTab(2,view);
                break;
            case 3:
                mOnItemClickListener.onItemClick(3);
                showTab(3,view);
                break;
        }
    }

    public void showTab(int position,View view){
        clearStatus();
        TextView text = (TextView) view.findViewById(R.id.tv_title);
        text.setTextColor(selectTextColor);
        ImageView icon = (ImageView) view.findViewById(R.id.iv_icon);
        icon.setImageResource(tabList.get(position).getSelectIconId());

    }

    private void clearStatus() {
        for (int i=0;i<mLinearLayout.getChildCount();i++){
            View itemView = mLinearLayout.getChildAt(i);
            ImageView icon = (ImageView) itemView.findViewById(R.id.iv_icon);
            TextView text = (TextView) itemView.findViewById(R.id.tv_title);
            text.setTextColor(normalTextColor);
            icon.setImageResource(tabList.get(i).getNormalIconId());
        }
    }
}
Step 5.

Now create a new java class. This class initialise items  in UI and take the name it TabItemLayout.java like as below:-

package com.demo.bottombar;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.LinearLayout;

public class TabItemLayout extends LinearLayout {

    public TabItemLayout(Context context) {
        super(context);
    }

    public TabItemLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(getScreenWidth()/4,heightSize);
    }


    private int getScreenWidth(){
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        return dm.widthPixels;
    }
}
Step 6.

Now create one more java class for tab entry option name it TabEntry.java and copy paste below code.

package com.demo.bottombar;

public class TabEntity {
    private String text;
    private int normalIconId;
    private int selectIconId;
    private boolean isShowPoint;
    private int newsCount;

    public int getNewsCount() {
        return newsCount;
    }

    public void setNewsCount(int newsCount) {
        this.newsCount = newsCount;
    }

    public boolean isShowPoint() {
        return isShowPoint;
    }

    public void setShowPoint(boolean showPoint) {
        isShowPoint = showPoint;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public int getNormalIconId() {
        return normalIconId;
    }

    public void setNormalIconId(int normalIconId) {
        this.normalIconId = normalIconId;
    }

    public int getSelectIconId() {
        return selectIconId;
    }

    public void setSelectIconId(int selectIconId) {
        this.selectIconId = selectIconId;
    }
}
Step 7. 

Finally go to  MainActivity java class for initialise the whole application. Copy and paste below code:-

package com.demo.bottombar;

import android.graphics.Color;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import com.demo.bottombar.bottombar.R;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private BottomBarLayout bottomBarLayout;
    private List<TabEntity> tabEntityList;
    private String[] tabText = {"Home","Chat","Search","Profile"};

    private int[] normalIcon = {R.drawable.ic_home,R.drawable.ic_chat,R.drawable.ic_search,R.drawable.ic_person};
    private int[] selectIcon = {R.drawable.ic_home1,R.drawable.ic_chat1,R.drawable.ic_search1,R.drawable.ic_person2};

    private int normalTextColor = Color.parseColor("#999999");
    private int selectTextColor = Color.parseColor("#fa6e51");

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomBarLayout = (BottomBarLayout) findViewById(R.id.bottom_nav);
        tabEntityList = new ArrayList<>();
        for (int i=0;i<tabText.length;i++){
            TabEntity item = new TabEntity();
            item.setText(tabText[i]);
            item.setNormalIconId(normalIcon[i]);
            item.setSelectIconId(selectIcon[i]);
            if(i==2 || i==3){
                item.setShowPoint(true);
            }else{
                item.setShowPoint(false);
            }
            if(i==0 || i==1){
                item.setNewsCount(i+1);
            }else {
                item.setNewsCount(0);
            }
            tabEntityList.add(item);
        }

        bottomBarLayout.setNormalTextColor(normalTextColor);
        bottomBarLayout.setSelectTextColor(selectTextColor);
        bottomBarLayout.setTabList(tabEntityList);

        bottomBarLayout.setOnItemClickListener(new BottomBarLayout.OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,position+"",Toast.LENGTH_SHORT).show();
            }
        });
    }
}
Step 8. 

 Now your project ready to debug. Start your emulator and run application. See result:-

bottombar

Download full source code click below button:-