आप डॉट्स इंडिकेटर के साथ Android व्यू पेजर कैसे बनाते हैं?

155

संभवतः आप में से कई (मैं के रूप में), ViewPagerइस तरह से नीचे डॉट्स के साथ बनाने में समस्या है :

आप इस तरह का Android ViewPager कैसे बनाते हैं?

— RediOne1
स्रोत

318

हम सभी की जरूरत है: ViewPager , TabLayout और चयनित और डिफ़ॉल्ट डॉट्स के लिए 2 दराज ।

सबसे पहले, हमें TabLayoutअपने स्क्रीन लेआउट में जोड़ना होगा, और इसे कनेक्ट करना होगा ViewPager। हम इसे दो तरीकों से कर सकते हैं:

में निहित `TabLayout`है`ViewPager`

<androidx.viewpager.widget.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>

इस मामले में TabLayoutस्वचालित रूप से जुड़ा होगा ViewPager, लेकिन TabLayoutइसके बगल में होगा ViewPager, इसके ऊपर नहीं।

अलग `TabLayout`

<androidx.viewpager.widget.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

इस मामले में, हम TabLayoutकहीं भी डाल सकते हैं , लेकिन हमें प्रोग्रामेटिक रूप से कनेक्ट TabLayoutकरना होगाViewPager

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);

एक बार जब हमने अपना लेआउट तैयार कर लिया, तो हमें अपने डॉट्स तैयार करने होंगे। इसलिए हम तीन फ़ाइलों को बनाने: selected_dot.xml, default_dot.xmlऔर tab_selector.xml।

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>    
    </item>
</layer-list>

default_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
          android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

अब हमें TabLayoutअपने XML लेआउट में कोड की केवल 3 पंक्तियों को जोड़ना होगा ।

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"

ViewPager2इस लेख को पढ़ने के लिए :

माध्यम.कॉम पर डॉट्स इंडिकेटर के साथ ViewPager (2)

उप-वोटों का स्वागत है ;-)

— RediOne1
स्रोत

18

आपने इसे बेहतर तरीके से प्रलेखन अनुभाग में रखा है। हालांकि यह मदद की।

— इरफान GLMPR

2

@ErfanGholampour stackoverflow.com/documentation/android/692/viewpager/22945/…

— RediOne1

3

@AmitSingh आप app:tabMaxWidthTabLayout

— RediOne1

3

मुझे नहीं पता कि मैंने निर्देशों का सही ढंग से पालन नहीं किया है, लेकिन मुझे उनके बीच एक सभ्य स्थान के साथ केवल डॉट्स दिखाने के लिए निम्नलिखित जोड़ना होगा:

app:tabMaxWidth="30dp"         app:tabTextColor="@color/transparent2"         app:tabSelectedTextColor="@color/transparent2"         app:tabIndicatorHeight="0dp"         android:layout_gravity="bottom|center"

— सेवन

3

डॉट्स ऐप के बीच रिक्ति को दूर करने के लिए: tabPaddingStart = "@ dimen / मार्जिन_7.5" ऐप: tabPaddingEnd = "@ dimen / मार्जिन_7.5"

— dev_mg99

30

सबसे पहले एक लेआउट बनाएं, जिसमें डॉट्स के लिए एक लाइनरलाइट दें जो आपके व्यू पेज पर दिखाई दे

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <LinearLayout
        android:id="@+id/pager_dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:background="@android:color/transparent"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
    </LinearLayout>

</RelativeLayout>

इसके बाद 2 ड्राॅबलेट बनाएं

1. अचयनित दराज

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#ffffff"/>
</shape>

2. चयन करने योग्य

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <size android:width="12dp" android:height="12dp"/>

    <stroke android:width="1dp" android:color="#000000"/>
</shape>

इसके बाद एडॉप्टर सेट करें

private LinearLayout llPagerDots;
private ViewPager viewPager;
private ArrayList<String> eventImagesUrl;
private HomeViewPagerAdapter homeViewPagerAdapter;
private ImageView[] ivArrayDotsPager;

