অ্যান্ড্রয়েডে XML স্টাইল ব্যবহার করে কাস্টম বাটন তৈরি করার পদ্ধতি

Shape Drawable ব্যবহার করে কাস্টম বাটন স্টাইলিং

অ্যান্ড্রয়েডে XML শেপ ড্রয়েবল (``) ব্যবহার করে বাটনের পৃষ্ঠভূমি, বর্ডার, রাউন্ডেড কর্নার, গ্রেডিয়েন্ট ইত্যাদি কাস্টমাইজ করা যায়। এটি ছবি (PNG/JPG) ব্যবহার না করে ভেক্টর-ভিত্তিক স্টাইলিং যা স্কেলেবল এবং লাইটওয়েট।

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

স্ট্যান্ডার্ড অ্যান্ড্রয়েড প্রজেক্ট।

ধাপ ২: লেআউটে তিনটি কাস্টম বাটন

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">
    <Button
        android:id="@+id/customButton"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/custom_button"
        android:text="My Custom Button" />
    <Button
        android:id="@+id/customButton2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/customButton"
        android:layout_centerInParent="true"
        android:layout_marginTop="24sp"
        android:background="@drawable/custom_button2"
        android:text="My Custom Button" />
    <Button
        android:id="@+id/customButton3"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_above="@id/customButton"
        android:layout_centerInParent="true"
        android:layout_marginBottom="24sp"
        android:background="@drawable/custom_button3"
        android:text="My Custom Button" />
</RelativeLayout>

ধাপ ৩: কাস্টম বাটন ১ - স্ট্রোক এবং রাউন্ডেড কর্নার

res/drawable/custom_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:color="#66F9B9" android:width="4dp" />
    <corners android:radius="16sp" />
</shape>

ধাপ ৪: কাস্টম বাটন ২ - গ্রেডিয়েন্ট এবং পিল শেপ

res/drawable/custom_button2.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#2AF598"
        android:centerColor="#FF1493"
        android:endColor="@color/colorPrimary" />
    <corners android:radius="50dp" />
</shape>

ধাপ ৫: কাস্টম বাটন ৩ - স olid রঙ এবং সার্কুলার

res/drawable/custom_button3.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#80121A" />
    <corners android:radius="999dp" />
</shape>

ধাপ ৬: মেইন এক্টিভিটি (কোড কম)

src/MainActivity.java - কোনো অতিরিক্ত কোড দরকার নেই:

package app.com.sample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Shape Drawable এর মূল উপাদান

এলিমেন্ট	বর্ণনা
`<solid>`	ভর রঙ (android:color)
`<stroke>`	বর্ডার (android:color, android:width, android:dashGap, android:dashWidth)
`<corners>`	কোণার রেডিয়াস (android:radius, android:topLeftRadius, ইত্যাদি)
`<gradient>`	গ্রেডিয়েন্ট (android:startColor, android:endColor, android:centerColor, android:angle, android:type)
`<padding>`	অন্দরের প্যাডিং (android:left, top, right, bottom)
`<size>`	ন্যূনতম আকার (android:width, android:height)

স্টেট-লিস্ট ড্রয়েবল (ইন্টারঅ্যাক্টিভ বাটন)

res/drawable/button_states.xml - প্রেসড, ফোকাসড, ডিজেবলড স্টেট:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#FF6B6B" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <solid android:color="#4ECDC4" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape>
            <solid android:color="#CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item> <!-- ডিফল্ট/নরমাল -->
        <shape>
            <solid android:color="#2E86DE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

অ্যান্ড্রয়েডে XML স্টাইল ব্যবহার করে কাস্টম বাটন তৈরি করার পদ্ধতি