Implementation of an Instagram-like Navigation in Android

  • Replies:1
2
jkishido
  • Forum posts: 1

Oct 25, 2015, 9:43:17 AM via Website

Hi! Good day! I'm having a problem implementing an Instagram-like Navigation in Android.

Basically, what I need to do is have a Main Screen with tabs (let say 3 tabs), and on each tab i can navigate deeper (e.g. in Instagram home page, I can click a user then click on one photo, then click on the likes, then click on a user, and so on..)

Then, when I switch from the current tab (Tab 1) to the next tab (Tab 2) and return back to Tab 1, I'll still be at the last subpage I was. And pressing back will navigate me back to all the previous pages I've been in that tab.

The problem is that I don't know how to implement this fully on Android.

I can only go as far as the ViewPager which will host the tab main page (these are Fragments). But I don't know how to implement the navigation within each fragment.

Any ideas, how can I do this? Thank you and have a good day!

Reply
MLSDev Inc. 3
MLSDev Inc.
  • Forum posts: 7

Nov 4, 2015, 1:55:58 PM via Website

Hi! We have some advice in this regard.

First of all you need to implement your own back stack. For example, it may look like this:

private List<Stack<BaseFragment>> mBackStack = new ArrayList<Stack<BaseFragment>>();

After that you need to initialize it:

private void initBackStack(int tabsNum){

//NOTE: FirstFragment, SecondFragment should extends BaseFragment
YourBaseFragment[] fragments = {new FirstFragment(), new SecondFragment() //and so on }



for (int i = 0; i < tabsNum; i++){
 Stack<FragmentBase> tabBackStack = new Stack<FragmentBase>();
 tabBackStack.push(fragments[i]);
 mBackStack.add(tabBackStack);
}

}

You also need to create bottom tabs bar and keep the current selected tab.

For switching tabs you can use something like this:

public void onTabSelected(int tab) {
 FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
 ft.replace(R.id.fl_content_holder, mBackStack.get(tab).peek()).commitAllowingStateLoss();
}

where param tab is the current selected tab (from 0 to tabsCount - 1)

Reply