Java – Start fragmenting in BottomNavigationView

Start fragmenting in BottomNavigationView… here is a solution to the problem.

Start fragmenting in BottomNavigationView

I’m using a simple app with a bottom navigation View.
I have 3 fragments with text and I want to start them when I select a project in Botton Navigation, but I don’t know what to write in MainActivity.java;
All fragments have an .xml layout and .java.
I searched for some code, I wrote them, I searched for videos, but I didn’t succeed.

I

was learning Fragments and UI Dynamics, so I created a new project with bottom-navigation activities in Android Studio.
So in my activity_main, I have 3 elements in the bottom navigation and a frame layout above the bottom navigation that occupies all the parent elements. The idea is: when I select an item in the bottom navigation, it will show another layout in the frame layout. So I created 3 xml layouts (also java classes) in the layout folder and a fragment in the framework layout. Now, when I select a project, I’m trying to display those layouts in my frame layout (which has a fragment). But I don’t know how to do it.

Main Activity ‘

private TextView mTextMessage;

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment selectedFragment = null;
        switch (item.getItemId()) {
            case R.id.navigation_home:
                selectedFragment = HomeFragment.newInstance();
                break;
            case R.id.navigation_dashboard:
                selectedFragment = DashboardFragment.newInstance();
                break;
            case R.id.navigation_notifications:
                selectedFragment = NotificationsFragment.newInstance();
                break;
        }
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.content, selectedFragment);
        transaction.commit();
        return true;
    }

};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.content, HomeFragment.newInstance());
    transaction.commit();
}

activity_main xml

<LinearLayout
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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="bandeira.thalisson.barradenavegacaoembaixo.MainActivity">

<FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation"/>

Navigation XML

<item
    android:id="@+id/Fragment_one"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="@string/title_home"/>

<item
    android:id="@+id/Fragment_two"
    android:icon="@drawable/ic_dashboard_black_24dp"
    android:title="@string/title_dashboard"/>

<item
    android:id="@+id/Fragment_three"
    android:icon="@drawable/ic_notifications_black_24dp"
    android:title="@string/title_notifications"/>

Fragment.java example

public class HomeFragment extends Fragment {

public static HomeFragment newInstance() {
    HomeFragment fragment = new HomeFragment();
    return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.navigation_home, container, false);
    return inflater.inflate(R.layout.navigation_home, container, false);
}

Solution

First of all, in your activity_main.xml, we don’t need 3 different fragments because we can replace or add any selected fragment in only 1 FrameLayout.
Second, when a user selects any one from the Bottom NavigationView, simply take an instance of the relevant Fragment class and replace it with your activity_main’s FrameLayout.

Fragment selectedFragment = null;
         switch (item.getItemId()) {
               case R.id.navigation_home:
                   selectedFragment = FunFragment.newInstance();
                   break;

After you get an instance of the selected fragment, replace it with the FrameLayout of your activity_main to display it on the screen.

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            transaction.replace(R.id.content, selectedFragment);
            transaction.commit();

Edit the label
Step 1. Your activity_main.xml should look like this

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.exampl.MainActivity">
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />
</LinearLayout>

Step 2. Your fragment_home.xml layout should look like this

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

<TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="android"/>
    </LinearLayout>

Make 3 different fragment layouts for your three different options

Step 3. Your MainActivity.java class will look like this

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
                = new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                Fragment selectedFragment = null;
                switch (item.getItemId()) {
                    case R.id.navigation_home:
                        selectedFragment = FunFragment.newInstance();
                       break;
                    case R.id.navigation_dashboard:
                        selectedFragment = TheoryFragment.newInstance();
                       break;
                    case R.id.navigation_notifications:
                        selectedFragment = AndroidFragment.newInstance();
                        break;
                }
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.content, selectedFragment);
                transaction.commit();
                return true;
            }
        };

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.content, FunFragment.newInstance());
        transaction.commit();
    }

After launching the application, replace the fragment you want to display, and the navigation listener will process the options you will select

Step 4. You will have 3 different Fragment classes that look like this

public class TheoryFragment extends Fragment {

public static TheoryFragment newInstance() {
            TheoryFragment fragment = new TheoryFragment();
            return fragment;
        }
     @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_theory, container, false);
            unbinder = ButterKnife.bind(this, rootView);
            return rootView;
        }
    }

Hope it helps you, if you have questions, you can send me a private message.

Related Problems and Solutions