অ্যান্ড্রয়েড অ্যাপে ট্যাব লেআউট (TabLayout) তৈরি করা

Material Design TabLayout এবং ViewPager ব্যবহার করে স্বাইপেবল ট্যাব তৈরি

এই উদাহরণে TabLayout, ViewPager এবং FragmentPagerAdapter ব্যবহার করে তিনটি ট্যাব (Football, Cricket, NBA) সহ একটি ট্যাব লেআউট তৈরি করা হয়েছে।

প্রথম ধাপ: প্রজেক্ট তৈরি করুন

Android Studio-তে নতুন প্রজেক্ট তৈরি করুন।

দ্বিতীয় ধাপ: ডিপেন্ডেন্সি যোগ করুন

build.gradle (Module: app) - Material Design লাইব্রেরি:

implementation 'com.android.support:design:28.0.0'

নোট: AndroidX-এ implementation 'com.google.android.material:material:1.10.0' ব্যবহার করুন।

তৃতীয় ধাপ: মূল লেআউট

res/layout/activity_main.xml - TabLayout এবং ViewPager:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1db995">
    </android.support.design.widget.TabLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tabLayout"
        android:layout_centerInParent="true"
        android:layout_marginTop="100dp"
        tools:layout_editor_absoluteX="8dp" />
        
</RelativeLayout>

চতুর্থ ধাপ: মেইন এক্টিভিটি

src/MainActivity.java - ট্যাব সেটআপ এবং ViewPager অ্যাডাপ্টার কানেক্ট:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;

public class MainActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewPager;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.viewPager);
        
        // ট্যাব যোগ করা
        tabLayout.addTab(tabLayout.newTab().setText("Football"));
        tabLayout.addTab(tabLayout.newTab().setText("Cricket"));
        tabLayout.addTab(tabLayout.newTab().setText("NBA"));
        
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); // ট্যাবগুলো সমান প্রস্থে ছড়িয়ে দাও
        
        // অ্যাডাপ্টার সেট
        final MyAdapter adapter = new MyAdapter(this, getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        
        // ViewPager свайপ ↔ TabLayout সিঙ্ক
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        
        // ট্যাব ক্লিক ↔ ViewPager সিঙ্ক
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }
            @Override public void onTabUnselected(TabLayout.Tab tab) {}
            @Override public void onTabReselected(TabLayout.Tab tab) {}
        });
    }
}

পঞ্চম ধাপ: FragmentPagerAdapter ক্লাস

MyAdapter.java - ফ্র্যাগমেন্ট ম্যানেজমেন্ট:

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentManager;

class MyAdapter extends FragmentPagerAdapter {
    Context context;
    int totalTabs;
    
    public MyAdapter(Context c, FragmentManager fm, int totalTabs) {
        super(fm);
        context = c;
        this.totalTabs = totalTabs;
    }
    
    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: return new Football();
            case 1: return new Cricket();
            case 2: return new NBA();
            default: return null;
        }
    }
    
    @Override
    public int getCount() {
        return totalTabs;
    }
}

ষষ্ঠ ধাপ: তিনটি ফ্র্যাগমেন্ট এবং তাদের লেআউট

Football.java / fragment_football.xml

// Football.java
public class Football extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_football, container, false);
    }
}

// fragment_football.xml
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TextView android:layout_width="match_parent" android:layout_height="match_parent"
        android:textAlignment="center" android:text="Football Fragment"
        android:textSize="16sp" android:textStyle="bold"/>
</FrameLayout>

Cricket.java / fragment_cricket.xml

// Cricket.java
public class Cricket extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_cricket, container, false);
    }
}

// fragment_cricket.xml
<FrameLayout ...>
    <TextView ... android:text="Cricket Fragment" ... />
</FrameLayout>

NBA.java / fragment_nba.xml

// NBA.java
public class NBA extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_nba, container, false); // নোট: fragment_nb → fragment_nba
    }
}

// fragment_nba.xml
<FrameLayout ...>
    <TextView ... android:text="NBA Fragment" ... />
</FrameLayout>

সপ্তম ধাপ: ম্যানিফেস্ট ফাইল

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

গুরুত্বপূর্ণ উন্নতি (আধুনিক AndroidX)

• FragmentPagerAdapter ডিপ্রিকেটেড → FragmentStateAdapter (ViewPager2-এ) ব্যবহার করুন
• ViewPager → ViewPager2 (RecyclerView-ভিত্তিক, ভালো পারফরম্যান্স)
• Dependency: implementation 'androidx.viewpager2:viewpager2:1.0.0'
• TabLayout-এ TabLayoutMediator ব্যবহার করে ViewPager2 সাথে বাঁধুন

TabLayout কাস্টমাইজেশন

• app:tabMode="fixed|scrollable" - ফিক্সড বা স্ক্রোলযোগ্য
• app:tabGravity="fill|center" - প্রস্থ বিতরণ
• app:tabIndicatorColor, app:tabSelectedTextColor - রঙ কাস্টমাইজ
• tabLayout.setupWithViewPager(viewPager) - অটো সিঙ্ক (অ্যাডাপ্টারের getPageTitle() ব্যবহার করে)

অ্যাপ্লিকেশন চালান

ট্যাব ক্লিক বা সোয়াইপ করলে Football, Cricket, NBA ফ্র্যাগমেন্টগুলো পরিবর্তন হবে।