ساخت دکمه های (button) زیبا با selector در برنامه اندروید

در این آموزش قصد داریم نحوه ساخت دکمه ها (button) را با استفاده از selector در اندروید شرح بدیم. منبع کدهای این آموزش، در انتها نوشته شده است.

ابتدا نگاهی به ظاهر این دکمه ها، در 6 رنگ مختلف، بیندازید و سپس ادامه این مبحث را بخوانید :

ساخت دکمه های (button) زیبا با selector در برنامه اندروید

نمایش دکمه در حالت عادی و در حالتی که کاربر به آن اشاره می کند (آن را انتخاب می کند)، متفاوت خواهد بود و مشخصات این دو حالت را در کدهای selector ای که می سازیم، خواهیم نوشت.

قبلا روند ساخت دکمه در اندروید را آموزش دادیم و دوباره جزئیات را تکرار نمی کنیم. یک فایل xml برای selector مورد نظرمان می سازیم. نام فایل xml را برابر button_selector.xml انتخاب می کنیم و آن را در فولدر drawable-hdpi از پروژه اندروید خواهیم ساخت.

کد درون این فایل را بر اساس اینکه چه رنگی برای دکمه مد نظرمان است، به صورت یکی از کدهای زیر خواهیم نوشت :

کدهای دکمه (button) قرمز رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#ef4444" />

            <stroke

                android:width="1dp"

                android:color="#992f2f" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#ef4444"

                android:endColor="#992f2f"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#992f2f" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

کدهای دکمه (button) آبی رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#449def" />

            <stroke

                android:width="1dp"

                android:color="#2f6699" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#449def"

                android:endColor="#2f6699"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#2f6699" />

            <corners

                android:radius="4dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

کدهای دکمه (button) بنفش رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#a276eb" />

            <stroke

                android:width="1dp"

                android:color="#6a3ab2" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#a276eb"

                android:endColor="#6a3ab2"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#6a3ab2" />

            <corners

                android:radius="4dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

کدهای دکمه (button) سبز رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#70c656" />

            <stroke

                android:width="1dp"

                android:color="#53933f" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#70c656"

                android:endColor="#53933f"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#53933f" />

            <corners

                android:radius="4dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

کدهای دکمه (button) زرد رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#f3ae1b" />

            <stroke

                android:width="1dp"

                android:color="#bb6008" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#f3ae1b"

                android:endColor="#bb6008"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#bb6008" />

            <corners

                android:radius="4dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

کدهای دکمه (button) سیاه رنگ :

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >

        <shape>

            <solid

                android:color="#343434" />

            <stroke

                android:width="1dp"

                android:color="#171717" />

            <corners

                android:radius="3dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

    <item>

        <shape>

            <gradient

                android:startColor="#343434"

                android:endColor="#171717"

                android:angle="270" />

            <stroke

                android:width="1dp"

                android:color="#171717" />

            <corners

                android:radius="4dp" />

            <padding

                android:left="10dp"

                android:top="10dp"

                android:right="10dp"

                android:bottom="10dp" />

        </shape>

    </item>

</selector>

بعد از ساخت فایل button_selector.xml ، یک button را در فایل xml مربوط به activity (منظورمان فایل button_selector.xml نیست بلکه یک فایل xml دیگر که برای نمایش activity به کار می رود) می سازیم. باید کد زیر را به کدهای مربوط به button در فایل xml مورد نظر اضافه کنیم :

android:background="@drawable/button_selector"

مثلا همانند کد زیر (به خط آخر کدها دقت کنید) :

<Button

            android:id="@+id/button_previous"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="0.24"

            android:text="@string/previous"

            android:textSize="@dimen/button_text_size"

            android:background="@drawable/button_selector" />