web-dev-qa-db-fra.com

Modification des icônes TabLayout à gauche, en haut, à droite ou en bas dans com.Android.support:design:23.1.0

Je suis assez nouveau pour Android. Alors soyez indulgent avec moi.

J'ai essayé d'aligner l'icône et le texte sur la même ligne dans com.Android.support:design:23.1.0 pendant une journée.

Apparemment, dans com.Android.support:design:23.1.0, ils ont changé la position par défaut de l'icône en haut et le texte en bas.

Auparavant dans com.Android.support:design:23.0.1 la valeur par défaut était l'icône à gauche et le texte sur la même ligne que l'icône

Voici donc un moyen facile pour le résoudre (bien qu'il puisse avoir des inconvénients, idk tbh):

change the version in your app's build.gradle. ex: 23.1.0 to 23.0.1 and build.

Et il y a une meilleure façon de le faire (de cette façon, vous pouvez également aligner les icônes à gauche, à droite, en haut, en bas):

  1. créer un custom_tab.xml dans res/layout 
<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:textAlignment="center"/>

2. dans votre activité Java

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);

Jusqu'à présent, j'ai réussi à faire apparaître des icônes de n'importe quel côté comme ceci:

TabLayout icons

PS: les arguments de la fonction setCompoundDrawablesWithIntrinsicBounds sont 4 icônes latérales comme ceci:

setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)
androidandroid-support-libraryandroid-tablayoutandroid-support-design
23
Atu

Merci Atu pour cette bonne astuce!

Dans mon cas, je dois ajouter une disposition linéaire pour centrer le titre de la mise en page. J'ai également ajouté quelques caractères d'espace pour obtenir une marge entre l'icône et le texte.

custom_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:gravity="center">
    <TextView
        Android:id="@+id/tabContent"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:textAlignment="center"
        Android:textColor="@Android:color/white"
        Android:gravity="center"/>
</LinearLayout>

Code d'initialisation:

LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);
6
quent

J'ai la solution exacte que vous voulez.

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabLayout"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabInlineLabel="true"
    app:tabPaddingStart="@dimen/default_10dp">

En utilisant la propriété ci-dessous, vous pouvez obtenir le résultat du désir.

app: tabInlineLabel = "true"

26
Mayuresh Deshmukh

Utilisez le même code xml donné par @juzamn et ajoutez simplement ces petits ajustements à la boucle pour l'onglet entier

for (int i = 0; i < tabLayout.getTabCount(); i++ ) {
 yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null);
 tab_text = (TextView) yourlinearlayout.findViewById(R.id.tabContent);
        tab_text.setText("  " + tab_titles[i]);
 tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
    tabLayout.getTabAt(i).setCustomView(tab_text);}
1
XY-JOE

En fait, j'ai trouvé un moyen plus élégant (IMO) de le faire sans même utiliser des mises en page personnalisées et en utilisant simplement la mise en page par défaut actuelle pour les mises en page. Chaque élément de mise en page d'onglet est en fait un Disposition Linéaire Verticale, le 1er élément étant une ImageView et le 2ème élément le TextView.

La méthode consiste donc à changer l'orientation LinearLayout de l'onglet en Horizontal. Après cela, l'icône sera positionnée à gauche. Maintenant, si vous voulez le positionner à droite, vous pouvez supprimer ImageView (qui est le 1er élément) et l'ajouter au LinearLayout, il sera ajouté comme dernier élément ainsi positionné à la fin de TextView, mais vous devra jouer avec les paramètres de mise en page afin de l'afficher correctement aligné et dimensionné.

Ainsi, au lieu de rajouter ImageView à la fin de LinearLayout, vous pouvez simplement ajouter le dessinable en tant que dessinable composé au TextView. ajoutez-y un peu de rembourrage, et le tour est joué.

LinearLayout tabItemLayout = (LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex);
tabItemLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iconView = (ImageView) tabItemLayout.getChildAt(0);
TextView textView = (TextView) tabItemLayout.getChildAt(1);
// remove the icon view
tabItemLayout.removeView(iconView);
// add the icon as compound drawable
textView.setCompoundDrawablesWithIntrinsicBounds(null, null, iconView.getDrawable(), null);
// set some padding
float DP = Resources.getSystem().getDisplayMetrics().density;
int padding = (int)(10 * DP);
textView.setCompoundDrawablePadding(padding);

Avec cette méthode, nous n'avons pas besoin d'une mise en page personnalisée et nous n'avons pas besoin de gonfler quoi que ce soit, nous réutilisons simplement les vues existantes.

1
Raphael C