public void setUpViewPager() {
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    llPagerDots = (LinearLayout) findViewById(R.id.pager_dots);

    homeViewPagerAdapter = new HomeViewPagerAdapter(mContext, eventImagesUrl);

    viewPager.setAdapter(homeViewPagerAdapter);

    setupPagerIndidcatorDots();

    ivArrayDotsPager[0].setImageResource(R.drawable.page_indicator_selected);

    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 < ivArrayDotsPager.length; i++) {
                ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);
            }
            ivArrayDotsPager[position].setImageResource(R.drawable.page_indicator_selected);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
}

एक विधि setupPagerIndidcatorDots () बनाएँ:

private void setupPagerIndidcatorDots() {
    ivArrayDotsPager = new ImageView[eventImagesUrl.size()];
    for (int i = 0; i < ivArrayDotsPager.length; i++) {
        ivArrayDotsPager[i] = new ImageView(getActivity());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.setMargins(5, 0, 5, 0);
        ivArrayDotsPager[i].setLayoutParams(params);
        ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected);
        //ivArrayDotsPager[i].setAlpha(0.4f);
        ivArrayDotsPager[i].setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.setAlpha(1);
            }
        });
        llPagerDots.addView(ivArrayDotsPager[i]);
        llPagerDots.bringToFront();
    }

— ईशांत गर्ग
स्रोत

और क्या है HomeViewPagerAdapter?

— कूलमाइंड

ओवरएज मज़ा को पूरी तरह से काम करने के लिए onPageSelect को थोड़ा संशोधित करें। ThePageSelected (स्थिति: Int) {for (i in 0 तक ivArrayDotsPager !!। size) {if (i! = Position) ivrrrayDotsPager !! [i] .setImageDrawable (ContextCompat.getDget) applicationContext, R.drawable.unselected_dot)) और ivArrayDotsPager !! [i] .setImageDrawable (ContextCompat.getDrawable (applicationContext, R.drawable.selected_dot))} LinearLayout !! bringToFront ()}।

— सौहार्द

19

अपने अनुरोध को संभालने के लिए आप मेरी लाइब्रेरी देख सकते हैं: https://github.com/tommybuonomo/dotsindicator

अपने XML लेआउट में

  <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
      android:id="@+id/dots_indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      app:dotsColor="@color/colorPrimary"
      app:dotsSize="16dp"
      app:dotsWidthFactor="3"
      />

अपने जावा कोड में

dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new ViewPagerAdapter();
viewPager.setAdapter(adapter);
dotsIndicator.setViewPager(viewPager);

— टॉमी ब्यूनोमो
स्रोत

उपयोग करने के लिए इतना सरल और विशेष रूप से एनिमेशन के साथ बहुत अच्छा लग रहा है ... धन्यवाद! मैं था, हालांकि, जोड़ने के लिए tools:replace="android:label"करने के लिए applicationमेरी टैग AndroidManifest.xmlकि टैग दो बार परिभाषित और एक Gradle निर्माण असफल के कारण किया जा रहा बारे में एक त्रुटि से छुटकारा पाने के।

— मोटी भिक्षु

मुझे एक gradleत्रुटि मिल रही है , हालांकि

Error:(39, 20) All com.android.support libraries must use the exact same version specification (mixing versions can lead to runtime crashes). Found versions 27.0.0, 25.3.1. Examples include 'com.android.support:support-compat:27.0.0' and 'com.android.support:animated-vector-drawable:25.3.1'

- मैं इसे कैसे ठीक कर सकता हूं?

— मोटी भिक्षु

स्वचालित रूप से कैसे स्क्रॉल करें DotsIndicator

— शिवम कुमार

हे ..मैंने इसे लागू किया..मैंने <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator> का उपयोग किया है, लेकिन डॉट्स अत्यधिक बाईं ओर प्रदर्शित हो रहे हैं .. केंद्र में डॉट्स संरेखित करने के लिए कैसे?

3

<android.support.v4.view.ViewPager
      android:id="@+id/vpImage"
      android:layout_width="match_parent"
      android:layout_height="@dimen/_120sdp" />


<android.support.design.widget.TabLayout
      android:id="@+id/tlImage"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabBackground="@drawable/selector_product_image"
      app:tabGravity="center"
      app:tabIndicatorHeight="0dp"
      app:tabMaxWidth="12dp"
      app:tabRippleColor="@null" />

