Develop Reference

Xamarin Android bottom navigation not displaying on all screens

I have implemented bottom navigation in Xamarin Android. I need to show different screens when clicking each icon in bottom navigation bar.
I is working fine in main activity but on Selection on bottom navigation item, how to show new screen while keeping bottom navigation visible.
When clicking icon in bottom navigation bar I setContent again so bottom navigation bar hides(as new content is loaded that does not have bottom navigation bar).
I have very little experience in Xamarin Android so don't know if there is anything like layout page which can hold bottom navigation.
I read about Framelayout and fragments but don't know how to implement with bottom navigation. Any help would be really appreciated.

The bottom bar is added to the first activity . If you change the activity, on selection the bottom bar would disappear.
You need to add view pager with fragment to achieve it
You can check out this tutorial
You can also see this code sample

Since you are changing the ContentView of your Activity it is disappearing:
You can follow the below steps to achieve a BottomNavigationView:
Since we are dealing with Fragments, I will change my MainActivity base class to Android.Support.V7.App.AppCompatActivity, and yes we will be using Android Support library V4.Since I am dealing with Fragments, I will change my MainActivity base class to Android.Support.V7.App.AppCompatActivity, and yes we will be using Android Support library V4 and V7. Check this blog for understanding support libraries
public class MainActivity : Android.Support.V7.App.AppCompatActivity
Create a layout for our MainActivity, We will add a FrameLayout to hold our Fragment, a ViewPager, and a BottomNavigationView from the Android.Support.Design library, Something like below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_navigation" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
app:menu="#menu/navigation_main" />
</RelativeLayout>
Create a layout for Fragment as well. I will keep it simple with an icon and a label, you can keep whatever you desire here:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:src="#drawable/abc_ic_star_black_48dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Fragment"
android:textAlignment="center"
android:textSize="#dimen/abc_text_size_display_1_material"
android:layout_below="#id/imageView"
android:layout_centerVertical="false" />
</RelativeLayout>
Let’s get to that bottom navigation. First, we need the navigation items (tabs) for the BottomNavigationView, we will add a navigation menu for this.
navigation_main.xml //Name of xml file
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:orderInCategory="0"
android:id="#+id/menu_genres"
android:enabled="true"
android:title="Genres"
android:icon="#drawable/tab_genres"
app:showAsAction="always" />
<item
android:orderInCategory="1"
android:id="#+id/menu_titles"
android:enabled="true"
android:title="Titles"
android:icon="#drawable/tab_titles"
app:showAsAction="always" />
<item
android:orderInCategory="2"
android:id="#+id/menu_stream"
android:enabled="true"
android:title="Stream"
android:icon="#drawable/tab_stream"
app:showAsAction="always" />
<item
android:orderInCategory="3"
android:id="#+id/menu_showtimes"
android:enabled="true"
android:title="Showtimes"
android:icon="#drawable/tab_showtimes"
app:showAsAction="always" />
</menu>
Notice the orderInCategory, this is the order of tab items from left to right.
Alright, Now We have put together the views we will be working with. Now let’s get to that BottomNavigationView.
In MainActivity get hold of the BottomNavigationView and set it up.
bottomNavigationView= FindViewById<BottomNavigationView>(Resource.Id.bottom_navigation);
Also, the BottomNavigationView hides the labels if the tabs grow more than 3. So, let’s change that. Add this helper method to your code and call it when setting up the BottomNavigationView like this,
RemoveShiftMode(_navigationView);//Below the FindViewById
private void RemoveShiftMode(BottomNavigationView view) // a Method in the Activity
{
var menuView = (BottomNavigationMenuView) view.GetChildAt(0);
try
{
var shiftingMode = menuView.Class.GetDeclaredField("mShiftingMode");
shiftingMode.Accessible = true;
shiftingMode.SetBoolean(menuView, false);
shiftingMode.Accessible = false;
for (int i = 0; i < menuView.ChildCount; i++)
{
var item = (BottomNavigationItemView)menuView.GetChildAt(i);
item.SetShiftingMode(false);
// set checked value, so view will be updated
item.SetChecked(item.ItemData.IsChecked);
}
} catch (System.Exception ex) {
System.Diagnostics.Debug.WriteLine((ex.InnerException??ex).Message);
}
}
And now, we should be okay. And that’s it. we are done with setting up the BottomNavigationView. We have not implemented the fragments for each tab yet, so tapping on the tabs won’t present anything. We will present the fragments inside the ViewPager.
Now, let’s set up the ViewPager. First, the adapter,
public class ViewPagerAdapter : FragmentPagerAdapter
{
Fragment[] _fragments;
public ViewPagerAdapter(FragmentManager fm, Fragment[] fragments) : base(fm)
{
_fragments = fragments;
}
public override int Count => _fragments.Length;
public override Fragment GetItem(int position) => _fragments[position];
}
Then, the ViewPager,
// find the view
_viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
// set the adapter
_viewPager.Adapter = new ViewPagerAdapter(SupportFragmentManager, _fragments);
and that should be it for setting up the ViewPager.
When the user slides between ViewPager views, ViewPager.PageSelected event is fired. Similarly, when the user taps on a tab (navigation menu item) in the BottomNavigationView, the BottomNavigationView.NavigationItemSelected event is fired. We have to link these two events to make the BottomNavigationView and ViewPager dance in sync. Here’s how we’re going to do it.
Declare an event handler for BottomNavigationView and ViewPager as follows,
// wireup the page selection event
_viewPager.PageSelected += ViewPager_PageSelected;
// wire up the selection event
_navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
When the ViewPager page is selected, we notify the BottomNavigationView and vice versa. Like this,
private void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
{
var item = _navigationView.Menu.GetItem(e.Position);
_navigationView.SelectedItemId = item.ItemId;
}
void NavigationView_NavigationItemSelected(object sender,
BottomNavigationView.NavigationItemSelectedEventArgs e)
{
_viewPager.SetCurrentItem(e.Item.Order, true);
}
And that’s it. Now the BottomNavigationView and ViewPager are displaying the selected fragment/page/tab and updating each other with a smooth transition.
One last thing, load fragments for these tabs.
void InitializeTabs()
{
_fragments = new Fragment[] {
TheFragment.NewInstance("Genres", "tab_genres"),
TheFragment.NewInstance("Titles", "tab_titles"),
TheFragment.NewInstance("Stream", "tab_stream"),
TheFragment.NewInstance("Showtimes", "tab_showtimes")
};
}

