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.