Hello and welcome to this lecture where we'll learn about tabs another essential Android component.
Their main purpose is to separate content across different screens.
There's only one major rule you have to keep in mind the content in each tab needs to be at the same
level of hierarchy.
Practically this means your tabs should show things that make sense together.
If it's a music app you might see pop rock hip hop and so on.
If it's a store you might see appliances cell phones cameras.
It's very intuitive.
Once you consider what you shouldn't do say it's a food delivery app and it shows Italian Indian and
then settings that obviously doesn't work because settings belongs in a completely different place in
the app.
Plus in general the wireframe will very likely show you the information architecture so there's little
chance you're going to mess this up.
Okay tabs can be divided in many ways depending on what interests you from a navigation standpoint they
can be fixed or scroll all fixed tabs look better but you're limited to four entries their width in
pixels is determined by their number and here's the math two tabs means 360 pixels per tab three tabs
equals 240 per tab and if you want for 180 is all you get the easy way to arrange these items in Photoshop
is to create the rectangle that shows the active tab.
This is always four pixels tall.
Input your desired width say 240 pixels and left align it.
Now send to the text or icon with it three tabs means you'll need three individual text letters in case
we're talking scroll label tabs the distance from the left side needs to be 104 pixels and then your
active rectangle starts of course the word itself needs to be centered inside it so make sure you don't
get confused about the distance so again leave 104 empty pixels from the imaginary block that's determined
by the rectangle not the word itself regarding the tab the minimum width is 180 pixels.
This means you'll get two and a half tabs in one screen but there shouldn't be a problem considering
you want to show the user you have lots of tabs when you see it in action you'll see it makes sense
as the active tab becomes apparent through a nice animation moving along another way to look at tabs
is based on their label it can be text icon or text and icon but as you probably already assume you
never mix and match them if you've used to text labels never add a third one that's an icon it doesn't
make sense.
Choose one path and that's it.
That's a very simple rule that keeps you on track of course these three choices have specific size settings
so let's see what's what.
Option 1 with text labels is the most popular choice due to its size its background is 96 pixels tall.
This of course ties into your action bar and status bar.
Just a reminder the entire thing on a 720 standard outboard is 256 pixels tall.
If you choose the icon route that uses the same height for the background 96 pixels the icons themselves
have to be kept to the size of 48 by 48 pixels.
In case your icon is irregular in shape you can use a rectangle with that specific size to guide you.
An alternative is the options bar through controlled C hit the chain icon switch to pixels and whatever
value is higher needs to be replaced with 48 pixels and the other one will follow suit.
I'm not a fan of tabs with icons alone as it's pretty hard to understand what's behind them.
I'd stay away from that option unless the icons are extremely intuitive and very well known.
This group is reserved for search G.P.S. phone Wi-Fi and very few other ones.
The third and final option for the label is text and icon combined.
Which I'm not a fan of because of the height considerations.
This requires a background of 144 pixels vs. the 96 for a single line tab system.
So there's quite a difference between them.
They look nice but we're losing precious space.
Now there's something to be said about a scrolling feature where the action bar goes away when you scroll
down but we're not going to focus on movement because it's very difficult to add that to our projects.
Know that it's not the end of the world to eat up a bit of space at the top but most apps rock a label
system for this reason.
By the way IOW users are very much familiar with a bottom navigation system while Android has a bottom
bar as well.
It never features tabs that means that all we've covered so far has only one place at the top of your
app.
We'll talk about the bottom navigation later on in the course and that's because I don't consider it
an essential component going back to our subject stick to text labels and try to avoid very long names.
If that can't be avoided use dot dot dot at the end.
Even though Google says it may confuse the user their alternative is to increase the height of the component
but that's far worse in my book.
This brings us to the state of our tabs.
There's two of them active with that four pixels rectangle underneath it.
Sporting a color that provides maximum contrast and inactive where the text layer has a washed outlook
and no additional decoration.
From my experience most of my headers are brightly colored so my active text label and the rectangle
underneath can be pure white.
I do sometimes deviate to make the rectangle yellow or another bright color but only when the color
combination isn't jarring.
Please note the active tabs text letter should never be any other color than white.
If the background is colored if that's white.
Sure you can use whatever text color you want.
That's another thing but know that white headers aren't very common on Android finally I want to talk
about breaking the rules.
Google says you should not nest tabs which means we shouldn't have any two tab systems on one screen
for my apps.
That's a big problem because I have many categories and subcategories I have keyboard themes S.M. s
themes launches and so on.
But then when you decide on S M S themes I have another breakdown.
Best themes VIP themes and so on.
It's inevitable I'll need a navigation system that has two rows of tabs.
Now we're constantly experimenting with the placement of the second tab system.
But the idea is that the information architecture of the app its very nature requires something that
goes against the rules.
Thus we don't care about Google's recommendations and we implement whatever works best.
And actually if you look at this screenshot you can see they did something that might be perceived as
against their own rules in their own Google Play app.
They also have a lot of things to show so they had to include this secondary navigation.
To be fair this second road doesn't act like a tab system but it's very similar.
So I want to leave you with this idea in mind.
Sometimes rules need to be broken as long as you follow the design principles described in this course.
You can step outside the box and create beautiful usable apps no matter if you follow Google's guide
and now it's time for an exercise.
What I want you to do is create five headers of your own by header I mean a status bar an action bar
and a tab system all combined.
The purpose is to get you familiar with the process of setting things up in photoshop and experimenting
with various colors and layouts.
In general we won't work in isolated conditions.
We'll have an entire set of things to consider.
But here I want you to try it out and have fun.
So that's five different headers in any style you want in any layout for the icons of attach some resources
to this lecture.
But you can use any other set.
Please post your work in the comments section and ideally you should place them one underneath the other
in one single outboard.
Have fun with it.
I'll see you in the next lecture.