Fragments and Bottom Navigation with Material Design 3

Android Developer April 25, 2023

Navigation Bar and Fragments

Fragment

A fragment is a self-contained, modular section of our app's user interface that we embed inside an activity. 
A fragment defines and manages its own layout, has its own lifecycle, and can handle its own input events. Fragments can't live on their own. They must be hosted by an activity or another fragment. The fragment’s view hierarchy becomes part of, or attaches to, the host’s view hierarchy.

Navigation Bar

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app. There's one type of navigation bar in Material. In M2, this component was named bottom navigation. It makes easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.

The bar can disappear on scroll, based on HideBottomViewOnScrollBehavior, when it is placed within a CoordinatorLayout and one of the children within the CoordinatorLayout is scrolled. This behavior is only set if the layout_behavior property is set to HideBottomViewOnScrollBehavior.

Steps
Create a New Project

In activitymai.xml we will create a BottomNavigationView inside the  RelativeLayout
activity_main.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"
    tools:context=".MainActivity">
<com.google.android.material.textview.MaterialTextView
    android:id="@+id/snackbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="32sp"
    android:text="Bottom Navigation with Fragments" />
    <FrameLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_above="@id/bt"
        android:id="@+id/fc"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/bt"
        app:menu="@menu/bottom_menu"
        android:layout_alignParentBottom="true"/>


</RelativeLayout>

Create a Menu for Bottom Navigation

 Right click on app>New>Android Resource File

                       Change Resource type from “Values” to Menu and

1.                                                File name “bottom_menu”


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:title="Home"
    android:icon="@drawable/home_24"
    android:id="@+id/home"/>
    <item
        android:title="About"
        android:icon="@drawable/person_24"
        android:id="@+id/about"/>
    <item
        android:title="Setting"
        android:icon="@drawable/settings_24"
        android:id="@+id/setting"/>

</menu>

Fragments

We create 3 blank Fragments by right click on 
app > New > Fragment > Fragment (Blank)
  1. Home
  2. Settings and 
  3. About




layout/fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:background="@android:color/holo_blue_bright"
    tools:context=".About">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="34sp"
        android:text="@string/about" />

</FrameLayout>

Home.kt

package com.example.fragmentsandnavigationbar

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class Home : Fragment(R.layout.fragment_home) {

}

layout/fragment_settings.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:background="@android:color/holo_blue_light"
    tools:context=".Settings">

    <!-- TODO: Update blank fragment layout -->
    <com.google.android.material.textview.MaterialTextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="34sp"
        android:text="@string/settings" />

</FrameLayout>

Settings.kt
package com.example.fragmentsandnavigationbar

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class Settings : Fragment(R.layout.fragment_settings) {

}

layout/fragment_about.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:background="@android:color/holo_blue_bright"
    tools:context=".About">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="34sp"
        android:text="@string/about" />

</FrameLayout>
About.kt
package com.example.fragmentsandnavigationbar

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class About : Fragment(R.layout.fragment_about) {
}
MainActivity.kt
package com.example.fragmentsandnavigationbar

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.google.android.material.navigation.NavigationBarView
import com.google.android.material.snackbar.Snackbar

class MainActivity : AppCompatActivity() {
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

          val bt1=findViewById<NavigationBarView>(R.id.bt)
        bt1.setOnItemSelectedListener {
            when(it.itemId){
                R.id.home->{
                    loadFragment(Home())
                    // Toast.makeText(this,"Home", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.about->{
                    //Toast.makeText(this,"Settings", Toast.LENGTH_SHORT).show()
                    loadFragment(About())
                    true
                }
                R.id.setting->{
                    loadFragment(Settings())
                    //Toast.makeText(this,"About", Toast.LENGTH_SHORT).show()
                    true
                }
                else->false
            }
        }
    }
    private fun loadFragment(fragment: Fragment){
        val transaction=supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fc,fragment)
        transaction.commit()
    }
}

Output :-






Thanks for reading!😊😊😊😊😊😊
If you enjoyed reading , Show some Love by
 clapping 👏 on this post!
If you have any suggestion share with me.
Reading....

Post a Comment

0 Comments