Android JetPack navigation with multiple stack

I'm using Jetpack Navigation version 1.0.0-alpha04 with bottom navigation. It works but the navigation doesn't happen correctly. For example, if I have tab A and tab B and from tab A I go to Page C and from there I go to tab B and come back to tab A again, I will see root fragment in the tab A and not page C which does not what I expect.
I'm looking for a solution to have a different stack for each tab, so the state of each tab is reserved when I come back to it, Also I don't like to keep all this fragment in the memory since it has a bad effect on performance, Before jetpack navigation, I used this library https://github.com/ncapdevi/FragNav, That does exactly what, Now I'm looking for the same thing with jetpack navigation.

EDIT 2: Though still no first class support (as of writing this), Google has now updated their samples with an example of how they think this should be solved for now: https://github.com/googlesamples/android-architecture-components/tree/master/NavigationAdvancedSample
The major reason is you only use one NavHostFragment to hold the whole back stack of the app.
The solution is that each tab should hold its own back stack.
In your main layout, wrap each tab fragment with a FrameLayout.
Each tab fragment is a NavHostFragment and contains its own navigation graph in order to make each tab fragment having its own back stack.
Add a BottomNavigationView.OnNavigationItemSelectedListener to BottomNavigtionView to handle the visibility of each FrameLayout.
This also takes care of your "...I don't like to keep all this fragment in memory...", because a Navigation with NavHostFragment by default uses fragmentTransaction.replace(), i.e. you will always only have as many fragments as you have NavHostFragments. The rest is just in the back stack of your navigation graph.
Edit: Google is working on a native implementation https://issuetracker.google.com/issues/80029773#comment25
More in detail
Let's say you have a BottomNavigationView with 2 menu choices, Dogs and Cats.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/dogMenu"
.../>
<item android:id="#+id/catMenu"
.../>
</menu>
Then you need 2 navigation graphs, say dog_navigation_graph.xml and cat_navigation_graph.xml.
The dog_navigation_graph might look like
<navigation
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/dog_navigation_graph"
app:startDestination="#id/dogMenu">
</navigation>
and the corresponding for cat_navigation_graph.
In your activity_main.xml, add 2 NavHostFragments
<FrameLayout
android:id="#+id/frame_dog"
...>
<fragment
android:id="#+id/dog_navigation_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/dog_navigation_graph"
app:defaultNavHost="true"/>
</FrameLayout>
and underneath add the corresponding for your cat NavHostFragment. On your cat frame layout, set android:visibility="invisible"
Now, in your MainActivity's onCreateView you can
bottom_navigation_view.setOnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.dogMenu -> showHostView(host = 0)
R.id.catMenu -> showHostView(host = 1)
}
return#setOnNavigationItemSelectedListener true
}
All that showHostView() is doing is toggling the visibility of your FrameLayouts that are wrapping the NavHostFragments. So make sure to save them in some way, e.g. in onCreateView
val hostViews = arrayListOf<FrameLayout>() // Member variable of MainActivity
hostViews.apply {
add(findViewById(R.id.frame_dog))
add(findViewById(R.id.frame_cat))
}
Now it's easy to toggle which hostViews should be visible and invisible.

