How to create bottom navigation bar similar to instagram

Question

I am an android newbie trying to create a bottom navigation bar for my new android app similar to one there in Instagram. Like this where clicking on the search icon adds a

Answer 1

Should I use three activities to display the content of corresponding tabs or fragments and how can I achieve that?

Definitely you should use Fragment for each bottom navigation Item / Tab. Like FragmentHome, FragmentSearch and FragmentSettings.

To change the Fragment, add NavigationItemSelectedListener to your BottomNavigationView and change Fragment as per MenuItem selection:

    BottomNavigationView bottomNavigationView = (BottomNavigationView)
            findViewById(R.id.bottom_navigation_view);

    bottomNavigationView.setOnNavigationItemSelectedListener
            (new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    Fragment selectedFragment = null;
                    switch (item.getItemId()) {
                        case R.id.action_item1:
                            selectedFragment = FragmentHome.newInstance();
                            break;
                        case R.id.action_item2:
                            selectedFragment = FragmentSearch.newInstance();
                            break;
                        case R.id.action_item3:
                            selectedFragment = FragmentSettings.newInstance();
                            break;
                    }
                    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                    transaction.replace(R.id.frame_layout, selectedFragment);
                    transaction.commit();
                    return true;
                }
            });

Here is a tutorial about: BottomNavigationView with multiple Fragments

I need a recyclerview to display appointments

In your Fragment's layout XML, add a RecyclerView to show list of appointments. In your Fragment class, initialize RecyclerView and create an ArrayList and pass this list to your Adapter to show on RecyclerView row items.

Here is an tutorial about: How to use RecyclerView in Fragment

How can I display the search bar only when the search icon at bottom is clicked?

You can show/hide option item programmatically from ToolBar/ActionBar as per your Fragment change.

In your FragmentSearch, do below changes to show Searchbar:

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

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState)
{
    View v = inflater.inflate(R.layout.fragmet_search, parent, false);
    return v;
}


@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
   inflater.inflate(R.menu.your_search_menu_xml, menu);
   super.onCreateOptionsMenu(menu, inflater);
}

Here are some useful links:

1. Android Toolbar Adding Menu Items for different fragments
2. Hide/Show Action Bar Option Menu Item for different fragments
3. Adding ActionBar Items From Within Your Fragments

Hope this will help to understand the scenario.