how to put some finishing touches (rounded edges and horizontal divider) on my custom tabs

Question

This is a follow up to my last question Link

I wanted to make some small adjustments to the look of the tabs. I accomplished this by passing a view into setIndicator() instead of a charSequence and icon.

the problem: now I have to totally recreate the look and feel of the tabs (I just wanted some small changes). oh well, I've got some tabs working now that are ok.

There are basically two things that I can't seem to recreate.

the main one being:(1) I wan't a horizontal bar right under my tabs (same color as the selected tab) like the one that is there by default.

here are my tabs:

here are some tabs from developer.android.com

The other is less important but would be really nice. (2) how to make them actually look like tabs instead of rectangles (curved edges, like in the second image). I assume this has to do with the divider I put in. I'm not a graphic designer though, are their any good resource for these images. also, I would like to do it in a way that has at least some hope of not breaking in the future.

anyone has any suggestions (especially for Q:1), that would be much appreciated. I had hoped to throw in a little padding, and now, 4 days of learning to make custom tabs. lol

Answer 1

I haven't got it all working yet, but in case anyone else is having trouble with this, here is what I learned.

for rounded corners (2): put something like this in the drawable you use for your tab indicator background. for me (and probably most others) that means nesting it within the shape tag in both 'tab_selected.xml' and 'tab_unselected.xml'

<corners android:bottomLeftRadius="0dp"
         android:bottomRightRadius="0dp" 
         android:topLeftRadius="5dp"
         android:topRightRadius="5dp" />

Note: What I would usually call a 'tab' in common language I believe is technically called a 'tab indicator' on android.

For the horizontal divider below the tab indicators (1): I am a little less clear on this still, but I think you could (1:a) add another shape tag to 'tab_unselected.xml' that will draw the line you specify.

alternatively, I believe you can (1:b) specify a drawable to use by setting 'tabStripEnabled', 'tabStripLeft', and 'tabStripRight' properties of the tabWidget.

Those are not so clear to me though.

well, I hope that can help someone struggling with this to at least get some ideas.