web-dev-qa-db-fra.com

Changer la couleur de fond d'un onglet dans TabLayout (bibliothèque de prise en charge de la conception Android) n'occupe pas tout l'espace disponible

J'ai un TabLayout (bibliothèque de support de conception) qui est lié à un ViewPager contenant trois onglets. J'ai conçu une mise en page personnalisée et l'ai configurée pour chaque onglet du TabLayout. J'ai essayé de changer la couleur de fond de l'onglet actuellement sélectionné. La couleur entoure uniquement le texte de l'onglet mais n'occupe pas tout l'espace de celui-ci.

Vous trouverez ci-dessous les extraits de code de mon activité et le fichier de présentation personnalisé.

Code d'activité 

public class CustomTabLayoutActivity extends AppCompatActivity {

private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_tab_layout);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    setupTabLayout();
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                if (i == position) {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
                } else {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}


private void setupViewPager(ViewPager viewPager) {
    CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
    pagerAdapter.addFragments(new OneFragment(), "ONE");
    pagerAdapter.addFragments(new OneFragment(), "TWO");
    pagerAdapter.addFragments(new OneFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);
}

private void setupTabLayout() {

    TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    customTab1.setText("ONE");
    tabLayout.getTabAt(0).setCustomView(customTab1);
    customTab2.setText("TWO");
    tabLayout.getTabAt(1).setCustomView(customTab2);
    customTab3.setText("THREE");
    tabLayout.getTabAt(2).setCustomView(customTab3);
}
}

Fichier de disposition personnalisée pour chaque onglet

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
   Android:id="@+id/tab"
   Android:layout_width="match_parent"
   Android:layout_height="match_parent"
   Android:layout_gravity="center"
   Android:background="#ffffff"
   Android:text="Test"
   Android:textColor="@Android:color/black"
   Android:textSize="20sp" />

Voici la capture d'écran des onglets après l'exécution du code ci-dessus.

enter image description here

Comme vous pouvez le constater, la couleur n’occupe que le texte de l’onglet, mais pas tout l’espace. Comment y parvenir? Toutes les idées/suggestions m'aideraient beaucoup. Merci d'avance.

androidandroid-design-libraryandroid-tablayout
28
Itapu Vinay

Définissez un sélecteur comme dessinable et ayez-le également pour les états sélectionné/non sélectionné.

Pour cette solution, j'ai commencé avec le code de cette réponse , puis j'ai ajouté la fonctionnalité qui modifie la couleur d'arrière-plan de l'onglet en cours.

Premièrement, le sélecteur, tab_background.xml Dans le dossier pouvant être dessiné:

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

Ensuite, tab_background_selected.xml Dans le dossier pouvant être dessiné:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#d13fdd1a" />
</shape>

Ensuite, tab_background_unselected.xml Dans le dossier pouvant être dessiné:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#3F51B5" />
</shape>

Enfin, dans votre styles.xml, Spécifiez le sélecteur à utiliser, ainsi que le style d'indicateur de tabulation, car la propriété app:tabIndicatorColor Dans TabLayout sera désormais ignorée:

<style name="Base.Widget.Design.TabLayout" parent="Android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

Résultat avec l'exemple de couleur ci-dessus:

enter image description here

enter image description here

Remarque supplémentaire:

Testé avec les versions 23.3.0 des composants de la bibliothèque de support:

dependencies {
    compile 'com.Android.support:appcompat-v7:23.3.0'
    compile 'com.Android.support:cardview-v7:23.3.0'
    compile 'com.Android.support:recyclerview-v7:23.3.0'
    compile 'com.Android.support:design:23.3.0'
    compile 'com.Android.support:support-v4:23.3.0'
}
78
Daniel Nugent

vous devriez utiliser:

app:tabBackground="@drawable/tab_selector"
Android:background="@color/colorNormal"

tab_selector.xml (in Drawable Folder):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_selected="true" Android:drawable="@color/colorSelected"/>
    <item Android:state_selected="false" Android:drawable="@color/colorNormal"/>
</selector>
2
milad jalali

Onglets avec effet d'entraînement: En plus de la réponse de Daniel Nugent Il serait bien d'ajouter un effet d'entraînement aux onglets. Pour ce faire, vous devez ajouter ces deux dessins au dossier drawable-v21:

tab_background_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="#63D25B"> <!-- ripple color -->
    <item Android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>

tab_background_unselected.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="#606FC7"> <!-- ripple color -->
    <item Android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>
1
Milad Faridnia

Je sais qu'il est assez tard pour répondre à cette question, mais vous devez répondre de manière simple et différente sans créer de nouveau fond ou sélecteur. Tab-Layout a un remplissage par défaut de 12dp au début et à la fin. Il suffit de définir

app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"

pour remplir la couleur dans votre onglet.

1
Ashish John