Android Switch উইজেট কাস্টমাইজ করার পদ্ধতি (স্টাইলিং)

Android Switch উইজেট কাস্টমাইজ করার পদ্ধতি (স্টাইলিং)

Android-এ Switch উইজেটের ডিফল্ট চেহারা পরিবর্তন করতে Drawable রিসোর্স (XML-এ সংজ্ঞায়িত শেপ/সিলেক্টর) ব্যবহার করা হয়। এটি ম্যাটেরিয়াল থিমের সাথে সামঞ্জস্যপূর্ণ একটি কাস্টম Switch তৈরি করার পূর্ণাঙ্গ গাইড।

প্রয়োজনীয় ধাপসমূহ

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

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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textOn="চালু"
        android:textOff="বন্ধ"
        android:thumb="@drawable/custom_switch_thumb"
        android:track="@drawable/custom_switch_track"
        android:padding="8dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/switchBtn"
        android:layout_marginTop="20dp"
        android:text="সুইচ অন/অফ করুন"
        android:textSize="24sp"
        android:textAlignment="center"
        android:textStyle="bold" />

</RelativeLayout>

ধাপ ৩: থাম্ব (Thumb) ড্রয়েবল (res/drawable/custom_switch_thumb.xml)

সুইচের চলমান বৃত্তাকার অংশ (Thumb) এর স্টাইল:

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

    <!-- ON অবস্থা (Checked) -->
    <item android:state_checked="true">
        <shape android:shape="oval">
            <size android:width="28dp" android:height="28dp" />
            <solid android:color="#4CAF50" /> <!-- সবুজ -->
            <stroke android:width="2dp" android:color="#2E7D32" />
            <!-- ছায়া ইফেক্টের জন্য elevation (API 21+) -->
        </shape>
    </item>

    <!-- OFF অবস্থা (Unchecked) -->
    <item android:state_checked="false">
        <shape android:shape="oval">
            <size android:width="28dp" android:height="28dp" />
            <solid android:color="#F44336" /> <!-- লাল -->
            <stroke android:width="2dp" android:color="#C62828" />
        </shape>
    </item>

    <!-- ডিসেবল্ড অবস্থা -->
    <item android:state_enabled="false">
        <shape android:shape="oval">
            <size android:width="28dp" android:height="28dp" />
            <solid android:color="#BDBDBD" />
        </shape>
    </item>

    <!-- ডিফল্ট (প্রেসড/ফোকাসড ইত্যাদি) -->
    <item>
        <shape android:shape="oval">
            <size android:width="28dp" android:height="28dp" />
            <solid android:color="#FFFFFF" />
            <stroke android:width="2dp" android:color="#9E9E9E" />
        </shape>
    </item>

</selector>

ধাপ ৪: ট্র্যাক (Track) ড্রয়েবল (res/drawable/custom_switch_track.xml)

সুইচের পেছনের পথ (Track) এর স্টাইল:

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

    <!-- ON অবস্থা -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="16dp" />
            <size android:width="56dp" android:height="32dp" />
            <solid android:color="#81C784" /> <!-- হালকা সবুজ -->
        </shape>
    </item>

    <!-- OFF অবস্থা -->
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <corners android:radius="16dp" />
            <size android:width="56dp" android:height="32dp" />
            <solid android:color="#E57373" /> <!-- হালকা লাল -->
        </shape>
    </item>

    <!-- ডিসেবল্ড -->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="16dp" />
            <size android:width="56dp" android:height="32dp" />
            <solid android:color="#E0E0E0" />
        </shape>
    </item>

</selector>

