 |
| From an Android app that I'm working on |
Q.) Can I just have the code, please?
A.) Sample Project here.
What's in this post?
- Creating simple tabs
- Adding some styling to the tabs
- Detecting when tabs are pressed
- Additional suggestions/ideas
Simple tabs & styles
Android makes it very easy to add boilerplate tabs to any application without doing much work. The documentation for the tab layout shows a simple example, but more often than not its not enough or even useful. Lets take the next steps towards creating beautiful tabs.
Start by creating a simple Activity that inherits from TabActivity:
Now create the layout which will show the tabs and their content:
The key components here are: TabHost, TabWidget and FrameLayout. TabHost is the container within which Android manages tabs. TabWidget is the component that visually contains the tabs (usually horizontally in a row). FrameLayout will show content when a tab is selected.
Now that we've created the core infrastructure for the tabs lets design a basic tab.
There are 5 things to worry about here. The main layout (@+id/tab)holds the styling for the tab. You can make the view very complex by showing notification #s (kinda like Facebook shows their notification indicator) and what not, but lets keep it simple here. @+id/tabLabel will show whatever text you'd like to show for the tab. Try adding an image instead of a text view if you'd like to show icons instead. @+id/tabSelectedDivider highlights whichever tab is selected and @+id/tabDivider just adds a nice highlight under the tabs. Finally, @+id/tabSplitter adds a subtle vertical separator between tabs. These elements are more for aesthetics than for functionality (except tabLabel :p).
So far so good. Now lets hook in this individual tab view the activity layout. Start by adding some required objects right above the onCreate method of your TabActivity:
The 0.5f that you see there is the weight of the layout. What that means is that the tab will take 50% of the real estate that its parent (tabWidget) has, which in this case can expand to 100% width of the screen. For example, if you wanted 4 tabs, you could change 0.5f to 0.25f. Next, we need services to handle the tabs and to use the custom tab view that we created. Add these to the onCreate method:
Now to hook in the tab view to the tab widget. Add this under the the previous step:
The comments pretty much state whats going on, but just to reiterate we create handles to the tab view, add some text to it, link it to another activity (to show some content) and add the tab to the tab manager. Add another tab:
Now, just to show that clicking each tab actually works and changes something, create a dummy activity, which accepts a parameter passed in from the tab and displays it in the FrameLayout for the tab activity.
Detecting When Tabs Are Pressed
Ok cool, now that the basics work, you can jump to more interesting stuff. Tabs are useful for showing segmented data. For such a scenario it's very meaningful for the user to see which of these segments s/he is looking at. Web apps add sprites, which move as the mouse hovers over buttons, etc. Android can accomplish this via state lists, what are the pseudo classes in CSS. I've decided to add a subtle line under the selected tab. Heres how to do that:
This snippet will detect when a tab is pressed and react accordingly to indicate to the user that the press was registered giving a satisfying feel.
Additional Suggestions
There can be a million ways tabs can be created. I've shown you the core of whats required and how to style tabs. In some of my other projects I've created tabs with icons and text, with just icons, with just text, with sprites, with changing text. You can even make vertical tabs (not recommended) if you'd like. Just play around with it (Of course shoot me a comment if you have questions). I also recommend researching mobile patterns (mobile-patterns.com, androidpatterns.com) to learn more about what goes and what doesnt. Also, if you prefer to view the snippets I've used here, visit:
gist.github.com/nitindhar7
Now that we've created the core infrastructure for the tabs lets design a basic tab.
There are 5 things to worry about here. The main layout (@+id/tab)holds the styling for the tab. You can make the view very complex by showing notification #s (kinda like Facebook shows their notification indicator) and what not, but lets keep it simple here. @+id/tabLabel will show whatever text you'd like to show for the tab. Try adding an image instead of a text view if you'd like to show icons instead. @+id/tabSelectedDivider highlights whichever tab is selected and @+id/tabDivider just adds a nice highlight under the tabs. Finally, @+id/tabSplitter adds a subtle vertical separator between tabs. These elements are more for aesthetics than for functionality (except tabLabel :p).
So far so good. Now lets hook in this individual tab view the activity layout. Start by adding some required objects right above the onCreate method of your TabActivity:
The 0.5f that you see there is the weight of the layout. What that means is that the tab will take 50% of the real estate that its parent (tabWidget) has, which in this case can expand to 100% width of the screen. For example, if you wanted 4 tabs, you could change 0.5f to 0.25f. Next, we need services to handle the tabs and to use the custom tab view that we created. Add these to the onCreate method:
Now to hook in the tab view to the tab widget. Add this under the the previous step:
The comments pretty much state whats going on, but just to reiterate we create handles to the tab view, add some text to it, link it to another activity (to show some content) and add the tab to the tab manager. Add another tab:
Now, just to show that clicking each tab actually works and changes something, create a dummy activity, which accepts a parameter passed in from the tab and displays it in the FrameLayout for the tab activity.
Detecting When Tabs Are Pressed
Ok cool, now that the basics work, you can jump to more interesting stuff. Tabs are useful for showing segmented data. For such a scenario it's very meaningful for the user to see which of these segments s/he is looking at. Web apps add sprites, which move as the mouse hovers over buttons, etc. Android can accomplish this via state lists, what are the pseudo classes in CSS. I've decided to add a subtle line under the selected tab. Heres how to do that:
This snippet will detect when a tab is pressed and react accordingly to indicate to the user that the press was registered giving a satisfying feel.
Additional Suggestions
There can be a million ways tabs can be created. I've shown you the core of whats required and how to style tabs. In some of my other projects I've created tabs with icons and text, with just icons, with just text, with sprites, with changing text. You can even make vertical tabs (not recommended) if you'd like. Just play around with it (Of course shoot me a comment if you have questions). I also recommend researching mobile patterns (mobile-patterns.com, androidpatterns.com) to learn more about what goes and what doesnt. Also, if you prefer to view the snippets I've used here, visit:
gist.github.com/nitindhar7