Question

I want to design something like this in android..See the Buttons Bar -> New Deals, NewCoupons, New Categories.

Again see the top portion of that Buttons Bar -> Its something like horizontal scroll view.

How to design such type of layouts in android. ?

Answer 1

See this class http://code.google.com/p/deezapps-widgets/ for implementing a horizontal scroll view.

The buttons bar can be implemented using a TabWidget as Phonon suggests.

To implement a button bar

1. Call tabSpec.setIndicator(buildIndicator(tabName))

2. Build your view with something like:

   private View buildIndicator(String text) {
       final TextView indicator = (TextView) getLayoutInflater().inflate(R.layout.tab_indicator, null);
       indicator.setText(text);
       return indicator;
   }
   

3. tab_indicator.xml:

   <TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tab_label"
   android:layout_width="0dip"
   android:layout_height="fill_parent"
   android:layout_weight="1"
   android:textColor="@color/white"
   android:gravity="center"
   android:textSize="14sp"
   android:textStyle="bold"
   android:minHeight="38dp"
   android:background="@drawable/bgtab"/>
   

4. bgtab is a selector drawable with

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:state_pressed="true"
       android:drawable="@drawable/bg_tab_default"
       />
   <item
       android:state_selected="false"
       android:state_focused="false"
       android:state_pressed="false"
       android:drawable="@drawable/bg_tab_default"
       />
   <item       
       android:state_selected="true"
       android:state_focused="false"
       android:state_pressed="false"
       android:drawable="@drawable/bg_tab_selected"
       />
   <item
       android:state_focused="true"
       android:state_selected="true"
       android:state_pressed="false"
       android:drawable="@drawable/bg_tab_selected"
       />
   

This is mostly from the Google I/O app. bg_tab_selected/default will be 9-patch PNGs which when expanded will be shaped like buttons.