ساخت دکمه های (button) زیبا با selector در برنامه اندروید
در این آموزش قصد داریم نحوه ساخت دکمه ها (button) را با استفاده از selector در اندروید شرح بدیم. منبع کدهای این آموزش، در انتها نوشته شده است.
ابتدا نگاهی به ظاهر این دکمه ها، در 6 رنگ مختلف، بیندازید و سپس ادامه این مبحث را بخوانید :
نمایش دکمه در حالت عادی و در حالتی که کاربر به آن اشاره می کند (آن را انتخاب می کند)، متفاوت خواهد بود و مشخصات این دو حالت را در کدهای selector ای که می سازیم، خواهیم نوشت.
قبلا روند ساخت دکمه در اندروید را آموزش دادیم و دوباره جزئیات را تکرار نمی کنیم. یک فایل xml برای selector مورد نظرمان می سازیم. نام فایل xml را برابر button_selector.xml انتخاب می کنیم و آن را در فولدر drawable-hdpi از پروژه اندروید خواهیم ساخت.
کد درون این فایل را بر اساس اینکه چه رنگی برای دکمه مد نظرمان است، به صورت یکی از کدهای زیر خواهیم نوشت :
کدهای دکمه (button) قرمز رنگ :
<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) آبی رنگ :
<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) بنفش رنگ :
<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) سبز رنگ :
<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) زرد رنگ :
<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) سیاه رنگ :
<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: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" />
