Texte et icône dans Android tablayout

Question

Je suis en train de réaliser ce

J'ai construit le tablayout mais ne pouvait pas trouver un bon moyen d'ajouter des icônes avant que le texte sur le côté gauche.

J'ai essayé .setIcon() mais les icônes est placé au-dessus du texte.

Note: J'utilise com.android.support:design:25.1.1'

Answer 1

vous devez setIcon pour Tab dans TabLayout. suivez le lien suivant http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Answer 2

utilisation ci-dessous le code pour définir l'icône à gauche du texte

private void setupTabIcons() { 
     TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
     tabOne.setText(R.string.order_detail); 
      tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0); 
     tabLayout.getTabAt(0).setCustomView(tabOne); 

     TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
     tabTwo.setText(R.string.payment_status); 
      tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0); 
     tabLayout.getTabAt(1).setCustomView(tabTwo); 

     TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
     tabThree.setText(R.string.locate_customer); 
      tabThree.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0); 
     tabLayout.getTabAt(2).setCustomView(tabThree); 

     TextView tabFour = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
     tabFour.setText(R.string.call_customer); 
      tabFour.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0); 
     tabLayout.getTabAt(3).setCustomView(tabFour); 

    } 

et custom_tab.xml

<?xml version="1.0" encoding="utf-8"?> 
<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/tab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:drawablePadding="5dp" 
    android:textColor="@android:color/white" 
    android:textStyle="bold" 
    android:textSize="15sp" /> 

Answer 3

essayer creat une mise en page de custom_tab comme celui-ci

<?xml version="1.0" encoding="utf-8"?> 
<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/tab" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:gravity="center" 
android:textColor="#FFFFFF" /> 

icône ensemble d'onglets maintenant et titre de l'onglet selon vos besoins

TextView tvHome = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
    tvHome.setText("Home"); 
    tvHome.setTextSize(13); 
    tvHome.setTypeface(Typeface.DEFAULT_BOLD); 
    tvHome.setCompoundDrawablesWithIntrinsicBounds(0, R.drawble.ic_icon, 0, 0); 
    tabLayout.getTabAt(0).setCustomView(tvHome); 

Answer 4

Utilisez setCustomView sur la Tablayout et appliquez votre mise en page souhaitée

Voici un Example

Dans le code:

private void createTabIcons() { 

    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
    tabOne.setText("Tab 1"); 
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_dash26, 0, 0); 
    tabLayout.getTabAt(0).setCustomView(tabOne); 
} 

dans votre layout/custom_tab

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/tab" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:gravity="center_horizontal" 
android:textColor="#FFFFFF" 
android:textSize="@dimen/tab_label" 
android:textStyle="bold" /> 

Sortie

Answer 5

Il y a beaucoup de remorquage pour y parvenir.

Première façon Vous devez créer une mise en page xml séparée (avec TextView et ImageView selon vos besoins) pour cela et définir cela sur la mise en page. Comme cette

tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom)); 
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom)); 

Maintenant, vous pouvez définir un nom différent et l'onglet texte de mise en page comme:

façon

for (int i = 0; i < tabLayout.getTabCount(); i++) { 
      View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i); 
      TextView textView = (TextView) tab.findViewById(R.id.textView); 
      ImageView imgView = (ImageView) tab.findViewById(R.id.imageView); 
       if (i == 0) { 
        textView.setText("TAB 1"); 
        imgView.setImageResource(R.drawable.img1); 
       } else if (i == 1) { 
        textView.setText("TAB 2"); 
        imgView.setImageResource(R.drawable.img2);     
    } 

} 

deuxième est, voir ce tutorials