customization - example - tablayout viewpager

No se puede eliminar el relleno de las pestañas cuando se usan vistas personalizadas con diseño de pestaña

Question

He agregado un diseño relativo en la vista personalizada y lo he agregado en el diseño de la pestaña. Estoy utilizando un fondo blanco para las pestañas y no he aplicado ningún relleno en el diseño personalizado de las pestañas. Pero también estoy obteniendo relleno en las pestañas, por lo que se me muestra un fondo gris dentro de las pestañas, como si Android estuviera aplicando internamente el relleno a las pestañas. Estoy tratando de mostrar tres vistas de texto que puedo hacer, pero una de ellas se está truncando debido al relleno aplicado a las pestañas. También quiero tener un color de fondo consistente para las pestañas.

Aquí está mi código de diseño:

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);
}
}
}

Las pestañas fijas tienen fondo gris alrededor de fondo blanco

Answer 1

A través de XML puede eliminar solo los rellenos izquierdo y derecho así:

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

Tenga en cuenta que de esta manera no funciona para los rellenos TOP y BOTTOM, pero encuentro la siguiente solución:

Cuando utiliza vistas personalizadas como elemento de pestaña, debe configurar LayoutParams en la vista y configurar los rellenos 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());
}

Answer 2

Funcionó para mí:

En su TabLayout , debe establecer tabPaddingEnd y tabPaddingStart en 0dp .

En su vista personalizada, debe configurar layout_width y layout_height en match_parent para llenar todo el espacio con su color personalizado.

El 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"/>

Y vista personalizada:

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

Answer 3

Resolví esto configurando el margen y el relleno del elemento primario de la vista personalizada al agregar nuevas pestañas al diseño de la pestaña.

 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);
}

El truco aquí fue usar LinearLayout.LayoutParams para los padres de la vista personalizada.

Answer 4

Sé que esta es una vieja pregunta pero esto puede ayudar a alguien más. El inicio de relleno y el final de relleno no eliminan espacio entre las pestañas. La solución es:

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" />

Luego puede configurar los rellenos a "0dp". Espero que ayude a alguien.

Answer 5

 <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"/>

Answer 6

 <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" />

Configure tabPaddingStart / tabPaddingEnd / tabPaddingTop / tabPaddingBottom esta manera.