एंड्रॉइड ऐप में कोटलिन का उपयोग करके टैब लेआउट कैसे बनाएं?

एंड्रॉइड में TabLayout और ViewPager2 के साथ टैब बनाना

यह उदाहरण दर्शाता है कि Material Design के TabLayout और ViewPager2 का उपयोग करके स्वाइप करने योग्य टैब इंटरफ़ेस कैसे बनाया जाए।

निर्भरताएं (build.gradle)

dependencies {
    implementation "com.google.android.material:material:1.11.0"
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    implementation "androidx.fragment:fragment-ktx:1.6.2"
}

चरण 1: नया प्रोजेक्ट बनाएं

एंड्रॉइड स्टूडियो में File → New Project चुनें।

चरण 2: मुख्य लेआउट (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"> 
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/white"
        app:tabIndicatorColor="@android:color/white"
        app:tabMode="fixed"
        app:tabGravity="fill" /> 
    
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" /> 
        
</LinearLayout>

चरण 3: MainActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager2
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        tabLayout = findViewById(R.id.tabLayout)
        viewPager = findViewById(R.id.viewPager)
        
        // एडाप्टर सेट करें
        val adapter = TabAdapter(this)
        viewPager.adapter = adapter
        
        // TabLayout को ViewPager2 से जोड़ें
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = when (position) {
                0 -> "फुटबॉल"
                1 -> "क्रिकेट"
                2 -> "NBA"
                else -> "टैब $position"
            }
        }.attach()
    }
}

चरण 4: TabAdapter.kt (FragmentStateAdapter)

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class TabAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 3
    
    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> FootballFragment()
        1 -> CricketFragment()
        2 -> NBAFragment()
        else -> FootballFragment()
    }
}

चरण 5: फ्रैगमेंट क्लासेस

// FootballFragment.kt
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class FootballFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, 
        container: ViewGroup?, 
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_football, container, false)
    }
}

// CricketFragment.kt
class CricketFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, 
        container: ViewGroup?, 
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_cricket, container, false)
    }
}

// NBAFragment.kt
class NBAFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, 
        container: ViewGroup?, 
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_nba, container, false)
    }
}

चरण 6: फ्रैगमेंट लेआउट्स

<!-- fragment_football.xml -->
<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"> 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="फुटबॉल फ्रैगमेंट"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_green_dark" /> 
</FrameLayout>

<!-- fragment_cricket.xml -->
<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"> 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="क्रिकेट फ्रैगमेंट"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_blue_dark" /> 
</FrameLayout>

<!-- fragment_nba.xml -->
<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"> 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="NBA फ्रैगमेंट"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_orange_dark" /> 
</FrameLayout>

चरण 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="https://schemas.android.com/apk/res/android" 
    package="com.example.tablayout"> 
    <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/Theme.MaterialComponents.DayNight.NoActionBar"> 
        <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>

मुख्य सुधार (पुराने कोड बनाम नया):

• ViewPager2: पुराने ViewPager का प्रतिस्थापन, बेहतर प्रदर्शन
• FragmentStateAdapter: FragmentPagerAdapter का आधुनिक विकल्प
• TabLayoutMediator: टैब और पेजर को जोड़ने का सरल तरीका
• Material Components थीम: उचित स्टाइलिंग के लिए आवश्यक
• ऑटो-इम्पोर्ट: कोटलिन सिंटैक्स सरल और सुरक्षित