ভিউপেজার ব্যবহার করে ট্যাব দিয়ে সোয়াইপ ভিউ তৈরি করুন
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
সোয়াইপ ভিউ আপনাকে ভাইবোন স্ক্রীনগুলির মধ্যে নেভিগেট করতে দেয়, যেমন ট্যাব, অনুভূমিক আঙুলের অঙ্গভঙ্গি বা সোয়াইপ করে। এই নেভিগেশন প্যাটার্নটিকে অনুভূমিক পেজিং হিসাবেও উল্লেখ করা হয়। এই বিষয়টি আপনাকে শেখায় কিভাবে ট্যাবগুলির পরিবর্তে একটি শিরোনাম স্ট্রিপ দেখাতে হয় এবং ট্যাবগুলির মধ্যে স্যুইচ করার জন্য সোয়াইপ ভিউ সহ একটি ট্যাব লেআউট তৈরি করতে হয়৷
সোয়াইপ ভিউ প্রয়োগ করুন
আপনি AndroidX এর ViewPager উইজেট ব্যবহার করে সোয়াইপ ভিউ তৈরি করতে পারেন। একটি ViewPager এবং ট্যাব ব্যবহার করতে, আপনাকে আপনার প্রকল্পে ViewPager এবং উপাদান উপাদানগুলির জন্য নির্ভরতা যুক্ত করতে হবে।
ViewPager এর সাথে আপনার লেআউট সেট আপ করতে, আপনার XML লেআউটে <ViewPager> উপাদান যোগ করুন। উদাহরণস্বরূপ, যদি সোয়াইপ ভিউতে প্রতিটি পৃষ্ঠা সম্পূর্ণ লেআউট ব্যবহার করে, তাহলে আপনার লেআউটটি এইরকম দেখায়:
প্রতিটি পৃষ্ঠার প্রতিনিধিত্ব করে এমন চাইল্ড ভিউ সন্নিবেশ করতে, আপনাকে এই লেআউটটিকে একটি PagerAdapter এ হুক করতে হবে। আপনি দুটি ধরণের অন্তর্নির্মিত অ্যাডাপ্টারের মধ্যে চয়ন করতে পারেন:
FragmentPagerAdapter : একটি ছোট, নির্দিষ্ট সংখ্যক ভাইবোন স্ক্রিনের মধ্যে নেভিগেট করার সময় এটি ব্যবহার করুন।
FragmentStatePagerAdapter : অজানা সংখ্যক পৃষ্ঠা জুড়ে পেজ করার সময় এটি ব্যবহার করুন। FragmentStatePagerAdapter ব্যবহারকারী নেভিগেট করার সাথে সাথে টুকরোগুলোকে ধ্বংস করে মেমরি ব্যবহারকে অপ্টিমাইজ করে।
একটি উদাহরণ হিসাবে, এখানে আপনি Fragment অবজেক্টের একটি সংগ্রহ জুড়ে সোয়াইপ করতে FragmentStatePagerAdapter ব্যবহার করতে পারেন:
কোটলিন
classCollectionDemoFragment:Fragment(){// When requested, this adapter returns a DemoObjectFragment// representing an object in the collection.privatelateinitvardemoCollectionPagerAdapter:DemoCollectionPagerAdapterprivatelateinitvarviewPager:ViewPageroverridefunonCreateView(inflater:LayoutInflater,container:ViewGroup?,savedInstanceState:Bundle?):View? {returninflater.inflate(R.layout.collection_demo,container,false)}overridefunonViewCreated(view:View,savedInstanceState:Bundle?){demoCollectionPagerAdapter=DemoCollectionPagerAdapter(childFragmentManager)viewPager=view.findViewById(R.id.pager)viewPager.adapter=demoCollectionPagerAdapter}}// Since this is an object collection, use a FragmentStatePagerAdapter,// NOT a FragmentPagerAdapter.classDemoCollectionPagerAdapter(fm:FragmentManager):FragmentStatePagerAdapter(fm){overridefungetCount():Int=100overridefungetItem(i:Int):Fragment{valfragment=DemoObjectFragment()fragment.arguments=Bundle().apply{// Our object is just an integer :-PputInt(ARG_OBJECT,i+1)}returnfragment}overridefungetPageTitle(position:Int):CharSequence{return"OBJECT ${(position+1)}"}}privateconstvalARG_OBJECT="object"// Instances of this class are fragments representing a single// object in the collection.classDemoObjectFragment:Fragment(){overridefunonCreateView(inflater:LayoutInflater,container:ViewGroup?,savedInstanceState:Bundle?):View{returninflater.inflate(R.layout.fragment_collection_object,container,false)}overridefunonViewCreated(view:View,savedInstanceState:Bundle?){arguments?.takeIf{it.containsKey(ARG_OBJECT)}?.apply{valtextView:TextView=view.findViewById(android.R.id.text1)textView.text=getInt(ARG_OBJECT).toString()}}}
জাভা
publicclassCollectionDemoFragmentextendsFragment{// When requested, this adapter returns a DemoObjectFragment// representing an object in the collection.DemoCollectionPagerAdapterdemoCollectionPagerAdapter;ViewPagerviewPager;@Nullable@OverridepublicViewonCreateView(@NonNullLayoutInflaterinflater,@NullableViewGroupcontainer,@NullableBundlesavedInstanceState){returninflater.inflate(R.layout.collection_demo,container,false);}@OverridepublicvoidonViewCreated(@NonNullViewview,@NullableBundlesavedInstanceState){demoCollectionPagerAdapter=newDemoCollectionPagerAdapter(getChildFragmentManager());viewPager=view.findViewById(R.id.pager);viewPager.setAdapter(demoCollectionPagerAdapter);}}// Since this is an object collection, use a FragmentStatePagerAdapter,// NOT a FragmentPagerAdapter.publicclassDemoCollectionPagerAdapterextendsFragmentStatePagerAdapter{publicDemoCollectionPagerAdapter(FragmentManagerfm){super(fm);}@OverridepublicFragmentgetItem(inti){Fragmentfragment=newDemoObjectFragment();Bundleargs=newBundle();// Our object is just an integer :-Pargs.putInt(DemoObjectFragment.ARG_OBJECT,i+1);fragment.setArguments(args);returnfragment;}@OverridepublicintgetCount(){return100;}@OverridepublicCharSequencegetPageTitle(intposition){return"OBJECT "+(position+1);}}// Instances of this class are fragments representing a single// object in the collection.publicclassDemoObjectFragmentextendsFragment{publicstaticfinalStringARG_OBJECT="object";@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){returninflater.inflate(R.layout.fragment_collection_object,container,false);}@OverridepublicvoidonViewCreated(@NonNullViewview,@NullableBundlesavedInstanceState){Bundleargs=getArguments();((TextView)view.findViewById(android.R.id.text1)).setText(Integer.toString(args.getInt(ARG_OBJECT)));}}
নিম্নলিখিত বিভাগগুলি দেখায় কিভাবে আপনি পৃষ্ঠাগুলির মধ্যে নেভিগেশন সহজতর করার জন্য ট্যাব যোগ করতে পারেন।
একটি TabLayout ব্যবহার করে ট্যাব যোগ করুন
একটি TabLayout অনুভূমিকভাবে ট্যাবগুলি প্রদর্শন করার একটি উপায় প্রদান করে। একটি ViewPager এর সাথে একসাথে ব্যবহার করা হলে, একটি TabLayout একটি সোয়াইপ ভিউতে পৃষ্ঠাগুলির মধ্যে নেভিগেট করার জন্য একটি পরিচিত ইন্টারফেস প্রদান করে৷
চিত্র 1. চারটি ট্যাব সহ একটি TabLayout ।
একটি ViewPager এ একটি TabLayout অন্তর্ভুক্ত করতে, <ViewPager> উপাদানের ভিতরে একটি <TabLayout> উপাদান যোগ করুন, যেমনটি নীচে দেখানো হয়েছে:
এরপরে, ViewPager এর সাথে TabLayout লিঙ্ক করতে setupWithViewPager() ব্যবহার করুন। TabLayout স্বতন্ত্র ট্যাবগুলি স্বয়ংক্রিয়ভাবে PagerAdapter থেকে পৃষ্ঠার শিরোনাম দিয়ে তৈরি হয়:
এই পৃষ্ঠার কন্টেন্ট ও কোডের নমুনাগুলি Content License-এ বর্ণিত লাইসেন্সের অধীনস্থ। Java এবং OpenJDK হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-07-29 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-07-29 UTC-তে শেষবার আপডেট করা হয়েছে।"],[],[],null,["# Create swipe views with tabs using ViewPager\n\n| **Caution:** ViewPager has been deprecated and replaced with the [`ViewPager2`](/reference/kotlin/androidx/viewpager2/widget/ViewPager2) library. For more information, read the [ViewPager2 migration\n| guide](/training/animation/vp2-migration), then learn how to [create swipe views\n| with tabs using ViewPager2](/guide/navigation/navigation-swipe-view-2).\n\nSwipe views let you navigate between sibling screens, such as tabs, with a\nhorizontal finger gesture, or *swipe* . This navigation pattern is also referred\nto as *horizontal paging*. This topic teaches you how to create a tab layout\nwith swipe views for switching between tabs, along with how to show a title\nstrip instead of tabs.\n\nImplement swipe views\n---------------------\n\nYou can create swipe views using AndroidX's\n[`ViewPager`](/reference/kotlin/androidx/viewpager/widget/ViewPager) widget.\nTo use a `ViewPager` and tabs, you need to add dependencies for\n[`ViewPager`](/jetpack/androidx/releases/viewpager#androidx-deps) and\n[Material Components](https://material.io/develop/android/docs/getting-started/)\nto your project.\n\nTo set up your layout with `ViewPager`, add the `\u003cViewPager\u003e` element to your\nXML layout. For example, if each page in the swipe view uses the\nentire layout, then your layout looks like this: \n\n \u003candroidx.viewpager.widget.ViewPager\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:id=\"@+id/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\" /\u003e\n\nTo insert child views that represent each page, you need to hook this layout to\na [`PagerAdapter`](/reference/androidx/viewpager/widget/PagerAdapter). You can\nchoose between two kinds of built-in adapters:\n\n- [`FragmentPagerAdapter`](/reference/androidx/fragment/app/FragmentPagerAdapter): use this when navigating between a small, fixed number of sibling screens.\n- [`FragmentStatePagerAdapter`](/reference/androidx/fragment/app/FragmentStatePagerAdapter): use this when paging across an unknown number of pages. `FragmentStatePagerAdapter` optimizes memory usage by destroying fragments as the user navigates away.\n\nAs an example, here is how you might use `FragmentStatePagerAdapter` to swipe\nacross a collection of `Fragment` objects: \n\n### Kotlin\n\n```kotlin\nclass CollectionDemoFragment : Fragment() {\n // When requested, this adapter returns a DemoObjectFragment\n // representing an object in the collection.\n private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter\n private lateinit var viewPager: ViewPager\n\n override fun onCreateView(inflater: LayoutInflater,\n container: ViewGroup?,\n savedInstanceState: Bundle?): View? {\n return inflater.inflate(R.layout.collection_demo, container, false)\n }\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n demoCollectionPagerAdapter = DemoCollectionPagerAdapter(childFragmentManager)\n viewPager = view.findViewById(R.id.pager)\n viewPager.adapter = demoCollectionPagerAdapter\n }\n}\n\n// Since this is an object collection, use a FragmentStatePagerAdapter,\n// NOT a FragmentPagerAdapter.\nclass DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {\n\n override fun getCount(): Int = 100\n\n override fun getItem(i: Int): Fragment {\n val fragment = DemoObjectFragment()\n fragment.arguments = Bundle().apply {\n // Our object is just an integer :-P\n putInt(ARG_OBJECT, i + 1)\n }\n return fragment\n }\n\n override fun getPageTitle(position: Int): CharSequence {\n return \"OBJECT ${(position + 1)}\"\n }\n}\n\nprivate const val ARG_OBJECT = \"object\"\n\n// Instances of this class are fragments representing a single\n// object in the collection.\nclass DemoObjectFragment : Fragment() {\n\n override fun onCreateView(inflater: LayoutInflater,\n container: ViewGroup?,\n savedInstanceState: Bundle?): View {\n return inflater.inflate(R.layout.fragment_collection_object, container, false)\n }\n\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {\n val textView: TextView = view.findViewById(android.R.id.text1)\n textView.text = getInt(ARG_OBJECT).toString()\n }\n }\n}\n```\n\n### Java\n\n```java\npublic class CollectionDemoFragment extends Fragment {\n // When requested, this adapter returns a DemoObjectFragment\n // representing an object in the collection.\n DemoCollectionPagerAdapter demoCollectionPagerAdapter;\n ViewPager viewPager;\n\n @Nullable\n @Override\n public View onCreateView(@NonNull LayoutInflater inflater,\n @Nullable ViewGroup container,\n @Nullable Bundle savedInstanceState) {\n return inflater.inflate(R.layout.collection_demo, container, false);\n }\n\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());\n viewPager = view.findViewById(R.id.pager);\n viewPager.setAdapter(demoCollectionPagerAdapter);\n }\n}\n\n// Since this is an object collection, use a FragmentStatePagerAdapter,\n// NOT a FragmentPagerAdapter.\npublic class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {\n public DemoCollectionPagerAdapter(FragmentManager fm) {\n super(fm);\n }\n\n @Override\n public Fragment getItem(int i) {\n Fragment fragment = new DemoObjectFragment();\n Bundle args = new Bundle();\n // Our object is just an integer :-P\n args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);\n fragment.setArguments(args);\n return fragment;\n }\n\n @Override\n public int getCount() {\n return 100;\n }\n\n @Override\n public CharSequence getPageTitle(int position) {\n return \"OBJECT \" + (position + 1);\n }\n}\n\n// Instances of this class are fragments representing a single\n// object in the collection.\npublic class DemoObjectFragment extends Fragment {\n public static final String ARG_OBJECT = \"object\";\n\n @Override\n public View onCreateView(LayoutInflater inflater,\n ViewGroup container, Bundle savedInstanceState) {\n return inflater.inflate(R.layout.fragment_collection_object, container, false);\n }\n\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n Bundle args = getArguments();\n ((TextView) view.findViewById(android.R.id.text1))\n .setText(Integer.toString(args.getInt(ARG_OBJECT)));\n }\n}\n```\n\nThe following sections show how you can add tabs to help facilitate navigation\nbetween pages.\n\nAdd tabs using a TabLayout\n--------------------------\n\nA [`TabLayout`](/reference/com/google/android/material/tabs/TabLayout) provides\na way to display tabs horizontally. When used together with a `ViewPager`, a\n`TabLayout` provides a familiar interface for navigating between pages in a\nswipe view.\n\n**Figure 1.** A `TabLayout` with four tabs.\n\nTo include a `TabLayout` in a `ViewPager`, add a `\u003cTabLayout\u003e` element inside\nthe `\u003cViewPager\u003e` element, as shown below: \n\n \u003candroidx.viewpager.widget.ViewPager\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:id=\"@+id/pager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\u003e\n\n \u003ccom.google.android.material.tabs.TabLayout\n android:id=\"@+id/tab_layout\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\" /\u003e\n\n \u003c/androidx.viewpager.widget.ViewPager\u003e\n\nNext, use\n[`setupWithViewPager()`](/reference/com/google/android/material/tabs/TabLayout#setupWithViewPager(android.support.v4.view.ViewPager))\nto link the `TabLayout` to the `ViewPager`. The individual tabs in the\n`TabLayout` are automatically populated with the page titles from the\n`PagerAdapter`: \n\n### Kotlin\n\n```kotlin\nclass CollectionDemoFragment : Fragment() {\n ...\n override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n val tabLayout = view.findViewById(R.id.tab_layout)\n tabLayout.setupWithViewPager(viewPager)\n }\n ...\n}\n\nclass DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {\n\n override fun getCount(): Int = 4\n\n override fun getPageTitle(position: Int): CharSequence {\n return \"OBJECT ${(position + 1)}\"\n }\n ...\n}\n```\n\n### Java\n\n```java\npublic class CollectionDemoFragment extends Fragment {\n ...\n @Override\n public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {\n TabLayout tabLayout = view.findViewById(R.id.tab_layout);\n tabLayout.setupWithViewPager(viewPager);\n }\n ...\n}\n\npublic class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {\n ...\n @Override\n public int getCount() {\n return 4;\n }\n\n @Override\n public CharSequence getPageTitle(int position) {\n return \"OBJECT \" + (position + 1);\n }\n\n ...\n}\n```\n| **Note:** If you have a large or potentially infinite number of pages, set the `android:tabMode` attribute on your `TabLayout` to `\"scrollable\"`. This prevents `TabLayout` from trying to fit all tabs on the screen at once and lets users scroll through the list of tabs.\n\nFor additional design guidance for tab layouts, see the\n[Material Design documentation for tabs](https://material.io/design/components/tabs.html)."]]