How I added navigation tabs at the top of my Android App

Milind Juttiga
4 min readJan 5, 2017

--

I started leaning Android app development roughly two months ago. I had gone through Bucky’s tutorials

https://thenewboston.com/videos.php?cat=278&video=27335

as well as Head First Android Development (Both not completely). Both of them are adequate enough to make a simple android app but not the ones with higher functionality and designs (I may have missed some as I didn’t cover them completely). One of them was the navigation tabs.

Navigation tabs are below the search bar

I started googling and found various tutorials, most of them are in the same way as this tutorial

https://github.com/codepath/android_guides/wiki/ActionBar-Tabs-with-Fragments

But first and foremost the prerequisite for creating them is that you need to have fragments. But I skipped fragments (I know! Its quite important) because I didn’t need them in my previous super simple app. Some tutorials even mentioned I need to be knowing about View pager. I considered quitting the whole thing. But I calmed myself for around 2 hours (This is an important thing. Software development can make you go crazy for some time if you are not in a peace mode. So, take some rest if you get such thoughts and start again. I watch The Social Network movie https://en.wikipedia.org/wiki/The_Social_Network whenever I feel in such a way. It’s a great movie if you don’t know).

After that, I started learning fragments from my Head first Android development book and I completed it in an hour and found it quite easy (See, peace of mind!). I thought I would understand about View pager going through the tutorial and started the one I wrote at the top

After some coding, I found some methods were dashed and popped up an error saying the “method is deprecated” (I don’t remember the exact name. I know! I should have taken a screenshot). Then I went back to the top of the tutorial and found this.

The reason I told you this story was the libraries and the design principles for Android App development is evolving a lot faster and the internet is filled with tutorials for previous ones without any such note (I have gone through another tutorial initially, not the one I mentioned and it didn’t have a note). Whenever you start out googling for something it’s better you google it first in a more general way like “tabs at the top of android app” and go through the OFFICIAL DOCUMENTATION (Wait, don’t go away. I know it sucks. Just read, it’s not over yet). Then find the key parts and find a way to google with a little bit more technical way like “Tab Layout”. It’s because the internet is flooded with the old tutorials it’s difficult to find the ones which are not deprecated with general terms.

After that, I started going through this tutorial

This tutorial was enough to achieve for the one I am hoping for. After completing the whole thing with minor changes and my own fragments, I got the tabs but the fragment was not visible (I know! it’s horrible). I followed the exact steps and I know there is nothing wrong in the Java code and my fragments xml. I started going through the main xml snippets I copied and found the error.

The android:layout_weight = “1” didn’t work because mine was a Relative layout and the one in tutorial is a Linear Layout. So I removed the weight attribute and made android:layout_height = “wrap_content”. And look what I made

I know it’s simple. But it’s great.

It was successful and it took me 4 hours to figure it but learnt a lot more than I wanted. I wanted to create a simple appointment app with a Flask backend.

https://en.wikipedia.org/wiki/Flask_(web_framework)

I made this post so people who are searching like me can reduce their time and get to know how to search better.

Thank you for reading such a long post and sorry if there are some typos. Hope it helps.

May the force be with you!

--

--