The issue has been resolved by the Android team in the latest version 2.4.0-alpha01 multiple backstacks along with bottom navigation support is now possible without any workaround.
https://developer.android.com/jetpack/androidx/releases/navigation

First, I want to make an edit to #Algar's answer. The frame that you want to hide should have android:visibility="gone" instead of invisible. The reason for that in your main layout you would have something like this:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.activity.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_base" />
<FrameLayout
android:id="#+id/frame_home"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
>
<fragment
android:id="#+id/home_navigation_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/home_nav" />
</FrameLayout>
<FrameLayout
android:id="#+id/frame_find"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:visibility="gone">
<fragment
android:id="#+id/find_navigation_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/find_nav" />
</FrameLayout>
...
</LinearLayout>
If you wrap your main in a LinearLayout, setting the frame to invisible still make that frame counts, so the BottomNavigation wont appear.
Second, you should create a NavHostFragment instance (ie: curNavHostFragment) to keep track of which NavHostFragment is being visible when a tab in BottomNavigation is clicked. Note: you may want to restore this curNavHostFragment when the activity is destroyed by configuration's changes. This is an example:
#Override
protected void onRestoreInstanceState(#NonNull Bundle savedInstanceState) {
super.onRestoreInstanceState(savedInstanceState);
//if this activity is restored from previous state,
//we will have the ItemId of botnav the has been selected
//so that we can set up nav controller accordingly
switch (bottomNav.getSelectedItemId()) {
case R.id.home_fragment:
curNavHostFragment = homeNavHostFragment;
...
break;
case R.id.find_products_fragment:
curNavHostFragment = findNavHostFragment;
...
break;
}
curNavController = curNavHostFragment.getNavController();

Navigation view with fragment. Toolbar

So, I have an activity with navigation view. By click on its item I change fragment in activity. All fragment have the same toolbar. But one have this toolbar and TabLayout to it. I would like to know what is better to declare toolbar once on activity like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
or declare it in each fragment.
The disadvantage of the first method is default toolbar shadow. When I add tabs in fragment, shadow looks like
When I tried 2 solution. All my toolbar was with back icon instead drawer animated logo.
Thanks.

I had the exact same problem. This is how I solved it:
Move the toolbars to the fragments like you suggested (so you won't have a shadow separating the two). This allows for a way more flexible way to implement (different) toolbars in your layouts too.
Replace the Toolbar's navigation icon by a custom one like this:
toolbar.setNavigationIcon(R.drawable.ic_action_menu);
(I used the Android Asset Studio to easily create an icon with the preferred color)
Now open the NavigationView with the new menu(home) icon. You can do this through the MainActivity (the one with the NavigationView). Create a public method in that Activity that opens the drawer:
public void openDrawer(){
mDrawerLayout.openDrawer(Gravity.LEFT);
}
Now call this method in the OnOptionsItemSelected in your fragments like this:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// handle item selection
switch (item.getItemId()) {
case android.R.id.home: //Menu icon
((MainActivity)getActivity()).openDrawer();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
That's it. Of course the downside is that you must implement the Toolbar in each Fragment. However, this is the only way (that I know of) that enables you to have the Toolbar (+TabLayout) in a Fragment and still be able to control your NavigationView.

You can use AppBarLayout from design support library like:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
...
/>
</android.support.design.widget.AppBarLayout>
and then you can change visibility of tablayout.
For more information about desing layout library : link

How to share common layout between activities without fragment

Is there any possible way to share layout(part) between activities? For example, in my app, all activities have similar layout, the top part is long operation indicator (a progress bar, hidden when no operation is being executed), the bottom part is for showing errors. Only the middle part is different for all activities. See the picture below.
so my question is, is it possible to reuse the common layout(loading and error part) for all activities in my app? (currently I don't want to use fragment to do it for some reasons)
maybe the layout resources should like this:
layoutfolder
activity_common.xml
activity_one_content.xml
activity_two_content.xml
thanks

You can create an abstract 'base' activity that all your activities extend from, overriding setContentView to merge the base, and sub activity layouts.
This way you can handle all the loading/error code in the base activity, and simply toggle between hiding and showing the views in the sub activities.
The abstract activity:
public abstract class BaseActivity extends Activity {
protected RelativeLayout fullLayout;
protected FrameLayout subActivityContent;
#Override
public void setContentView(int layoutResID) {
fullLayout = (RelativeLayout) getLayoutInflater().inflate(R.layout.activity_base, null); // The base layout
subActivityContent = (FrameLayout) fullLayout.findViewById(R.id.content_frame); // The frame layout where the activity content is placed.
getLayoutInflater().inflate(layoutResID, subActivityContent, true); // Places the activity layout inside the activity content frame.
super.setContentView(fullLayout); // Sets the content view as the merged layouts.
}
}
the layout file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/loading_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/error_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>

You could use include in XML to, well.. include the re-useable part of your layout code.
As an example, here's my layout file for the Toolbar I used in my app:
// /res/layout/component_toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:taggr="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
taggr:popupTheme="#style/ThemeOverlay.AppCompat.Light"
taggr:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Now, say if I want to use that Toolbar again in a different Activity, this is all I'd have to write:
// /res/layout/whatever_layout_this_might_be.xml
<include layout="#layout/component_toolbar" />
Bear in mind that this would only copy the layout - not the actual behavior of said widget/component.
If you want to actually copy all of the aspects (layout, behaviour) I'm afraid Fragment is the only way to go.

Although ActivityGroup is deprecated fro API 13 but if you don't wish to go with fragments then this can be your best choice.
According to documentation, an ActivityGroup is:
A screen that contains and runs multiple embedded activities.
You can find a tutorial here and here Although the mentioned tutorial uses a Tablayout you can replace that with your common layout in XML.
A second Approach could be Reuse the layout with include tag, in this approach you could just reuse your once created common layout everywhere in the app.

Add background image to individual fragments

I have an app with multiple fragments and I would like to know how to add a background that is different for each fragment. The layout I am using has scrollable tabs which all use the same xml file. I also have a MainActivity that sets the view and an adapter for each fragment. I know you can add a background using the xml file with android:background or something of the sort as well as setting it to the view in the main activity but I can't figure out how to do it to each tab. Thank you for any help!

To add background to fragment, you have to wrap it in some container
<LinearLayout
android:id="#+id/linearlayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ccc"
android:layout_weight="1"
android:orientation="vertical">
<fragment android:name="com.example.simplefragmentexample.LayOutOne"
android:id="#+id/frag_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
If you wish to use same xml file, you should set images programmatically
LinearLayout l = (LinearLayout) findViewById(R.id.linearlayout01);
l.setBackground(Image);
or use several xmls with android:background.

You can get the root View of the fragment with the Fragment getView() method. Then you can set the background of the View using one of the setBackground() methods of the View. For example to set a random background color to each fragment:
for ( Fragment f : fragments ) {
f.getView().setBackgroundColor ( (new Random()).nextInt() );
}
PS: I never used fragments, therefore my answer could be wrong.