Android में कस्टम ड्रॉएबल के साथ बटन का रंग बदलें

यह ट्यूटोरियल दिखाता है कि XML StateListDrawable (सेलेक्टर) का उपयोग करके मानक Android Button के रंग को विभिन्न स्थितियों (दबाया गया, फोकस्ड, डिफ़ॉल्ट) के लिए कैसे अनुकूलित किया जाए। यह कस्टम View क्लास लिखे बिना बटन स्टाइलिंग के लिए अनुशंसित दृष्टिकोण है।

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

Android Studio → New Project → Empty Activity → नाम: CustomButtonColor।

चरण 2: ड्रॉएबल सेलेक्टर बनाएं

res/drawable/button_background.xml - यह फ़ाइल विभिन्न बटन स्थितियों के लिए रंग/ग्रेडिएंट को परिभाषित करती है।

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

    <!-- दबाया गया स्थिति -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#FFEB3B"
                android:endColor="#FDD835"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#F9A825" />
            <corners android:radius="8dp" />
            <padding
                android:left="16dp"
                android:top="12dp"
                android:right="16dp"
                android:bottom="12dp" />
        </shape>
    </item>

    <!-- फोकस्ड स्थिति (कीबोर्ड/एक्सेसिबिलिटी नेविगेशन) -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#FF9800"
                android:endColor="#F57C00"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#E65100" />
            <corners android:radius="8dp" />
            <padding
                android:left="16dp"
                android:top="12dp"
                android:right="16dp"
                android:bottom="12dp" />
        </shape>
    </item>

    <!-- डिफ़ॉल्ट/सामान्य स्थिति -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#2196F3"
                android:endColor="#1976D2"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#0D47A1" />
            <corners android:radius="8dp" />
            <padding
                android:left="16dp"
                android:top="12dp"
                android:right="16dp"
                android:bottom="12dp" />
        </shape>
    </item>

</selector>

चरण 3: लेआउट में बटन पर ड्रॉएबल लागू करें

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="24dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/customButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="कस्टम बटन"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        android:background="@drawable/button_background"
        android:minWidth="200dp" />

    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="बटन को दबाएं, फोकस करें, या छोड़ें"
        android:textSize="14sp"
        android:textColor="#666666" />
</LinearLayout>

चरण 4: MainActivity.java (वैकल्पिक इंटरैक्शन फीडबैक)

package com.example.custombuttoncolor;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        Button button = findViewById(R.id.customButton);
        TextView tvStatus = findViewById(R.id.tvStatus);

        button.setOnTouchListener((v, event) -> {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    tvStatus.setText("स्थिति: दबाया गया (Pressed)");
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    tvStatus.setText("स्थिति: सामान्य (Default)");
                    break;
            }
            return false; // इवेंट को बटन तक पहुंचने दें
        });

        button.setOnFocusChangeListener((v, hasFocus) -> {
            if (hasFocus) {
                tvStatus.setText("स्थिति: फोकस्ड (Focused)");
            }
        });

        button.setOnClickListener(v -> {
            tvStatus.setText("क्लिक किया गया! स्थिति: सामान्य");
        });
    }
}

StateListDrawable (Selector) समझाया गया

Shape Drawable तत्व

ग्रेडिएंट प्रकार

• android:type="linear" (डिफ़ॉल्ट) - रैखिक ग्रेडिएंट
• android:type="radial" - त्रिज्यीय ग्रेडिएंट (centerX, centerY, gradientRadius आवश्यक)
• android:type="sweep" - स्वीप ग्रेडिएंट

आधुनिक विकल्प: MaterialButton (Material Components)

नए ऐप्स के लिए, com.google.android.material.button.MaterialButton का उपयोग करने पर विचार करें जिसमें अंतर्निहित थीमिंग समर्थन है:

<!-- build.gradle निर्भरता -->
implementation "com.google.android.material:material:1.11.0"

<!-- लेआउट -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material Button"
    app:backgroundTint="@color/colorPrimary"
    app:cornerRadius="8dp"
    app:strokeColor="@color/colorPrimaryDark"
    app:strokeWidth="2dp" />

रंग संसाधन सर्वोत्तम अभ्यास

हार्डकोडेड रंगों के बजाय res/values/colors.xml का उपयोग करें:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="btn_default_start">#2196F3</color>
    <color name="btn_default_end">#1976D2</color>
    <color name="btn_pressed_start">#FFEB3B</color>
    <color name="btn_pressed_end">#FDD835</color>
    <color name="btn_focused_start">#FF9800</color>
    <color name="btn_focused_end">#F57C00</color>
    <color name="btn_stroke_default">#0D47A1</color>
    <color name="btn_stroke_pressed">#F9A825</color>
    <color name="btn_stroke_focused">#E65100</color>
</resources>

फिर ड्रॉएबल में: android:startColor="@color/btn_default_start"

निष्कर्ष

XML StateListDrawable (सेलेक्टर) का उपयोग करना कस्टम जावा/कोटलिन कोड लिखे बिना Android में स्टेटफुल बटन पृष्ठभूमि बनाने का घोषित, प्रदर्शनकारी और रखरखाव योग्य तरीका है। यह सभी API स्तरों पर काम करता है और Material Design सिद्धांतों के साथ अच्छी तरह से एकीकृत होता है।