Android: Custom Button Backgrounds Using A Selector XML Layout


Custom Button Backgrounds Using A Selector XML Layout

ก่อนที่จะย้ายห้องทำงานเป็นครั้งที่ 3 ในรอบ 2 ปี ขอเวลามีเขียนบทความนี้เก็บเอาไว้ก่อน เนื่องด้วยน้องๆ ที่เขียน android ในศูนย์ถามว่า ทำปุ่มแบบมีภาพแบล็คกราวเปลี่ยนได้ตามสถานะ ปกติ และ กดทำอย่างไร ผมก็ไปนั่งเซิสหามาให้ …จัดไป วิธีทำมันคือเราต้องสร้าง selector xml มาก่อนแล้วจึงเอาไปใส่ค่า  android:background ของปุ่ม เท่านั้นเอง

ขั้นตอน

1. หารูปภาพประกอบแต่ละ state ด้วยนะ: default, focused, pressed and focused&pressed

2. สร้าง selector.xml ที่โฟลเดอร์ @drawable ในไฟล์ selector.xml นี้จะเป็นการกำหนด ว่า state ไหนจะให้แสดงภาพอะไร

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/focused" />
      <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/focusedpressed" />
      <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/pressed" />
      <item android:drawable="@drawable/defaultbutton" />
</selector>

3. เซ็ต background property ของ ปุ่มให้มาที่ไฟล์ selector.xml โดย

<Button android:text="Button" android:id="@+id/button2" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:background="@drawable/selector">
</Button>

4. ลองรันโปรแกรมดู เสร็จแล้วครับผม

ตอนนี้ทำได้แค่ 2 state เองครับ pressed และ default ให้เปลี่ยนภาพเท่านั้นเอง

Referrence

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on มีนาคม 4, 2011, in [Dev] Android and tagged , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: