หลายๆคนอาจเคยสร้างปุ่ม Facebook ขึ้นมาจาก Guide line  ของ Facebook SDK แล้ว แต่ปุ่มที่ได้มานั้นอาจไม่เข้ากับ UI ของเราสักเท่าไหร่ เช่น โลโก้ที่ดูเล็กไปหรือใหญ่ไป วันนี้ผมมีวิธีง่ายๆมาฝากกันครับ (เพราะจริงๆแล้วมันก็ใช้แค่ 2 บรรทัดนั้นแหละ ไม่ได้มีอะไรพิเศษเลย 555)

เนื่องจากบทความการสร้างปุ่ม Facebook login button มีเยอะมากมายทั้งภาษาไทย, อังกฤษ และ Official Document ก็อธิบายดีอยู่แล้ว ดังนั้นบทความนี้จะไม่ได้เน้นไปที่การสร้างปุ่ม แต่จะลัดมาที่การปรับแต่งเลยครับ

ใครที่ต้องการเริ่มต้นจากการสร้างปุ่มเลยก็อ่านบทความนี้ก่อนจ้า สร้าง Facebook Login ด้วย Android Studio

ปุ่ม Facebook Login ปกติ

2017-01-12_8-40-03

จะเห็นว่าโลโกที่ได้มาดูเล็กไปหน่อย ไม่เข้ากับขนาดของตัวอักษรเลย วิธีแก้ไขแค่เพิ่มไป 2 บรรทัดแค่นี้

val facebookIcon = ContextCompat.getDrawable(activity, R.drawable.ic_f_white)
btFacebookLogin.setCompoundDrawablesWithIntrinsicBounds(facebookIcon, null, null, null)

อาจจะดูแปลกๆไป ใช่แล้วครับโค้ดข้างบนนี้ไม่ใช่ Java แต่เป็น Kotlin พอดีช่วงนี้ลองเขียน Kotlin แบบงูๆปลาๆอยู่ ถ้าเป็น java หน้าตาก็จะไม่ค่อยต่างจากเดิมเท่าไหร่นะ ดังนั้นเรียนรู้ไม่ยากเลย และตัว Kotlin ก็สามารถ Transform java code เป็น Kotlin ให้ง่ายๆภายใน 1 วินาทีเลยทีเดียว(เอาไว้บทความถัดๆไปจะมาเล่าเรื่อง Kotlin นะครับ บอกให้อยากไว้ก่อนว่า Kotlin มันสนุกมากๆ) เพื่อความคุ้นเคย เราจะกลับมาที่ Java กันก่อน

Drawable facebookIcon = ContextCompat.getDrawable(getContext(), R.drawable.ic_f_white);
btFacebookLogin.setCompoundDrawablesWithIntrinsicBounds(facebookIcon, null, null, null);

บรรทัดแรกเป็นการดึงภาพโลโก้ที่เตรียมไว้มาเก็บเป็นตัวแปรประเภท Drawable ไว้ก่อน
จากนั้นบรรทัดที่ 2 เป็นคำสั่งในการเปลี่ยนโลโก้ให้เป็นไปตาม Drawable ที่เตรียมไว้จากบรรทัดแรก ผ่านคำสั่ง setCompoundDrawablesWithIntrinsicBounds() ซึ่งแน่นอนว่าเราต้องโยน Drawable เข้าไปใน method นี้ด้วย ง่ายๆเท่านี้ เองผลลัพธ์ก็ตามภาพข้างล่างนี้ครับ

2017-01-12_8-34-00
ปุ่มที่ผ่านการปรับแล้ว

สำหรับวันนี้ก็เป็นบทความเบาๆสั้นๆเพียงเท่านี้ครับ เพราะเกิดจาก need ส่วนตัวของผมเองที่ไม่ชอบโลโก้ default ที่ติดมาเพราะมันเล็กไปหน่อย เลยไปหาวิธีการมา แล้วก็นำมาฝากทุกคน หวังว่าจะเป็นประโยชน์นะคร้าาฟ

อ้างอิง

http://stackoverflow.com/questions/4502605/how-to-programatically-set-drawableleft-on-android-button

Advertisements