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 search bar in action bar. I am building an app for reminding the user about his medical appointments which has three navigation tabs at the bottom. I have created till this

after this I am stuck. Should I use three activities to display the content of corresponding tabs or fragments and how can I achieve that.

I need a recyclerview to display appointments. How can I display the search bar only when the search icon at bottom is clicked. Have searched a lot on achieving this but could not find anything useful.

Any suggestions for code or library which achieves the same would be great help thanks.

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<Appointment> 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.

Answer 2

you put your bottom navigation in the activity and fill it with whatever you want then you use this

bottomNavigationView.setOnNavigationItemSelectedListener(this);

To add an item select listener. You also implement required method in your activity like this

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()){
        case R.id.action_home:
            //open home fragment
            break;

        case R.id.action_search:
            //open search or whatever
            break;

    }

    return true;
}

Now it's up to you to do whatever you want when some item is selected, for example when search item is selected you can show search section and hide it when other items are selected.

Answer 3

If you want a library for BottomBar here's one. You have to control Visibility of your SearchBar on the click of that bottom bar item. If you are trying to implement your own searchBar then check out this links link1 link2

Answer 4

The concept of tabs is that you have to have a MainActivity, which will handle let's say 3 fragments. With the code that @Alireza suggested, you will handle the change between fragments. Please look over a tutorial on how to implement Tabs ( like this one here ) . After that, in your "SearchFragment.java" you will build your XML accordingly with your Search bar on top, and recycler view below, or whatever you wish. Suggestion: When using fragments, be sure to have a Context mContext = getActivity(); defined first, as it will be easier for you to implement all the features.

*For you to achieve the bottom tab effect, you can move android.support.design.widget.TabLayout to the bottom of the screen