ساخت دکمه (باتن) فلت [ آموزش ]

احتمالا با طراحی فلت آشنایی دارید . در اینجا نحوه ساخت یک Flat Button ساده رو توضیح میدم : 

ابتدا در پوشه values که زیر مجموعه res هست یه فایل xml با نام colors.xml میسازیم و کد های زیر رو داخل اون قرار میدیم :

تذکر : اگه فایل های colors و dimens در پوشه وجود داشت نیازی نیست دوباره بسازید و فقط خط های دوم و سوم رو به اونها اضافه کنید . 

<resources>
    <color name="blue_pressed">@android:color/holo_blue_dark</color>
    <color name="blue_normal">@android:color/holo_blue_light</color>
</resources>

سپس یه فایل xml دیگه با نام dimen.xml داخل پوشه values میسازیم با محتوی زیر : 

<resources>
    <dimen name="corner_radius">4dp</dimen>
    <dimen name="layer_padding">3dp</dimen>
</resources>

* : این دو تا فایل رنگ و padding باتن رو تعیین میکنه .

قدم بعدی : ساخت shape برای button به سه تا فایل xml دیگه نیاز داریم که این سه تا رو باید داخل پوشه drawable ایجاد کنید .

1- rect_pressed.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners android:radius="@dimen/corner_radius" />
    <solid android:color="@color/blue_pressed" />
</shape>

2- rect_normal.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rect_pressed" />

    <item android:bottom="@dimen/layer_padding">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/corner_radius" />
            <solid android:color="@color/blue_normal" />
        </shape>
    </item>
</layer-list>

3- flat_selector.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/rect_pressed"/>
    <item android:drawable="@drawable/rect_normal"/>
</selector>

ساختن flat button به پایان رسید . برای استفاده از اون باید از قسمت properties مربوط به باتن بک گراند اون رو به این صورت وارد کنید : 

از طریق کد xml :

android:background="@drawable/flat_selector"

یا با استفاده از properties باتن رو انتخاب و در قسمت background آدرس @drawable/flat_selector رو وارد میکنیم .

نتیجه نهایی :