10

I'm building an android app which, although it has a completely different function, has a very similar UI to Instagram. There is a bottom bar with buttons for viewing timeline, posting (my app's content), checking notifications, and viewing your own profile.

I am a fourth year electrical engineering student, but I am relatively new to Android development. In order to teach myself more stuff faster, I went ahead and made a lot of the functions of my app (like viewing posts, profile, timeline, friends, etc.) their own activities with their own bottom bar (which are just buttons as of now). In doing this I have learned a lot about development and have built an app that, for what I have built out so far, functions as it's supposed to, but is not too fast or pretty. I realize this is probably not the best practice and I wanted to ask you all what you think a simple explanation of how to implement an Instagram-like UI would be? When I say Instagram-like I mainly mean: it includes a bottom bar; the app "preserves" where a user is, like if I'm viewing a friend from the timeline, then press the view profile button, then press the timeline again, then I will still be viewing my friend.

I have tried to read up as much as I could to tackle the redesign but I'm still a little fuzzy on the standard for doing something like this.Should I try TabHost (which is deprecated)? should each button represent an activity with swappable views (for example in IG I click a post on my timeline and it swaps to the pictures post view)? Should I associate an activity with each button and swap fragments based on where the user navigates? I realize this is an open ended question, and I hope it's not too vague for Stack Overflow, but I have thought about it a great deal, and I would appreciate the feedback of some more experienced developers! Thanks!

ThePartyTurtle
  • 2,276
  • 2
  • 18
  • 32

1 Answers1

6

You can use the new TabLayout that is contained in the support design library along with a view pager to switch between your different fragments.

You can read about the TabLayout as well as some of the other things packed in to the design library here.

Reference for TabLayout

edit: In the comments I mentioned an analogy for you to think about how to use fragments vs. activities. In the interest of not spreading misinformation I'm gonna back peddle on what I said a little bit. You can absolutely use separate activities and switch between them using the tabs. So, the correct answer is kind of somewhere in the middle. The MainActivity would still hold the tablayout and manage the tab listener and switch between the tabs but you can set the content of the tablayout to hold the content a new activity. But you can do it with fragments as well and possibly more efficiently.

It really depends on the structure of your app and how deep it goes. If you only have 4 fragments and the information is centric to one work flow then you might choose to only use one activity with four fragments. It is really up to the developer on how to manage this.

Since fragments have come out, one philosophy has been if the space that you are using can be repurposed, that is, if you are working in the same box (the area above the tab bar of the instagram application for example), use a fragment. (Referencing from here). The camera tab is a good example of where to use an activity. The camera functionality represents an entirely different workflow than is seen when navigating feeds, pictures and profiles of the instagram application. So the feed might be one fragment, and the user profile another fragment but they are all being managed by the same activity and using the same content frame.

There are other answers posted in the reference I provided above which should help your understanding further.

Community
  • 1
  • 1
charliebeckwith
  • 1,449
  • 11
  • 29
  • Thanks! That sounds like exactly what I'm looking for. It's good to see that strategy in that very recent developers blog. And I'm pretty sure I understand the logic of it all. One last quick question though: I'm imagining that each tab's listener will create/start/resume an activity which contains a view pager that will swap around the fragments I want. Does that make sense? – ThePartyTurtle Jun 15 '15 at 21:55
  • 1
    Mm, I would not think so. Think of starting an activity as opening a new browser window. Fragments are more like changing tabs in the same browser window. This isn't a 100% accurate comparison, but I think it gets the point across. You would basically have one main activity that strings the different "tabs" together, where each tab is a separate fragment, but all are managed by the same activity. Make sense? – charliebeckwith Jun 15 '15 at 21:58
  • Yes! This does make sense. In my case I only want one "window" (my app) with four "tabs" (fragments). But I am still a little confused. Keeping in line with the browser example, what would navigating to a different web page in one tab look like in the context of an Android app? Like if an Instagram user is on their timeline, and then they click on a friends profile, they are still in the same tab of the tab host (like staying in the same tab on a browser), but they're now looking at their friends profile. Is this the case where we have one fragment that swaps with another fragment/view? – ThePartyTurtle Jun 15 '15 at 22:17
  • 1
    See my edit for clarification. – charliebeckwith Jun 15 '15 at 22:53
  • Thanks for elaborating! As someone new to the game, I really appreciate learning the design philosophy and a little about design trends in addition to just the technical how to's. I'll have to think on it more. And I could definitely do with some practice using fragments, ViewPagers, and tabs. Thanks again for taking time to help!!! – ThePartyTurtle Jun 15 '15 at 23:06