How can I style Android tabs to get 3d look? -


i want create android tab view image: 3d tab bar

i guess there many ways rome, think still haven't found ideal one. idea cut out divider , active divider , place them between buttons. however, don't know if such solution because still need different styling first , last button. have 9 patch surrounding (grey) container.

i've thought making red 9 patch red bar, , style selected button. problem solution i'd still have place top diagonal white lines according number of buttons.

does have better solution me?

here's approach: separate header tabs. bit complicated, yes, benefits are:

  1. it allows define common tabs style;
  2. supports number of buttons.

layout

on picture buttons of different width, in reality additional imageview may needed left of header.

let's create our header view linearlayout. can put upper dividers , stretchable gaps same layout_weight.

public class headerlayout extends linearlayout {      public headerlayout(context context) {         super(context);         initview();     }      public headerlayout(context context, attributeset attrs) {         super(context, attrs);         initview();     }      public void setnumberofcolumns(int number) {         removeallviews();         (int = 0; < number; i++) {             addview(getcolumnview(), getcolumnlayoutparams());             // don't need divider after last item             if (i < number - 1) {                 addview(getdividerview(), getdividerlayoutparams());             }         }     }      private void initview() {         setbackgroundresource(r.drawable.header_bg);     }      private view getcolumnview() {         return new view(getcontext());     }      private view getdividerview() {         imageview dividerview = new imageview(getcontext());         dividerview.setimageresource(r.drawable.header_divider);         dividerview.setscaletype(imageview.scaletype.fit_xy);         return dividerview;     }      private layoutparams getcolumnlayoutparams() {         return new layoutparams(0, layoutparams.match_parent, 1.0f);     }      private layoutparams getdividerlayoutparams() {         return new layoutparams(layoutparams.wrap_content, layoutparams.match_parent);     }  } 

where r.drawable.header_bg 9patch:

r.drawable.header_bg

and r.drawable.header_divider simple (optionally transparent) bitmap:

r.drawable.header_divider

for me personally, making different background first , last button least difficult solution, depends on actual task.


Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -