Question

Can anyone please help me creating highly customized UI as shown below.

Labels: tab1 | tab2 | tab3
==========v===============
  Customized ListView
  ...

I managed to create the Customized ListView. My problem is creating the Customized tabs.

With help of few tutorials and examples on net, I used Customized TextView for creating Customized Tabs. My problems are:

1. how to show an ‘down arrow’ exactly below the selected tab/View and overwrite a part of double line below the tabs.

2. As you can see from the design, the first one is the Lable text and then the tabs. Because of this the tab Content covers only the area below the tabs and leaves area below Labels empty. Something like this

   Labels: tab1 | tab2 | tab3
   ==========v===============
        Customized ListView
               ...
   

How can I cover the whole width of the screen through XML settings?

I am able to solve my first problem as follows. I created a custom tab in the following way:

    LinearLayout(Vertical Oriantation)
    ---- TextView
    ---- RelativeLayout
         ----LinearLayout
             ---- double Line
         ----DownArrow ImageView(with android:layout_centerInParent = "true", this made the arrow over write the double line)

And finally through programming made DownArrow ImageView Invisible and Visible according to the tabs selected.

I am still stuck with the my second Problem.

Answer 1

The most easy solution to your problem is you have a LinearLayout with three Buttons (or TextViews) which will hide your tab. Then you should add the required style to these buttons and implement all the required onclick functionality (i.e. set unselected the other two views, etc, etc), but you gain time by not be obliged to style the tabs, which is a pain.

Hope this helps!