cómo conseguir esta barra de pestañas

Question

cómo conseguir el siguiente diseño de una barra de pestañas

Cuando una ficha se ha seleccionado el botón de la curva debe visible en la pestaña en particular y la otra para estar en común.

pensé en agregar un color de fondo fijo para ser rojo y tengo que colocar los botones de una imagen con curva y sin curva. Pero quiero saber si se arregla para todos los dispositivos Android, porque wat es el botón de alto y ancho? cómo configurar una barra de pestañas de altura y ancho fijos ....

Answer 1

me encontré por una forma simple de la siguiente manera

Para obtener la línea roja en la parte inferior de la barra de pestañas que he añadido una view bajo la etiqueta de la siguiente manera

<TabHost 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:id="@+id/linearLayout1" 
     android:layout_height="fill_parent" 
     android:orientation="vertical"> 

     <TabWidget 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:id="@android:id/tabs" 
      android:layout_alignParentBottom="true" 
      android:layout_weight="0"> 
     </TabWidget> 

     <View android:layout_width="fill_parent" android:layout_height="4dip" android:background="#ff0000" /> 

     <FrameLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:id="@android:id/tabcontent" 
      android:layout_weight="1"> 
     </FrameLayout> 

    </LinearLayout> 
</TabHost> 

Entonces mi clase de barra de pestañas es el siguiente

public class CustomTabActivity extends TabActivity 
{ 
    @Override 
    public void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.tabbar); 

     addTab1(FirstTab.class); 
     addTab2(SecondTab.class); 
     addTab3(FirstTab.class); 
     addTab4(SecondTab.class); 
    } 

    private void addTab1(Class<?> c) 
    { 
     TabHost tabHost = getTabHost(); 
     Intent intent = new Intent(this, c); 
     TabHost.TabSpec spec = tabHost.newTabSpec("tab"); 

     View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false); 
     ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1); 

     spec.setIndicator(tabIndicator); 
     spec.setContent(intent); 
     tabHost.addTab(spec); 
    } 
} 

Mi diseño es el siguiente tab_indicator

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="0dip" 
    android:layout_height="55dip"  
    android:layout_weight="1" 
    android:orientation="vertical" 
    android:padding="5dp"> 

    <ImageView android:id="@+id/icon1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:background="@drawable/tab1">  
    </ImageView> 
</RelativeLayout> 

la Tab1 en el dibujable es un archivo XML de selección de la siguiente manera

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_focused="false" android:state_selected="false" 
     android:state_pressed="false" android:drawable="@drawable/home" /> 
    <item android:state_focused="false" android:state_selected="true" 
     android:state_pressed="false" android:drawable="@drawable/home_select_btn" /> 

</selector> 

Aquí he añadido la imagen seleccionada con una curva y la imagen seleccionada y sin curva, que yo quiero mostrar.

Esta forma parece ser muy larga, pero creo que es el mismo diseño que necesitaba.

Answer 2

Tal vez this example le será útil. Es el mismo tipo de navegación que tiene la aplicación de Google+.