[Android] เทสีใส่ ImageView ด้วย TintColor

          สวัสดีพี่น้องชาว Android Developer ทุกท่าน วันนี้ผมกลับมาอีกครั้งกับการเทสีใส่ ImageView ปกติแล้วเวลา Design ออกแบบหน้าตาของแอพมาให้เราทำ เขาก็จะให้พวก Icon มาด้วยเป็นไฟล์รูปภาพ ซึ่งพอเวลาจะเปลี่ยนสี Icon แต่ก่อนเราก็มักจะให้ Export รูปที่เปลี่ยนสีมาใหม่ หรือเข้า Photoshop ไปเปลี่ยนสีเอง แต่จริงๆแล้วไม่ต้องทำอะไรให้ยุ่งยากแบบนั้นก็ได้ครับ เพราะ Android มี Function ที่ทำเรื่องแบบนี้อยู่แล้วนั่นก็คือ Tint Color

          ก่อนอื่นเลยเราก็ต้องมีรูป Icon ที่เราอยากได้เสียก่อน ลองไปโหลดจาก Google Design มาเล่นกันได้เลยครับ แล้วเอาไปโยนไว้ใน Drawable ตามปกติ

          หลังจากได้ Icon แล้วเราก็มาสร้าง XML Layout กัน เอาแบบใส่ ImageView ปกติก่อน (ผมใส่สีพื้นหลังเป็นสีดำ จะได้เห็น Icon สีขาวชัดๆ)

[xml] <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/black"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_centerInParent="true"
android:src="@drawable/ic_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>
[/xml]

          จากนั้นใส่คำสั่งเพิ่มเข้าไปใน ImageView ด้วย android:tint=”#3F51B5″ ใส่รหัสสีที่ต้องการเข้าไปได้เลย หรือใส่จาก color xml แบบผมก็ได้

[xml] <ImageView
android:layout_centerInParent="true"
android:tint="@color/blue"
android:src="@drawable/ic_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
[/xml]

          เมื่อใส่สีแล้วจะได้ออกมาเป็นแบบนี้

          นอกจากจะสั่งจาก XML ยังสามารถสั่งเปลี่ยนด้วยการเขียน Code Java ได้อีกด้วย

[java] ImageView imgSetting = (ImageView)findViewById(R.id.imgsetting);
int color = Color.parseColor("#FF00FF");
imgSetting.setColorFilter(color);
[/java]

          ยัง ยังไม่จบเราสามารถใช้งานร่วมกับ Shape XML ได้อีกด้วยเพื่อความสวยงาม ใครสนใจว่า Shape XML คืออะไรอ่านได้ที่ [Android Design] สร้างภาพง่ายๆจาก XML ด้วย Shape [Drawable Resource]

bg_circle_white.xml จะเป็น XML สำหรับกำหนดรูปร่างเป็นรูปวงกลมสีขาว
[xml] <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid
android:color="@color/white"/>

</shape>
[/xml]

          เปลี่ยน Code ใน Layout XML นิดหน่อย

[xml] <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/black"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_centerInParent="true"
android:padding="8dp"
android:background="@drawable/bg_circle_white"
android:tint="@color/blue"
android:src="@drawable/ic_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>
[/xml]