web-dev-qa-db-fra.com

Impossible de supprimer le remplissage des onglets lors de l'utilisation de vues personnalisées avec la disposition des onglets

J'ai ajouté une disposition relative dans la vue personnalisée et l'ajoutée dans la disposition par onglets. J'utilise un arrière-plan blanc pour les onglets et je n'ai pas appliqué de remplissage dans la disposition personnalisée des onglets. Mais je reçois aussi du rembourrage sur les onglets, ce qui me permet de voir un fond gris dans les onglets comme si Android appliquait un remplissage interne aux onglets. J'essaie d'afficher trois vues de texte, ce que je peux faire, mais l'une d'entre elles est tronquée à cause du remplissage appliqué aux onglets. Aussi, je veux avoir une couleur de fond uniforme pour les onglets. 

Voici mon code de mise en page:

activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="com.customtablayoutapplication.HomeActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />


    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_home" />


</Android.support.design.widget.CoordinatorLayout>



fragment_home.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:theme="@style/AppTheme.AppBarOverlay"
    tools:context="com.customtablayoutapplication.HomeFragment"
    tools:showIn="@layout/activity_home">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>


custom_tab.xml`enter code here`

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:background="@Android:color/white"
    Android:layout_height="match_parent"
    Android:layout_gravity="center">

    <TextView
        Android:id="@+id/total_request_count"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_alignParentRight="true"
        Android:text="12"
        Android:textAllCaps="false"
        Android:visibility="gone"
        Android:textColor="@color/colorPrimaryDark"
        Android:textSize="12sp" />


    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_centerVertical="true"
        Android:fitsSystemWindows="true"
        Android:gravity="center">

        <TextView
            Android:id="@+id/request_status"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:gravity="center"
            Android:text="New Request"
            Android:textAllCaps="false"
            Android:textColor="@color/colorPrimaryDark"
            Android:textSize="12sp" />

        <TextView
            Android:id="@+id/badge_icon"
            Android:layout_width="13dp"
            Android:layout_height="13dp"
            Android:layout_alignParentRight="true"
            Android:layout_alignTop="@id/request_status"
            Android:layout_marginLeft="-3dp"
            Android:layout_marginTop="15dp"
            Android:background="@drawable/circular_text_background"
            Android:clickable="false"
            Android:visibility="gone" />
    </RelativeLayout>


</RelativeLayout>


HomeFragment.Java

package com.customtablayoutapplication;

import Android.os.Bundle;
import Android.support.design.widget.TabLayout;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.support.v4.app.FragmentPagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.RelativeLayout;
import Android.widget.TextView;

import Java.util.ArrayList;
import Java.util.List;

/**
 * A placeholder fragment containing a simple view.
 */
public class HomeFragment extends Fragment {

    private ViewPager viewPager;
    private TabLayout tabLayout;

