Android Custom Bottom Navigation Bar (Colored Icon)

activity_example.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    tools:context="id.codigo.klikdokter.MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation" />

    <app.custom.view.CustomNavigationView
        android:id="@+id/custom_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bg_bottom_navbar"
        android:paddingTop="3dp"
        app:elevation="2dp"
        app:customMenu="@menu/bottom_main"/>

</RelativeLayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomNavigationView">
        <attr name="customMenu" format="reference" />
        <attr name="backgroundColor" format="color" />
    </declare-styleable>
</resources>

custom_navigation_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    tools:context="id.codigo.klikdokter.MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation" />

    <app.custom.view.CustomNavigationView
        android:id="@+id/custom_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bg_bottom_navbar"
        android:paddingTop="3dp"
        app:elevation="2dp"
        app:customMenu="@menu/example_menu"/>

</RelativeLayout>

CustomNavigationView.java

package app.custom.view;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.widget.PopupMenu;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import app.helper.SessionPref;
import app.model.User;
import id.codigo.klikdokter.GlideApp;
import id.codigo.klikdokter.R;

/**
 * Created by mhasby on 11/20/2017.
 * [email protected]
 */

public class CustomNavigationView extends LinearLayout {

    private Activity activity;
    private OnNavigationItemSelectedListener listener;
    private LinearLayout container;
    private List<CustomNavigationItemView> navItemViews;
    private int selectedId;

    public interface OnNavigationItemSelectedListener {
        boolean onNavigationItemSelected(MenuItem item);
    }

    public CustomNavigationView (Context context) {
        super(context);
        this.activity = (Activity) context;
        initView(context);
    }

    public CustomNavigationView (Context context, AttributeSet attrs) {
        super(context, attrs);
        this.activity = (Activity) context;
        initView(context);
        setCustomAttrs(context, attrs);
    }

    public CustomNavigationView (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.activity = (Activity) context;
        initView(context);
        setCustomAttrs(context, attrs);
    }

    private void initView(Context context) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.custom_navigation_view, null);
        addView(view);
        container = findViewById(R.id.container);
        navItemViews = new ArrayList<>();
    }

    public void setOnNavigationItemSelectedListener(Context context) {
        listener = (OnNavigationItemSelectedListener) context;
    }

    private void setCustomAttrs(Context context, AttributeSet attrs) {
        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.CustomNavigationView,
                0, 0);

        final int indexCount = a.getIndexCount();
        for (int i = 0; i < indexCount; ++i) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CustomNavigationView_customMenu:
                    addMenus(a.getResourceId(attr, -1));
                    break;
            }
        }
        a.recycle();
    }

    private void addMenus(int menuRes) {
        PopupMenu popupMenu = new PopupMenu(activity, null);
        Menu mMenu = popupMenu.getMenu();
        activity.getMenuInflater().inflate(menuRes, mMenu);
        LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) return;

        navItemViews.clear();
        for (int i = 0; i < mMenu.size(); i++) {
            MenuItem item = mMenu.getItem(i);

            View menu = inflater.inflate(R.layout.custom_item_navigation_view, container, false);
            container.addView(menu);

            CustomNavigationItemView itemView = new CustomNavigationItemView(menu, item);
            navItemViews.add(itemView);
        }

        if (selectedId == 0) selectedId = R.id.tab_article;
        setSelectedId(selectedId);
    }

    public void setSelectedId(int id) {
        selectedId = id;
        for (CustomNavigationItemView itemView : navItemViews) {
            if (itemView.item.getItemId() == selectedId) {
                itemView.getView().setSelected(true);
            } else {
                itemView.getView().setSelected(false);
            }
        }
    }

    public int getSelectedItemId() {
        return selectedId;
    }

    public CustomNavigationItemView getView(int id) {
        for (CustomNavigationItemView itemView : navItemViews) {
            if (itemView.item.getItemId() == id) {
                return itemView;
            }
        }
        return null;
    }

    public class CustomNavigationItemView {
        View view;
        ImageView ivIcon;
        TextView tvLabel;
        MenuItem item;

        CustomNavigationItemView(View view, MenuItem item) {
            this.view = view;
            ivIcon = view.findViewById(R.id.iv_icon);
            tvLabel = view.findViewById(R.id.tv_label);
            this.item = item;

            setView();
        }

        View getView() {
            return view;
        }

        public ImageView getImageView() {
            return ivIcon;
        }

        void setView() {
            LayoutParams lp = (LinearLayout.LayoutParams) view.getLayoutParams();
            lp.width = 0;
            lp.weight = 1;
            lp.height = LayoutParams.MATCH_PARENT;
            view.setLayoutParams(lp);

            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    setSelectedId(item.getItemId());
                    listener.onNavigationItemSelected(item);
                }
            });

            ivIcon.setImageDrawable(item.getIcon());
            tvLabel.setText(item.getTitle());

            try {
                User user = SessionPref.getActiveUser(activity);
                if (user != null && item.getItemId() == R.id.tab_profile) {
                    GlideApp
                        .with(activity)
                        .load(user.avatarOriginal)
                        .transform(new CircleTransform(activity))
                        .into(ivIcon);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

example_menu.xml

<?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/tab_article"
        android:enabled="true"
        android:icon="@drawable/ic_tab_article"
        android:title="@string/tab_article" />
    <item
        android:id="@+id/tab_chat"
        android:enabled="true"
        android:icon="@drawable/ic_tab_chat"
        android:title="@string/tab_chat" />
    <item
        android:id="@+id/tab_profile"
        android:enabled="true"
        android:icon="@drawable/ic_tab_profile"
        android:title="@string/tab_profile"
        app:showAsAction="ifRoom" />
</menu>

ExampleActivity.java

public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_example);

      CustomNavigationView customNavigation = findViewById(R.id.custom_bottom_navigation);
      customNavigation.setOnNavigationItemSelectedListener(this);
      customNavigation.setSelectedId(R.id.tab_chat);
  }
  
}