Onglets personnalisés TabWidget - problèmes de marge supplémentaire et d'alignement de texte non désirés

Question

J'utilise TabWidget pour obtenir la navigation par onglets. Chaque vignette a une icône et un texte en dessous. Comme le contenu de mon onglet, j'ai actuellement une liste de cartes. Ainsi, le bouton onglet Mise en page:

<LinearLayout android:id="@+id/tabsLayout" 
       xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 

       android:gravity="center" 
       android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/tab_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" android:layout_gravity="bottom|center"/> 

    <TextView android:id="@+id/title" 
       style="@android:style/TextAppearance.Holo.Medium" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:textColor="#000000" 
       android:text="test" 
       android:visibility="visible" 
       android:focusableInTouchMode="false" 
       android:layout_gravity="center" 
       android:textIsSelectable="true" android:textSize="13sp" 
       android:textAlignment="center" 
       android:gravity="center_horizontal"/> 
</LinearLayout> 

Mon activité widget où onglet est utilisé:

<?xml version="1.0" encoding="utf-8"?> 
<TabHost 
    android:id="@android:id/tabhost" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="vertical"> 

     <FrameLayout 
      android:id="@android:id/tabcontent" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:layout_weight="0"/> 

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

     <TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_weight="0" 
      android:orientation="horizontal" android:background="#84dadada"/> 

    </LinearLayout> 
</TabHost> 

FrameLayout est pour remplacer le contenu de l'onglet avec des fragments lorsque le commutateur d'utilisateur entre les onglets. Cela fonctionne, mais il y a quelques problèmes cependant. Voici à quoi cela ressemble:

Comme vous pouvez le voir, le premier problème est l'alignement des icônes. Si le texte est enroulé en multiligne (grande police et petit écran), l'icône n'est pas alignée avec les autres qui ont une étiquette de ligne. Comment faire pour que toutes les icônes soient correctement alignées? Deuxièmement - il y a de l'espace supplémentaire blanc juste au-dessus de mon contrôle de tabulation - pourquoi? Comment le désactiver?

Des idées?

[modifier] Mon est définie comme Vignettes suit:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="horizontal" 
       android:padding="3dp" 
    > 

    <android.support.v7.widget.CardView android:id="@+id/card_view" 
             xmlns:card_view="http://schemas.android.com/apk/res-auto" 
             android:layout_width="match_parent" 
             android:layout_height="100dp" 
             android:layout_gravity="center_vertical" 
             android:background="?android:attr/selectableItemBackground" 

             card_view:cardCornerRadius="0dp" 
             card_view:cardElevation="dp" android:clickable="false"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_gravity="center_vertical" 
      android:orientation="horizontal"> 

      <ImageView 
       android:id="@+id/card_image" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical" 
       android:layout_weight="2" 
       android:padding="6dp" 
       android:src="@drawable/ic_launcher"/> 

      <LinearLayout 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="5" 
       android:orientation="vertical" 
       android:padding="4dp"> 

       <TextView 
        android:id="@+id/card_name" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:padding="2dp" 
        android:text="Large Text" 
        android:textAppearance="?android:attr/textAppearanceLarge" 
        android:textStyle="bold"/> 

       <TextView 
        android:id="@+id/card_info" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:padding="2dp" 
        android:text="Small Text" 
        android:textAppearance="?android:attr/textAppearanceSmall"/> 

      </LinearLayout> 

      <ImageView 
       android:id="@+id/arrow" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical" 
       android:layout_weight="1" 
       android:padding="6dp" 
       android:src="@drawable/arrow"/> 

     </LinearLayout> 


    </android.support.v7.widget.CardView> 



</LinearLayout> 

Il semble qu'il y ait une marge supplémentaire autour Vignettes - haut, en bas, à gauche et à droite. Comment le désactiver?

Answer 1

Pour le problème d'espace, jetez un oeil here, il peut être une réponse en double. Pour l'alignement des icônes, jetez un oeil here, il montre comment garder votre texte sur une seule ligne et utiliser des points de suspension pour le tronquer si votre appareil n'a pas de place pour l'afficher entièrement. Ce n'est peut-être pas votre solution parfaite, mais c'est un bon indice.