    public HomeFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_home, container, false);
        viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setUpTabIcons();
        return view;
    }

    private void setUpTabIcons() {
        RelativeLayout tabNewRequest= (RelativeLayout) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
        TextView tabNewRequesttxt = (TextView) tabNewRequest.findViewById(R.id.request_status);
        tabNewRequesttxt.setText("New Request");
        tabLayout.getTabAt(0).setCustomView(tabNewRequest);

        RelativeLayout tabInProgress= (RelativeLayout) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
        TextView tabInProgresstxt = (TextView) tabInProgress.findViewById(R.id.request_status);
        tabInProgresstxt.setText("In Progress");
        tabLayout.getTabAt(1).setCustomView(tabInProgress);

        RelativeLayout tabWorkDone= (RelativeLayout) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
        TextView tabWorkDonetxt = (TextView) tabWorkDone.findViewById(R.id.request_status);
        tabWorkDonetxt.setText("Work Done");
        tabLayout.getTabAt(2).setCustomView(tabWorkDone);

        RelativeLayout tabDelivered= (RelativeLayout) LayoutInflater.from(getActivity()).inflate(R.layout.custom_tab, null);
        TextView tabDeliveredtxt = (TextView) tabDelivered.findViewById(R.id.request_status);
        tabDeliveredtxt.setText("Delivered");
        tabLayout.getTabAt(3).setCustomView(tabDelivered);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
        adapter.addFragment(new NewRequestFragment(), "New Request");
        adapter.addFragment(new InProgressFragment(), "In Progress");
        adapter.addFragment(new WorkDoneFragment(), "Work Done");
        adapter.addFragment(new DeliveredFragment(), "Delivered");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

Les onglets fixes ont un fond gris autour d'un fond blanc

customizationandroid-custom-viewandroid-tablayout
20
user3492435
 <Android.support.design.widget.TabLayout
            Android:id="@+id/tab_layout"
            Android:layout_width="210dp"
            Android:layout_height="28dp"
            Android:layout_centerInParent="true"
            Android:background="@drawable/bg_forum_tab"
            app:tabIndicatorColor="@color/colorBtnBg"
            app:tabIndicatorHeight="0dp"
            app:tabPaddingBottom="-1dp"
            app:tabPaddingEnd="-1dp"
            app:tabPaddingStart="-1dp"
            app:tabPaddingTop="-1dp"
            app:tabSelectedTextColor="@color/colorBtnBg"
            app:tabTextColor="@color/colorWhite" />

Définissez tabPaddingStart/tabPaddingEnd/tabPaddingTop/tabPaddingBottom comme ceci.

44
Kyrie Liu

Cela a fonctionné pour moi:

Dans votre TabLayout, vous devez définir tabPaddingEnd et tabPaddingStart à 0dp.

Dans votre affichage personnalisé, vous devez définir layout_width et layout_height sur match_parent afin de remplir tout l'espace avec votre couleur personnalisée.

Le TabLayout:

<Android.support.design.widget.TabLayout
    Android:id="@+id/tl_dashboard"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:layout_alignParentBottom="true"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/colorRed"
    app:tabMode="fixed"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"/>

Et vue personnalisée:

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
     <!--Your widgets-->        
</RelativeLayout>
34
Miguel Garcia

Grâce à XML, vous pouvez supprimer uniquement les rembourrages gauche et droit comme celui-ci:

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

Notez que cette façon ne fonctionne pas pour les rembourrages TOP et BOTTOM, mais je trouve la solution suivante:

Lorsque vous utilisez des vues personnalisées en tant qu'élément de tabulation, vous devez définir LayoutParams sur la vue et définir les rembourrages 0 .

    for (int i = 0; i < tabLayout.getTabCount(); i++) {           
        View tabView = LayoutInflater.from(context)
              .inflate(LayoutInflater.from(this), R.layout.item_main_tabview, null, false);

        tabView.setLayoutParams(new TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        tabView.setPadding(0, 0, 0, 0);
        tabLayout.getTabAt(i).setCustomView(tabViewBinding.getRoot());
    }
8
Максим Петлюк

J'ai résolu ce problème en définissant la marge et le remplissage du parent de votre vue personnalisée sur zéro lors de l'ajout de nouveaux onglets à la disposition des onglets.

    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    lp.setMargins(0,0,0,0);

    TabLayout.Tab newTab = mTabsBottom.newTab().setCustomView(R.layout.view_custom_tab);
    setupTabParentLayout(newTab.getCustomView(), lp);
    ..
    ..
    ..
    private void setupTabParentLayout(View customView, LinearLayout.LayoutParams lp)
    {
        LinearLayout tabParent = (LinearLayout) customView.getParent();
        tabParent.setLayoutParams(lp);
        tabParent.setPadding(0,0,0,0);
    }

L'astuce consistait à utiliser LinearLayout.LayoutParams pour le parent de la vue personnalisée.

3
Swas_99

Je sais que c'est une vieille question, mais cela peut aider quelqu'un d'autre. Le début et la fin du remplissage ne suppriment pas l'espace entre les onglets. La solution est:

Android: clipToPadding = "true"

 <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        Android:layout_width="match_parent"
        Android:layout_height="80dp"
        Android:background="@color/colorGrayBackground"
        app:tabGravity="fill"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"
        app:tabContentStart="0dp"
        app:tabIndicatorHeight="0dp"
        Android:clipToPadding="true"
        app:tabMode="fixed" />

Ensuite, vous pouvez définir des rembourrages sur "0dp". J'espère que ça aide quelqu'un. 

0
dcanbatman
        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabview"
            app:layout_constraintTop_toBottomOf="@+id/ivpromo"
            Android:layout_width="0dp"
            app:tabMode="scrollable"
            app:tabIndicatorHeight="0dp"
            app:tabContentStart="0dp"
            Android:clipToPadding="true"
            app:tabMaxWidth="45dp"
            app:tabGravity="fill"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:tabIndicatorColor="@Android:color/transparent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/tvcode"
            Android:layout_height="40dp"/>
0
V Srinath