ImageAdapter imageAdapter = new ImageAdapter(context, arrayList);
vpImage.setOffscreenPageLimit(1);
vpImage.setAdapter(imageAdapter);
tlImage.setupWithViewPager(vpImage);

selector_product_image.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/image_selected" android:state_selected="true" />
    <item android:drawable="@drawable/image_unselected" />

</selector>

image_selected.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

image_unselected.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

ImageAdapter.java

class ImageAdapter extends PagerAdapter {

  private Context context;
  private ArrayList<ImageModel> arrayList;
  private LayoutInflater layoutInflater;

  public ImageAdapter(Context context, ArrayList<ImageModel> arrayList) {
      this.context = context;
      this.arrayList = arrayList;
      this.layoutInflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }

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

  @Override
  public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
      return view == ((View) o);
  }

  @Override
  public Object instantiateItem(ViewGroup container, int position) {
      View view = layoutInflater.inflate(R.layout.row_slider_image, container, false);

      AppCompatImageView ivProductImage = view.findViewById(R.id.ivProductImage);

      if (!TextUtils.isEmpty(arrayList.get(position).getImage())) {
          Glide.with(context)
                  .load(arrayList.get(position).getImage())
                  .apply(new RequestOptions().placeholder(R.drawable.no_image).error(R.drawable.no_image))
                  .into(ivProductImage);
      }

      container.addView(view);
      return view;
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
  }
}

row_slider_image.xml

<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/ivProductImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/no_image" />

</android.support.v7.widget.LinearLayoutCompat>

— केतन रमणी
स्रोत

1

आपका xml

  <RelativeLayout
                android:id="@+id/rl_speed"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/ll_dashboard_buttons"
                android:layout_below="@+id/ib_menu">

                <com.smart.gps.speedometer.app.utils.SmartViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" 
                   app:layout_behavior="@string/appbar_scrolling_view_behavior">
                   </com.smart.gps.speedometer.app.utils.SmartViewPager>

                   <android.support.design.widget.TabLayout
                    android:id="@+id/sliding_tabs"
                    android:layout_alignParentBottom="true"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabBackground="@drawable/tab_selector"
                    app:tabIndicatorHeight="0dp"
                    app:tabGravity="center"
                    />

एक बनाने योग्य। दायीं ओर क्लिक करने योग्य -> नया -> ड्रा करने योग्य फ़ाइल संसाधन का नाम

tab_selector.xml

<item android:drawable="@drawable/selected_tab"
    android:state_selected="true"/>

<item android:drawable="@drawable/unselected_tab"/>

अब दो और xml फाइलें हैं। सम्मानित नाम के साथ दो और xml फाइलें बनाएं। ये चयनकर्ता संकेतक और अचयनित संकेतक हैं

selected_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="4dp"
            android:useLevel="false">
            <solid android:color="@color/highspeed"/>
        </shape>
    </item>
</layer-list>

unselected_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="2dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

— शून्य सूचक अपवाद
स्रोत

संभवतः SmartViewPagerआपका कस्टम दृश्य है।

— कूलमाइंड

1

जब आप नवीनतम ViewPager2 और Kotlin के साथ ऐसा ही कुछ चाहते हैं

सब कुछ स्वयं-समझाने वाला है, समझाने की जरूरत नहीं!

1. आपकी गतिविधि या टुकड़ा

val imageList = listOf(
        ImageModel(R.drawable.offer1),
        ImageModel(R.drawable.splash),
        ImageModel(R.drawable.offer1),
        ImageModel(R.drawable.splash2)
    )

    val adapter = HomeOffersAdapter()
    adapter.setItem(imageList)
    photos_viewpager.adapter = adapter

    TabLayoutMediator(tab_layout, photos_viewpager) { tab, position ->
    }.attach()
}

2. लेआउट

<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:layout_height="@dimen/dp_200">

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_200" />

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom|center"
    app:tabBackground="@drawable/tab_selector"
    app:tabGravity="center"
    app:tabIndicatorHeight="0dp"
    app:tabSelectedTextColor="@android:color/transparent"
    app:tabTextColor="@android:color/transparent" />