ধাপ ৫: MainActivity.java বাস্তবায়ন করুন

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Switch aSwitch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        aSwitch = findViewById(R.id.switchBtn);

        // পরিবর্তন লিসেনার
        aSwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) {
                Toast.makeText(MainActivity.this, "সুইচ: চালু", Toast.LENGTH_SHORT).show();
                // এখানে আপনার লজিক (যেমন: সেটিংস সেভ, সার্ভিস শুরু)
            } else {
                Toast.makeText(MainActivity.this, "সুইচ: বন্ধ", Toast.LENGTH_SHORT).show();
                // এখানে আপনার লজিক (যেমন: সার্ভিস বন্ধ)
            }
        });

        // প্রোগ্রাম্যাটিক্যালি স্টেট সেট করুন (অনিমেশন ছাড়া)
        // aSwitch.setChecked(true);
        // aSwitch.setChecked(false);
    }
}

Material Components Switch (সাম্প্রতিক Android-এ প্রস্তাবিত)

Material Components লাইব্রেরি ব্যবহার করলে MaterialSwitch (বা XML-এ <com.google.android.material.switchmaterial.SwitchMaterial>) আরও উন্নত স্টাইলিং অফার করে:

XML-এ MaterialSwitch

<com.google.android.material.switchmaterial.SwitchMaterial
    android:id="@+id/materialSwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material Switch"
    app:thumbTint="@color/selector_thumb_color"
    app:trackTint="@color/selector_track_color"
    app:useMaterialThemeColors="false" />

রঙ সিলেক্টর (res/color/selector_thumb_color.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:color="#4CAF50" android:state_checked="true" />
    <item android:color="#FFFFFF" android:state_checked="false" />
    <item android:color="#9E9E9E" /> <!-- ডিফল্ট -->
</selector>

ট্র্যাক রঙ সিলেক্টর (res/color/selector_track_color.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:color="#4CAF50" android:state_checked="true" />
    <item android:color="#E0E0E0" android:state_checked="false" />
    <item android:color="#BDBDBD" />
</selector>

থিম-লেভেল কাস্টমাইজেশন (styles.xml/themes.xml)

সমগ্র অ্যাপ্লিকেশনের Switch স্টাইল একসাথে পরিবর্তন করতে:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- Widget Switch 스타일 -->
    <item name="switchStyle">@style/Widget.MyApp.Switch</item>
    <!-- MaterialSwitch-এ -->
    <item name="materialSwitchStyle">@style/Widget.MyApp.MaterialSwitch</item>
</style>

<style name="Widget.MyApp.Switch" parent="Widget.AppCompat.CompoundButton.Switch">
    <item name="thumbTint">@color/selector_thumb_color</item>
    <item name="trackTint">@color/selector_track_color</item>
    <item name="android:thumb">@drawable/custom_switch_thumb</item>
    <item name="android:track">@drawable/custom_switch_track</item>
</style>

<style name="Widget.MyApp.MaterialSwitch" parent="Widget.MaterialComponents.CompoundButton.Switch">
    <item name="thumbTint">@color/selector_thumb_color</item>
    <item name="trackTint">@color/selector_track_color</item>
    <item name="trackThickness">4dp</item>
    <item name="thumbRadius">14dp</item>
</style>

SwitchCompat vs Switch vs MaterialSwitch

Accessibility (প্রযोज্যতা) বিবেচনা

• android:textOn এবং android:textOff সেট করুন (স্ক্রিন রিডারের জন্য)
• android:contentDescription যোগ করুন যদি টেক্সট না থাকে
• পর্যাপ্ত কনট্রাস্ট রেশিও নিশ্চিত করুন (WCAG 2.1 AA: 4.5:1)
• টাচ টার্গেট সাইজ ন্যূনতম 48x48dp (Material Design নির্দেশিকা)

ধাপ ৬: AndroidManifest.xml

<?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>

অ্যাপ্লিকেশন চালানোর পদ্ধতি

আপনার Android ডিভাইস কম্পিউটারের সাথে সংযুক্ত করুন। Android Studio-তে Run আইকনে ক্লিক করুন। সুইচ টগল করলে রঙ এবং পজিশন পরিবর্তন হবে সাথে টোস্ট মেসেজ দেখাবে।