Bottom Navigation bar with fragments

Marcel picture Marcel · Dec 28, 2017 · Viewed 9k times · Source

I have a bottom navigation bar in my Main Activity. By clicking on one of the tabs in my bottom navigation, I want to change the fragment in the view. I have the following code: Main Activity:

public class StartActivity extends AppCompatActivity {

SwiftFragment swiftFragment;
FrameworksFragment frameworksFragment;
FrameLayout content;
android.support.v4.app.FragmentManager fragmentManager;

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

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        android.support.v4.app.FragmentTransaction transaction = fragmentManager.beginTransaction();

        switch (item.getItemId()) {
            case R.id.navigation_home:
                Log.i("Nachricht", "HOME");
                return true;
            case R.id.navigation_swift:
                Log.i("Nachricht", "SWIFT");
                transaction.replace(android.R.id.content, swiftFragment);
                transaction.commit();
                return true;
            case R.id.navigation_frameworks:
                Log.i("Nachricht", "FRAMEWORKS");
                transaction.replace(android.R.id.content, frameworksFragment);
                transaction.commit();
                return true;
            case R.id.navigation_profile:
                Log.i("Nachricht", "PROFILE");
        }
        return false;
    }
};

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

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

    swiftFragment = (SwiftFragment) android.support.v4.app.Fragment.instantiate(this, SwiftFragment.class.getName(), null);
    frameworksFragment = (FrameworksFragment) android.support.v4.app.Fragment.instantiate(this, FrameworksFragment.class.getName(), null);
    content = (FrameLayout) findViewById(android.R.id.content);
    fragmentManager = getSupportFragmentManager();
}

}

One of my fragments:

public class SwiftFragment extends Fragment {

ArrayList<ModelTutorial> items;
ListView list;
ArrayAdapter adapter;

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

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_swift, container, false);

    //TODO: Get Firebase Data
    items = new ArrayList<>();
    items.add(new ModelTutorial("Swift Anlegen der Liste", "TableView", "Test Test Test", null, null));
    items.add(new ModelTutorial("Anlegen der Liste", "TableView", "Test Test Test", null, null));
    items.add(new ModelTutorial("Anlegen der Liste", "TableView", "Test Test Test", null, null));

    list = (ListView) view.findViewById(R.id.swiftTutorialsList);
    adapter = new ListAdapter(getActivity(), items);
    list.setAdapter(adapter);

    return view;
}

}

If I click on one of the tabs, the right fragment shows up, so this is working. However when the new fragment shows up and I want to click on another tab to show another fragment, this doesn't work. The bottom navigation bar doesn't react on the clicks. Even the Log.i statements doesn't work, so it seems the OnNavigationItemSelectedListener isn't called.

I'm completely new to android development and I don't understand why this isn't working. I would appreciate it if someone could help me with my problem.

EDIT: XML File StartActivity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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"
tools:context="com.example.marcelspindler.codingtutorials.StartActivity">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />
</android.support.constraint.ConstraintLayout>

XML File Fragment:

<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"
tools:context="com.example.marcelspindler.codingtutorials.SwiftFragment">

<!-- TODO: Update blank fragment layout -->

<ListView
    android:id="@+id/swiftTutorialsList"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</FrameLayout>

Answer

Bruno Pinto picture Bruno Pinto · Dec 28, 2017

You need to add the Fragment to a container inside your MainActivity.

Try something like this:

<android.support.constraint.ConstraintLayout 
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"
tools:context="com.example.marcelspindler.codingtutorials.StartActivity">

<FrameLayout 
    android:id="@+id/fragment_container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />
</android.support.constraint.ConstraintLayout>

And then replace your replace lines to:

transaction.replace(R.id.fragment_container, fragment);

BONUS: You can initiate your fragments like this: swiftFragment = new SwiftFragment();

Take look to this after: Best practice for instantiating a new Android Fragment