3. ड्रा करने योग्य: tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/dot_selected" android:state_selected="true" />
<item android:drawable="@drawable/dot_default" />

4. ड्रा करने योग्य: dot_selected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="@dimen/dp_8"
android:useLevel="false">

<solid android:color="@color/colorPrimary" />

<stroke
    android:width="@dimen/dp_1"
    android:color="@android:color/white" />

5. ड्रा करने योग्य: dot_default.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="@dimen/dp_8"
android:useLevel="false">

<solid android:color="@android:color/transparent" />

<stroke
    android:width="@dimen/dp_1"
    android:color="@android:color/white" />

6. एडॉप्टर

class HomeOffersAdapter : RecyclerView.Adapter<HomeOffersAdapter.HomeOffersViewHolder>() {

private var list: List<ImageModel> = listOf()


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HomeOffersViewHolder {
    return HomeOffersViewHolder(parent)
}


override fun onBindViewHolder(holder: HomeOffersViewHolder, position: Int) {
    holder.bind(list[position])
}

fun setItem(list: List<ImageModel>) {
    this.list = list
    notifyDataSetChanged()
}

override fun getItemCount(): Int = list.size

class HomeOffersViewHolder constructor(itemView: View) : RecyclerView.ViewHolder(itemView) {

    constructor(parent: ViewGroup) : this(
        LayoutInflater.from(parent.context).inflate(
            R.layout.pager_item,
            parent, false
        )
    )

    fun bind(imageModel: ImageModel) {
        itemView.offerImage.setImageResource(imageModel.image)
    }
}

}

7. लेआउट: पेजर_इटेम।एक्सएमएल

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/offerImage"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_200"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    tools:src="@drawable/offer1" />

— किशन सोलंकी
स्रोत

0

प्लेसबेलर और व्यूफ्लैपर_क्लियर_डॉट_ले (लिनियरएलेउट) को एक ही आधार रेखा पर रखें और एक के नीचे एक का पालन करें

viewFlipper_linear_dot_lay= (LinearLayout) findViewById(R.id.dots_lay);
setupDotsOnViewPager(images_viewFlipper);
    for (int i = 0; i < images_viewFlipper.size(); i++) {
    //Add Images to ViewFlipper 
    }



private void setupDotsOnViewPager(ArrayList images_viewFlipper) {
                    images_linear = new ImageView[images_viewFlipper.size()];
                    for (int i = 0; i < images_linear.length; i++) {
                        images_linear[i] = new ImageView(this);
                        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                        params.setMargins(5, 0, 5, 0);
                        params.gravity = Gravity.BOTTOM | Gravity.CENTER;
                        images_linear[i].setLayoutParams(params);
                        images_linear[i].setImageResource(R.drawable.unselected);
                        viewFlipper_linear_dot_lay.addView(images_linear[i]);
                        viewFlipper_linear_dot_lay.bringToFront();
                    }
                }

और OnRight और OnLeft हो जाता है नीचे कोड जगह है

for (int i = 0; i < images_linear.length; i++) {
 images_linear[i].setImageResource(R.drawable.unselected);
 }
images_linear[viewFlipper.getDisplayedChild()].setImageResource(R.drawable.selected);

— वीवी डब्ल्यू
स्रोत

0

निर्भरता जोड़ें> ग्रेड को सिंक करें

implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'

अपने जावा कोड में

 dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator3);


myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
        dotsIndicator.setViewPager(viewPager);

अपने लेआउट में

<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
android:id="@+id/spring_dots_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:dampingRatio="0.5"
app:dotsColor="@color/material_white"
app:dotsStrokeColor="@color/material_yellow"
app:dotsCornerRadius="2dp"
app:dotsSize="16dp"
app:dotsSpacing="6dp"
app:dotsStrokeWidth="2dp"
app:stiffness="300"
/>

— Mue
स्रोत

आप डॉट्स इंडिकेटर के साथ Android व्यू पेजर कैसे बनाते हैं?

में निहित TabLayoutहैViewPager

अलग TabLayout

selected_dot.xml

default_dot.xml

tab_selector.xml

में निहित `TabLayout`है`ViewPager`

अलग `TabLayout`