Midrib Tech

 

Bottom Navigation Bar in Android Studio

Lets Start:

1. Create Activity.

MainActivity

Open XML file for activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    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"
    tools:context="com.pakmcqs.quiz.Activities.MainActivity">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:animateLayoutChanges="true">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:itemTextColor="@color/accent"
        app:menu="@menu/bottom_navigation_items"/>
</RelativeLayout>

Open Java Class for activity_main

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener
                (new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        Fragment selectedFragment = null;
                        switch (item.getItemId()) {
                            case R.id.action1:
                                selectedFragment = ItemFragment_One.newInstance();
                                break;
                            case R.id.action2:
                                selectedFragment = ItemFragment_Two.newInstance();
                                break;
                            case R.id.action3:
                                selectedFragment = ItemFragment_Three.newInstance();
                                break;
                        }
                        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                        transaction.replace(R.id.frame_layout, selectedFragment);
                        transaction.commit();
                        return true;
                    }
                });

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.frame_layout, ItemOneFragment.newInstance());
        transaction.commit();

 
    }
}

 ==============================================================

2. After this create xml file in menu folder Bottom Navigation Item

bottom_navigation_item

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action1"
        android:icon="@drawable/ic_home" <-- icon call from drawable -->
        android:title="Home"/>
    <item
        android:id="@+id/action2"
        android:icon="@drawable/ic_music" <-- icon call from drawable -->
        android:title="music"/>
    <item
        android:id="@+id/action3"
        android:icon="@drawable/ic_profile" <-- icon call from drawable -->
        android:title="profile"/>
</menu>

==============================================================================

3. After this create Fragments in menu folder Bottom Navigation Item

ItemFragment_One

ItemOneFragment_Two
ItemOneFragment_Three
ItemFragment_One
public class ItemFragment_One extends Fragment {
    public static ItemFragment_One newInstance() {
        ItemFragment_One fragment = new ItemOneFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_one, container, false);
    }
}

Now FragmentItem_One XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.midribtech.bottomnavigation.ItemFragment_One">

 

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Fragment 1"
        android:textSize="30sp"/>

</RelativeLayout>

ItemFragment_Two
public class ItemFragment_Two extends Fragment {
    public static ItemFragment_Two newInstance() {
        ItemFragment_Two fragment = new ItemOneFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_two, container, false);
    }
}

Now FragmentItem_Two XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.midribtech.bottomnavigation.ItemFragment_Two">

 

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Fragment 2"
        android:textSize="30sp"/>

</RelativeLayout>
==============================================================================

ItemFragment_Three
public class ItemFragment_Three extends Fragment {
    public static ItemFragment_Three newInstance() {
        ItemFragment_Three fragment = new ItemOneFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_three, container, false);
    }
}

Now FragmentItem_Three XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.midribtech.bottomnavigation.ItemFragment_Three">

 

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Fragment 3"
        android:textSize="30sp"/>

</RelativeLayout>
==============================================================================

String File

<resources>
    <string name="app_name">Bottom Navigation</string>
    <string name="item_1">Item 1</string>
    <string name="item_2">Item 2</string>
    <string name="item_3">Item 3</string>
</resources>
==============================================================================
Color File
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#FFFFFF</color>
    <color name="white_trans">#99FFFFFF</color>
</resources>