The Open Event Android app has a lot of fragments where the BottomNavigationView bar is not required. Hiding the bar is quite a clever task to handle as it can’t be simply hidden by changing its visibility (It’s not an activity). So, this blog will illustrate about how the BottomNavigationView bar is indirectly hidden in some Fragments.
We will basically change the layout to be replaced. Let us start by making the bar invisible in EventDetailsFragment. Let us observe our initial code. Below is the previous code of changing the fragments using supportFragmentManager. The below code actually represents an RecyclerViewClickListener listener of a RecyclerView. In this case it represents the RecyclerView showing all the events in the Main Page.
| val recyclerViewClickListener = object : RecyclerViewClickListener {
override fun onClick(eventID: Long) { val fragment = EventDetailsFragment() val bundle = Bundle() bundle.putLong(EVENT_ID, eventID) fragment.arguments = bundle activity?.supportFragmentManager?.beginTransaction()?.replace(R.id.frameContainer, fragment)?.addToBackStack(null)?.commit() } } |
The above code clearly mentions that the incoming fragment will replace the view with id frameContainer. Let us look at the previous xml code of activity_main.xml.
| <android.support.design.widget.CoordinatorLayout
… > android:layout_width=“match_parent” android:layout_height=“match_parent” android:orientation=“vertical”> android:id=“@+id/frameContainer” … /> android:id=“@+id/navigation” … /> </android.support.design.widget.CoordinatorLayout> |
Here we can clearly see that the Fragment will be inserted directly into the FrameLayout. The BottomNavigationView bar will always be present. There is only one way to prevent this and that is by replacing the whole layout! Below lies the latest code.
| val recyclerViewClickListener = object : RecyclerViewClickListener {
override fun onClick(eventID: Long) { val fragment = EventDetailsFragment() val bundle = Bundle() bundle.putLong(EVENT_ID, eventID) fragment.arguments = bundle activity?.supportFragmentManager?.beginTransaction()?.replace(R.id.rootLayout, fragment)?.addToBackStack(null)?.commit() } } |
We clearly observe that frameContainer has been replaced by rootLayout. Our major problem has been solved. But by doing this, we now face an error of overlapping contents. The previous fragments contents are always visible. For example, The Events page is visible whenever the EventDetailsFragment is opened for any event. This clearly shows that the incoming page lacks a background color or an image. This is because the previous fragment is only visible but not clickable!
| <android.support.design.widget.CoordinatorLayout
… > android:layout_width=“match_parent” android:layout_height=“match_parent” android:orientation=“vertical”> android:id=“@+id/frameContainer” … /> android:id=“@+id/navigation” … /> </android.support.design.widget.CoordinatorLayout> |
So we clearly observe that we have set the background to a white colour, thus not letting previous fragments contents to be visible. This is how the BottomNavigationView bar is simply hidden in some Fragments in the app.
Additional Resources
- Fragment Transaction (Android Documentation): https://developer.android.com/reference/android/support/v4/app/FragmentTransaction
- Sapan Diwakar (2013) – Replacing Fragments dynamically: http://sapandiwakar.in/replacing-fragments/
Tags: GSoC18, FOSSASIA, Open Event, Android, Fragments