tablayout - tabs android studio material design

Biblioteca de soporte de diseño de Android TabLayout usando el diseño de pestañas personalizado pero el diseño envolviendo las pestañas

Question

En el diseño personalizado de la pestaña, establezco su elemento principal en match_parent y establezco su color de fondo. Cuando lo ejecuto, las pestañas muestran un diseño personalizado que encierra los elementos imagen vista y vista de texto. Quiero que este diseño personalizado llene la pestaña sin ningún espacio entre las pestañas. Compruebe la salida aquí:

private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

    int length = tabLayout.getTabCount();
    for (int i = 0; i < length; i++) {
        tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
    }
}

tab_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout"
    android:background="@color/grey_accent">

    <ImageView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/icon"
        android:src="@drawable/ic_action_home"
        android:layout_marginBottom="19dp"
        android:layout_above="@+id/title"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:id="@+id/title"
        android:layout_marginBottom="259dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ViewPagerAdapter:

public View getTabView(int position) {
    View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);

    layout.setBackgroundResource(this.mColorList.get(position));
    icon.setImageResource(this.mIconList.get(position));
    title.setText(this.getPageTitle(position));

    return view;
}

Answer 1

Cuando usas inflate(R.layout.tab_layout, null) , estás diciendo que no hay ninguna View principal. Esto hace que todos los atributos de layout_ , según este pro-tip .

En su lugar, debe pasar el TabLayout y false (es decir, no adjuntar automáticamente la View ): esto garantiza que los atributos no sean ignorados.

public View getTabView(TabLayout tabLayout, int position) {
    View view = LayoutInflater.from(this.context)
        .inflate(R.layout.tab_layout, tabLayout, false);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);

    layout.setBackgroundResource(this.mColorList.get(position));
    icon.setImageResource(this.mIconList.get(position));
    title.setText(this.getPageTitle(position));

    return view;
}

Answer 2

Prueba esto

<android.support.design.widget.TabLayout
    app:tabPaddingStart="-1dp"
    app:tabPaddingEnd="-1dp"/>

Lo encontré here

Answer 3

Puede usar el diseño de material de tablayout y luego dar una vista personalizada a todas las pestañas. Para una visita de referencia completa: Ejemplo de Tablayout personalizado

La vista personalizada para todas las pestañas puede ser algo como esto:

<?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:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/ll"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:gravity="center">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/tvtab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ONE"
            android:textColor="@color/colorAccent"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/ll2"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:id="@+id/tvtab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TWO"
            android:textColor="#26e9dc"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/ll3"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:id="@+id/tvtab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="THREE"
            android:textColor="#d8ea2b"
            android:textSize="14sp"
            android:textStyle="bold" />
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>
</LinearLayout>

código para el archivo xml de actividad (activity_main.xml)

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="#fff"
            app:tabSelectedTextColor="#000"
            app:tabGravity="fill"
            app:tabMode="fixed" />

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

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

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

Finalmente el código para MainActivity.java

import android.content.Context;
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.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    public ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
                .inflate(R.layout.custom_tab, null, false);

        LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
        LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
        LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);

        tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
        tabLayout.getTabAt(1).setCustomView(linearLayout2);
        tabLayout.getTabAt(2).setCustomView(linearLayout3);

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        adapter.addFragment(new ThreeFragment(), "THREE");
        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);
        }
    }
}

Answer 4

use app: tabMaxWidth = "44dp" app: tabMinWidth = "44dp"

Answer 5

Paso 1: Agregar código de diseño xml para customtabs

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        android:background="@color/white"
        app:tabGravity="center" />

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


<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"
    android:layout_marginBottom="50dp"/>

Paso 2: código Java para la actividad de pestañas

public class BookingsTabs extends AppCompatActivity {
    String url, smobile, snames, semail, sid, stoken, responseServer;
    String id, token, did, stsid, processresponse, type, cancelresponse;
    TextView tv1;
    Button cretedeal;
    ViewbookingsAdapter adapter;
    ViewbookingsAdapter2 adapter2;
    LinearLayout order;
    private Tracker mTracker;
    ProgressDialog pDialog;
    ListView listview;
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    AnalyticsApplication application1;
    SessionManagement session;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_bookings);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
            ActionBar actionBar = getSupportActionBar();
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowHomeEnabled(true);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setDisplayUseLogoEnabled(false);
            actionBar.setHomeButtonEnabled(true);
        }

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
        }
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        int defaultValue = 0;
        int page = getIntent().getIntExtra("TAB", defaultValue);
        viewPager.setCurrentItem(page);
        application1 = (AnalyticsApplication) getApplication();
        mTracker = application1.getDefaultTracker();
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.accentColor));
        tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.aquablue));

        tabLayout.getTabAt(0).setCustomView(R.layout.aquablue);
        tabLayout.getTabAt(1).setCustomView(R.layout.orangeprocess);
        tabLayout.getTabAt(2).setCustomView(R.layout.shipping);
        tabLayout.getTabAt(3).setCustomView(R.layout.deliver);
        tabLayout.getTabAt(4).setCustomView(R.layout.completedtxt);
        tabLayout.getTabAt(5).setCustomView(R.layout.cancelled);

        callAsynchronousTask();
        viewPager.setCurrentItem(0);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OrderplacedFragment(), "Order Placed");
        adapter.addFrag(new ProcessingFragment(), "Processing");
        adapter.addFrag(new ShippingFragment(), "Shipping");
        adapter.addFrag(new DeliveredFragment(), "Delivered");
        adapter.addFrag(new CompletedFragment(), "Completed");
        adapter.addFrag(new CancelledFragment(), "Cancelled");
        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) {
            if (position == 0) {

            }
            return mFragmentList.get(position);
        }

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

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

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

Paso 3: Agregué a continuación el fragmento de código de la pestaña de muestra para una pestaña igual que otras

Toma código xml cualquier vista de lista o algunos datos

public class OrderplacedFragment extends Fragment {
    View mMainView;
    String url, smobile, snames, semail, sid, stoken, responseServer;
    Context context;
    ViewbookingsAdapter adapter;
    ViewbookingsAdapter2 adapter2;
    ListView listview;
    LinearLayout tv1;
    TextView create;
    ArrayList<HashMap<String, String>> processlist, hatfilterslist;
    SessionManagement session;
    private SwipeRefreshLayout mSwipeRefreshLayout = null;

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

        mMainView = inflater.inflate(R.layout.listview_orderbookings, container, false);

        listview = (ListView) mMainView.findViewById(R.id.listview);

        pDialog = new ProgressDialog(getActivity());
        pDialog.setMessage("Loading...");
        pDialog.setMax(5);
        Intent j = getActivity().getIntent();
        coupon_code = j.getStringExtra("code");
        create = (TextView) mMainView.findViewById(R.id.dealslist);
        tv1 = (LinearLayout) mMainView.findViewById(R.id.no_deals_linear);
        create = (TextView) mMainView.findViewById(R.id.dealslist);
        create.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent i = new Intent(getActivity(), MyDealsActivity.class);
                startActivity(i);

            }
        });
        tv1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent i = new Intent(getActivity(), MyDealsActivity.class);
                startActivity(i);
            }
        });

        return mMainView;
    }
}

En estas pestañas podemos agregar cuentas también. Si tienes alguna duda al respecto pregúntame.