কোটলিন ব্যবহার করে অ্যান্ড্রয়েড অ্যাপে ট্যাব লেআউট কীভাবে তৈরি করবেন?

এই উদাহরণটি প্রদর্শন করে কীভাবে অ্যান্ড্রয়েড অ্যাপে কোটলিন ব্যবহার করে ট্যাব লেআউট তৈরি করা যায়।

পদক্ষেপ ১: নতুন প্রজেক্ট তৈরি করুন

Android Studio-তে যান File → New Project এবং প্রজেক্ট তৈরি করার জন্য প্রয়োজনীয় সব বিবরণ পূরণ করুন।

পদক্ষেপ ২: res/layout/activity_main.xml-এ কোড যোগ করুন

<?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"> 
    <com.google.android.material.tabs.TabLayout 
        android:id="@+id/tabLayout" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="#1db995"> 
    </com.google.android.material.tabs.TabLayout> 
    <androidx.viewpager.widget.ViewPager 
        android:id="@+id/viewPager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_below="@id/tabLayout" 
        tools:layout_editor_absoluteX="8dp" /> 
</RelativeLayout>

পদক্ষেপ ৩: build.gradle-এ Material ডিপেন্ডেন্সি যোগ করুন

dependencies {
    implementation "com.google.android.material:material:1.11.0"
}

পদক্ষেপ ৪: src/MainActivity.kt-এ কোড যোগ করুন

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayout.OnTabSelectedListener
import com.google.android.material.tabs.TabLayout.TabLayoutOnPageChangeListener

class MainActivity : AppCompatActivity() {
    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager

    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)

        tabLayout.addTab(tabLayout.newTab().setText("Football"))
        tabLayout.addTab(tabLayout.newTab().setText("Cricket"))
        tabLayout.addTab(tabLayout.newTab().setText("NBA"))
        tabLayout.tabGravity = TabLayout.GRAVITY_FILL

        val adapter = MyAdapter(this, supportFragmentManager, tabLayout.tabCount)
        viewPager.adapter = adapter
        viewPager.addOnPageChangeListener(TabLayoutOnPageChangeListener(tabLayout))
        
        tabLayout.addOnTabSelectedListener(object : OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                viewPager.currentItem = tab.position
            }
            override fun onTabUnselected(tab: TabLayout.Tab) {}
            override fun onTabReselected(tab: TabLayout.Tab) {}
        })
    }
}

পদক্ষেপ ৫: MyAdapter.kt অ্যাডাপ্টার ক্লাস তৈরি করুন

import android.content.Context
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

class MyAdapter(
    private val context: Context,
    fm: FragmentManager,
    private val totalTabs: Int
) : FragmentPagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> Football()
            1 -> Cricket()
            2 -> NBA()
            else -> Football()
        }
    }

    override fun getCount(): Int = totalTabs
}

পদক্ষেপ ৬: তিনটি ফ্র্যাগমেন্ট তৈরি করুন

Football.kt / fragment_football.xml

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

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


<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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=".Football"> 
    <TextView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:text="Football Fragment" 
        android:textAlignment="center" 
        android:textSize="16sp" 
        android:textStyle="bold" /> 
</FrameLayout>

Cricket.kt / fragment_cricket.xml

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


<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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=".Cricket"> 
    <TextView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:text="Cricket Fragment" 
        android:textAlignment="center" 
        android:textSize="16sp" 
        android:textStyle="bold" /> 
</FrameLayout>

NBA.kt / fragment_n_b_a.xml

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


<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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=".NBA"> 
    <TextView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:text="NBA Fragment" 
        android:textAlignment="center" 
        android:textSize="16sp" 
        android:textStyle="bold" /> 
</FrameLayout>

পদক্ষেপ ৭: androidManifest.xml-এ কোড যোগ করুন

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

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

আপনার আসল অ্যান্ড্রয়েড ডিভাইস কম্পিউটারের সাথে সংযুক্ত আছে বলে ধরে। Android Studio-তে আপনার প্রজেক্টের এক্টিভিটি ফাইল খুলুন এবং টুলবারের রান আইকনে ক্লিক করুন। আপনার মোবাইল ডিভাইস সিলেক্ট করুন এবং ডিভাইসে ডিফল্ট স্ক্রিন দেখুন।