ภาพรวมของเนื้อหาที่ถอนออกได้

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีแสดงกราฟิกในโหมดเขียน

กำลังโหลดรูปภาพ →

เมื่อต้องการแสดงรูปภาพแบบคงที่ในแอป คุณสามารถใช้คลาส Drawable และคลาสย่อยเพื่อวาดรูปร่างและรูปภาพได้ Drawable คือการแยกส่วนทั่วไปสำหรับสิ่งที่วาดได้ คลาสย่อยต่างๆ ช่วยในสถานการณ์รูปภาพที่เฉพาะเจาะจง และคุณสามารถขยายคลาสย่อยเหล่านั้นเพื่อกำหนดออบเจ็กต์ Drawable ของคุณเองซึ่งทำงานในลักษณะเฉพาะได้

นอกจากการใช้เครื่องมือสร้างคลาสแล้ว คุณยังกำหนดและสร้างอินสแตนซ์ Drawable ได้ 2 วิธี ดังนี้

• ขยายทรัพยากรรูปภาพ (ไฟล์บิตแมป) ที่บันทึกไว้ในโปรเจ็กต์
• ขยายทรัพยากร XML ที่กำหนดพร็อพเพอร์ตี้ Drawable

หมายเหตุ: คุณอาจต้องการใช้ Vector Drawable แทน ซึ่งกำหนดรูปภาพด้วยชุด จุด เส้น และเส้นโค้ง พร้อมกับข้อมูลสีที่เกี่ยวข้อง ซึ่งช่วยให้ปรับขนาดภาพวาดเวกเตอร์ ให้มีขนาดต่างๆ ได้โดยไม่สูญเสียคุณภาพ ดูข้อมูลเพิ่มเติมได้ที่ภาพรวมของ Vector Drawable

สร้าง Drawable จากรูปภาพทรัพยากร

คุณเพิ่มกราฟิกในแอปได้โดยอ้างอิงไฟล์รูปภาพจากทรัพยากรของโปรเจ็กต์ ประเภทไฟล์ที่รองรับ ได้แก่ PNG (แนะนำ), JPG (ยอมรับได้) และ GIF (ไม่แนะนำ) ไอคอนแอป โลโก้ และกราฟิกอื่นๆ เช่น กราฟิกที่ใช้ในเกม เหมาะสำหรับเทคนิคนี้

หากต้องการใช้แหล่งข้อมูลรูปภาพ ให้เพิ่มไฟล์ลงในres/drawable/ ไดเรกทอรีของโปรเจ็กต์ เมื่ออยู่ในโปรเจ็กต์แล้ว คุณจะอ้างอิงแหล่งข้อมูลรูปภาพจากโค้ดหรือเลย์เอาต์ XML ได้ ไม่ว่าจะใช้วิธีใด ระบบจะอ้างอิงโดยใช้ รหัสทรัพยากร ซึ่งก็คือชื่อไฟล์ที่ไม่มีนามสกุลประเภทไฟล์ เช่น อ้างอิงถึง my_image.png เป็น my_image

หมายเหตุ: เครื่องมือ aapt อาจเพิ่มประสิทธิภาพทรัพยากรรูปภาพที่อยู่ในไดเรกทอรี res/drawable/ โดยอัตโนมัติด้วย การบีบอัดรูปภาพแบบไม่สูญเสียข้อมูลในระหว่างกระบวนการบิลด์ เช่น PNG แบบ True Color ที่ไม่จำเป็นต้องใช้สีมากกว่า 256 สี อาจแปลงเป็น PNG แบบ 8 บิตที่มีชุดสี ซึ่งจะทำให้ได้รูปภาพ ที่มีคุณภาพเท่ากันแต่ใช้หน่วยความจำน้อยกว่า ด้วยเหตุนี้ ไบนารีของรูปภาพ ที่อยู่ในไดเรกทอรีนี้จึงอาจเปลี่ยนแปลงได้ในเวลาบิลด์ หากคุณวางแผนที่จะอ่านรูปภาพเป็นบิตสตรีมเพื่อแปลงเป็นบิตแมป ให้วางรูปภาพไว้ในโฟลเดอร์ res/raw/ แทน ซึ่งเครื่องมือ aapt จะไม่แก้ไขรูปภาพ

ข้อมูลโค้ดต่อไปนี้แสดงวิธีสร้าง ImageView ที่ใช้รูปภาพซึ่งสร้างจากทรัพยากรที่วาดได้และเพิ่มลงในเลย์เอาต์

private lateinit var constraintLayout: ConstraintLayout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Instantiate an ImageView and define its properties
    val i = ImageView(this).apply {
        setImageResource(R.drawable.my_image)
        contentDescription = resources.getString(R.string.my_image_desc)

        // set the ImageView bounds to match the Drawable's dimensions
        adjustViewBounds = true
        layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT)
    }

    // Create a ConstraintLayout in which to add the ImageView
    constraintLayout = ConstraintLayout(this).apply {

        // Add the ImageView to the layout.
        addView(i)
    }

    // Set the layout as the content view.
    setContentView(constraintLayout)
}

ConstraintLayout constraintLayout;

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // Create a ConstraintLayout in which to add the ImageView
  constraintLayout = new ConstraintLayout(this);

  // Instantiate an ImageView and define its properties
  ImageView i = new ImageView(this);
  i.setImageResource(R.drawable.my_image);
  i.setContentDescription(getResources().getString(R.string.my_image_desc));

  // set the ImageView bounds to match the Drawable's dimensions
  i.setAdjustViewBounds(true);
  i.setLayoutParams(new ViewGroup.LayoutParams(
          ViewGroup.LayoutParams.WRAP_CONTENT,
          ViewGroup.LayoutParams.WRAP_CONTENT));

  // Add the ImageView to the layout and set the layout as the content view.
  constraintLayout.addView(i);
  setContentView(constraintLayout);
}

ในกรณีอื่นๆ คุณอาจต้องการจัดการทรัพยากรรูปภาพเป็นออบเจ็กต์ Drawable ดังที่แสดงในตัวอย่างต่อไปนี้

val myImage: Drawable = ResourcesCompat.getDrawable(context.resources, R.drawable.my_image, null)

Resources res = context.getResources();
Drawable myImage = ResourcesCompat.getDrawable(res, R.drawable.my_image, null);

คำเตือน: แหล่งข้อมูลที่ไม่ซ้ำกันแต่ละรายการในโปรเจ็กต์ จะมีได้เพียงสถานะเดียว ไม่ว่าคุณจะสร้างออบเจ็กต์ที่แตกต่างกันกี่รายการ สำหรับแหล่งข้อมูลนั้น ตัวอย่างเช่น หากคุณสร้างออบเจ็กต์ Drawable 2 รายการจากแหล่งที่มารูปภาพเดียวกันและ เปลี่ยนพร็อพเพอร์ตี้ (เช่น อัลฟ่า) สำหรับออบเจ็กต์รายการหนึ่ง ก็จะส่งผลต่อ ออบเจ็กต์อีกรายการด้วย เมื่อต้องจัดการกับทรัพยากรรูปภาพหลายอินสแตนซ์ คุณควรใช้ภาพเคลื่อนไหว ระหว่างแทนที่จะแปลงออบเจ็กต์ Drawable โดยตรง

ข้อมูลโค้ด XML ด้านล่างแสดงวิธีเพิ่มทรัพยากรที่วาดได้ลงใน ImageView ในเลย์เอาต์ XML

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_image"
        android:contentDescription="@string/my_image_desc" />

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ทรัพยากรของโปรเจ็กต์ได้ที่ทรัพยากรและชิ้นงาน

หมายเหตุ: เมื่อใช้แหล่งข้อมูลรูปภาพเป็นแหล่งที่มาของ Drawable โปรดตรวจสอบว่ารูปภาพมีขนาดที่เหมาะสมสำหรับความหนาแน่นของพิกเซลต่างๆ หากรูปภาพไม่ถูกต้อง ระบบจะปรับขนาดให้พอดี ซึ่งอาจทำให้เกิดอาร์ติแฟกต์ใน Drawable ดูข้อมูลเพิ่มเติมได้ที่รองรับความหนาแน่นของพิกเซลในระดับต่างๆ

สร้าง Drawable จากทรัพยากร XML

หากมีออบเจ็กต์ Drawable ที่คุณต้องการสร้างซึ่งไม่ได้ขึ้นอยู่กับตัวแปรที่กำหนดโดยโค้ด หรือการโต้ตอบของผู้ใช้ในตอนแรก การกำหนด Drawable ใน XML เป็นตัวเลือกที่ดี แม้ว่าคุณจะคาดหวังให้ Drawable เปลี่ยนพร็อพเพอร์ตี้ระหว่างการโต้ตอบของผู้ใช้กับแอป คุณก็ควรพิจารณากำหนดออบเจ็กต์ใน XML เนื่องจากคุณสามารถแก้ไขพร็อพเพอร์ตี้ได้หลังจาก สร้างอินสแตนซ์ของออบเจ็กต์แล้ว

หลังจากกำหนด Drawable ใน XML แล้ว ให้บันทึกไฟล์ในไดเรกทอรี res/drawable/ ของโปรเจ็กต์ ตัวอย่างต่อไปนี้แสดง XML ที่ กำหนดทรัพยากร TransitionDrawable ซึ่งรับค่ามาจาก Drawable

<!-- res/drawable/expand_collapse.xml -->
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image_expand"/>
    <item android:drawable="@drawable/image_collapse"/>
</transition>

จากนั้นเรียกข้อมูลและสร้างออบเจ็กต์โดยการเรียก Resources#getDrawable() และส่งรหัสทรัพยากรของไฟล์ XML Drawableคลาสย่อย ที่รองรับเมธอด inflate() สามารถกำหนดใน XML และสร้างอินสแตนซ์ โดยแอปของคุณ

คลาส Drawable แต่ละคลาสที่รองรับการขยาย XML จะใช้แอตทริบิวต์ XML ที่เฉพาะเจาะจง ซึ่งช่วยกำหนดพร็อพเพอร์ตี้ของออบเจ็กต์ โค้ดต่อไปนี้จะสร้างอินสแตนซ์ของ TransitionDrawable และตั้งค่าให้เป็นเนื้อหาของออบเจ็กต์ ImageView

val transition= ResourcesCompat.getDrawable(
        context.resources,
        R.drawable.expand_collapse,
        null
) as TransitionDrawable

val image: ImageView = findViewById(R.id.toggle_image)
image.setImageDrawable(transition)

// Description of the initial state that the drawable represents.
image.contentDescription = resources.getString(R.string.collapsed)

// Then you can call the TransitionDrawable object's methods.
transition.startTransition(1000)

// After the transition is complete, change the image's content description
// to reflect the new state.

Resources res = context.getResources();
TransitionDrawable transition =
    (TransitionDrawable) ResourcesCompat.getDrawable(res, R.drawable.expand_collapse, null);

ImageView image = (ImageView) findViewById(R.id.toggle_image);
image.setImageDrawable(transition);

// Description of the initial state that the drawable represents.
image.setContentDescription(getResources().getString(R.string.collapsed));

// Then you can call the TransitionDrawable object's methods.
transition.startTransition(1000);

// After the transition is complete, change the image's content description
// to reflect the new state.

ดูข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ XML ที่รองรับได้ที่คลาส ที่ระบุไว้ข้างต้น

Shape Drawables

ShapeDrawable ออบเจ็กต์อาจเป็นตัวเลือกที่ดี เมื่อคุณต้องการวาดกราฟิก 2 มิติแบบไดนามิก คุณสามารถวาดรูปทรงพื้นฐานบนออบเจ็กต์ ShapeDrawable โดยใช้โปรแกรม และใช้สไตล์ที่แอปต้องการได้

ShapeDrawable เป็นคลาสย่อยของ Drawable ด้วยเหตุนี้ คุณจึงใช้ ShapeDrawable ได้ทุกที่ที่คาดว่าจะใช้ Drawable ตัวอย่างเช่น คุณสามารถใช้ออบเจ็กต์ ShapeDrawable เพื่อตั้งค่าพื้นหลัง ของมุมมองได้โดยส่งไปยังเมธอด setBackgroundDrawable() ของมุมมอง นอกจากนี้ คุณยังวาดรูปร่างเป็น มุมมองที่กำหนดเองและเพิ่มลงในเลย์เอาต์ในแอปได้ด้วย

เนื่องจาก ShapeDrawable มีเมธอด draw() ของตัวเอง คุณจึงสร้างคลาสย่อยของ View ที่วาดออบเจ็กต์ ShapeDrawable ในระหว่างเหตุการณ์ onDraw() ได้ ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้

class CustomDrawableView(context: Context) : View(context) {
    private val drawable: ShapeDrawable = run {
        val x = 10
        val y = 10
        val width = 300
        val height = 50
        contentDescription = context.resources.getString(R.string.my_view_desc)

        ShapeDrawable(OvalShape()).apply {
            // If the color isn't set, the shape uses black as the default.
            paint.color = 0xff74AC23.toInt()
            // If the bounds aren't set, the shape can't be drawn.
            setBounds(x, y, x + width, y + height)
        }
    }

    override fun onDraw(canvas: Canvas) {
        drawable.draw(canvas)
    }
}

public class CustomDrawableView extends View {
  private ShapeDrawable drawable;

  public CustomDrawableView(Context context) {
    super(context);

    int x = 10;
    int y = 10;
    int width = 300;
    int height = 50;
    setContentDescription(context.getResources().getString(
            R.string.my_view_desc));

    drawable = new ShapeDrawable(new OvalShape());
    // If the color isn't set, the shape uses black as the default.
    drawable.getPaint().setColor(0xff74AC23);
    // If the bounds aren't set, the shape can't be drawn.
    drawable.setBounds(x, y, x + width, y + height);
  }

  protected void onDraw(Canvas canvas) {
    drawable.draw(canvas);
  }
}

คุณสามารถใช้CustomDrawableViewคลาสในตัวอย่างโค้ด ด้านบนได้เหมือนกับที่ใช้มุมมองที่กำหนดเองอื่นๆ เช่น คุณสามารถเพิ่มลงในกิจกรรมในแอปโดยใช้โปรแกรมได้ ดังที่แสดงในตัวอย่างต่อไปนี้

private lateinit var customDrawableView: CustomDrawableView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    customDrawableView = CustomDrawableView(this)

    setContentView(customDrawableView)
}

CustomDrawableView customDrawableView;

protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  customDrawableView = new CustomDrawableView(this);

  setContentView(customDrawableView);
}

หากต้องการใช้มุมมองที่กำหนดเองในเลย์เอาต์ XML แทน คลาส CustomDrawableView ต้องลบล้างเครื่องมือสร้าง View(Context, AttributeSet) ซึ่งจะเรียกใช้เมื่อขยายคลาสจาก XML ตัวอย่างต่อไปนี้แสดงวิธีประกาศ CustomDrawableView ในเลย์เอาต์ XML

<com.example.shapedrawable.CustomDrawableView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />

คลาส ShapeDrawable เช่นเดียวกับประเภท Drawable อื่นๆ อีกมากมายในแพ็กเกจ android.graphics.drawable ช่วยให้คุณกำหนดพร็อพเพอร์ตี้ต่างๆ ของออบเจ็กต์ได้โดยใช้วิธีการสาธารณะ ตัวอย่างพร็อพเพอร์ตี้ที่คุณอาจต้องการปรับ ได้แก่ ความโปร่งใสของอัลฟ่า ตัวกรองสี การดิทเทอร์ ความทึบ และสี

นอกจากนี้ คุณยังกำหนดรูปร่างที่วาดได้แบบดั้งเดิมโดยใช้ทรัพยากร XML ได้ด้วย ดูข้อมูลเพิ่มเติมได้ที่ Shape Drawable ใน ประเภททรัพยากร Drawable

ภาพวาด NinePatch

NinePatchDrawable กราฟิกคือ รูปภาพบิตแมปที่ยืดหยุ่นได้ซึ่งคุณใช้เป็นพื้นหลังของมุมมองได้ Android จะปรับขนาดกราฟิกโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาของมุมมอง ตัวอย่างการใช้รูปภาพ NinePatch คือพื้นหลังที่ใช้โดยปุ่ม Android มาตรฐาน ซึ่งปุ่มต้องยืดออกเพื่อให้รองรับสตริงที่มีความยาวต่างๆ กราฟิก NinePatch คือรูปภาพ PNG มาตรฐานที่มีเส้นขอบขนาด 1 พิกเซลเพิ่มเติม โดยต้องบันทึกด้วยนามสกุล 9.png ในไดเรกทอรี res/drawable/ ของโปรเจ็กต์

ใช้เส้นขอบเพื่อกำหนดพื้นที่แบบยืดหยุ่นและแบบคงที่ของรูปภาพ คุณระบุส่วนที่ยืดหยุ่นได้โดยการวาดเส้นสีดำที่มีความกว้าง 1 พิกเซล (อย่างน้อย 1 เส้น) ที่ด้านซ้ายและด้านบนของเส้นขอบ (พิกเซลเส้นขอบอื่นๆ ควรโปร่งใสทั้งหมดหรือเป็นสีขาว) คุณมีส่วนที่ยืดหยุ่นได้มากเท่าที่ต้องการ ขนาดสัมพัทธ์ของส่วนที่ยืดหยุ่นได้จะยังคงเหมือนเดิม ดังนั้น ส่วนที่ใหญ่ที่สุดจะยังคงใหญ่ที่สุดเสมอ

นอกจากนี้ คุณยังกำหนดส่วนที่วาดได้ที่ไม่บังคับของรูปภาพ (ซึ่งก็คือเส้นขอบ) ได้โดยการวาดเส้นทางด้านขวาและเส้นทางด้านล่าง หากออบเจ็กต์ View ตั้งค่ากราฟิก NinePatch เป็นพื้นหลัง แล้วระบุข้อความของมุมมอง ออบเจ็กต์จะยืดตัวเองเพื่อให้ข้อความทั้งหมด ครอบครองเฉพาะพื้นที่ที่กำหนดโดยเส้นด้านขวาและด้านล่าง (หากมี) หากไม่ได้ระบุเส้นขอบด้านใน Android จะใช้เส้นขอบด้านซ้ายและด้านบนเพื่อ กำหนดพื้นที่ Drawable นี้

เส้นด้านซ้ายและด้านบนจะกำหนดว่าพิกเซลใดของรูปภาพที่อนุญาตให้ทำซ้ำเพื่อยืดรูปภาพได้ เพื่อให้เห็นความแตกต่างระหว่างเส้นต่างๆ เส้นด้านล่างและด้านขวากำหนดพื้นที่สัมพัทธ์ภายในรูปภาพที่ อนุญาตให้เนื้อหาของมุมมองครอบครอง

รูปที่ 1 แสดงตัวอย่างกราฟิก NinePatch ที่ใช้กำหนดปุ่ม

รูปที่ 1: ตัวอย่างกราฟิก NinePatch ที่กำหนดปุ่ม

กราฟิก NinePatch นี้กำหนดพื้นที่ที่ยืดหยุ่นได้ด้วยเส้นด้านซ้ายและด้านบน และกำหนดพื้นที่ที่วาดได้ด้วยเส้นด้านล่างและด้านขวา ในรูปภาพด้านบน เส้นประสีเทาระบุบริเวณของรูปภาพที่ทำซ้ำ เพื่อยืดรูปภาพ สี่เหลี่ยมผืนผ้าสีชมพูในรูปภาพด้านล่างระบุ ภูมิภาคที่อนุญาตให้แสดงเนื้อหาของมุมมอง หากเนื้อหาไม่พอดีกับภูมิภาคนี้ ระบบจะยืดรูปภาพเพื่อให้พอดี

เครื่องมือวาด 9-patch มีวิธีที่สะดวกอย่างยิ่งในการสร้างรูปภาพ NinePatch โดยใช้โปรแกรมแก้ไขกราฟิก WYSIWYG และยังแจ้งเตือนหากภูมิภาคที่คุณกำหนดสำหรับพื้นที่ที่ยืดหยุ่นได้ มีความเสี่ยงที่จะทำให้เกิดอาร์ติแฟกต์ของภาพวาดอันเป็นผลมาจากการทำซ้ำพิกเซล

XML ของเลย์เอาต์ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มกราฟิก NinePatch ลงในปุ่ม 2 ปุ่ม ระบบจะบันทึกรูปภาพ NinePatch ไปยัง res/drawable/my_button_background.9.png

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

โปรดทราบว่าแอตทริบิวต์ layout_width และ layout_height จะตั้งค่าเป็น wrap_content เพื่อให้ปุ่มพอดีกับข้อความ อย่างเรียบร้อย

รูปที่ 2 แสดงปุ่ม 2 ปุ่มที่แสดงผลจาก XML และรูปภาพ NinePatch ที่แสดงด้านบน โปรดสังเกตว่าความกว้างและความสูงของปุ่มจะแตกต่างกันไปตามข้อความ และรูปภาพพื้นหลังจะยืดออกเพื่อให้พอดีกับข้อความ

รูปที่ 2: ปุ่มที่แสดงผลโดยใช้ XML resource และกราฟิก NinePatch

Drawable ที่กำหนดเอง

หากต้องการสร้างภาพวาดที่กำหนดเอง คุณสามารถทำได้โดยขยายคลาส Drawable (หรือคลาสย่อยใดก็ได้)

วิธีที่สำคัญที่สุดในการติดตั้งใช้งานคือ draw(Canvas) เนื่องจากวิธีนี้จะให้Canvasออบเจ็กต์ที่คุณต้องใช้เพื่อระบุ วิธีการวาด

โค้ดต่อไปนี้แสดงคลาสย่อยแบบง่ายของ Drawable ที่วาดวงกลม

class MyDrawable : Drawable() {
    private val redPaint: Paint = Paint().apply { setARGB(255, 255, 0, 0) }

    override fun draw(canvas: Canvas) {
        // Get the drawable's bounds
        val width: Int = bounds.width()
        val height: Int = bounds.height()
        val radius: Float = Math.min(width, height).toFloat() / 2f

        // Draw a red circle in the center
        canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, redPaint)
    }

    override fun setAlpha(alpha: Int) {
        // This method is required
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        // This method is required
    }

    override fun getOpacity(): Int =
        // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE
        PixelFormat.OPAQUE
}

public class MyDrawable extends Drawable {
    private final Paint redPaint;

    public MyDrawable() {
        // Set up color and text size
        redPaint = new Paint();
        redPaint.setARGB(255, 255, 0, 0);
    }

    @Override
    public void draw(Canvas canvas) {
        // Get the drawable's bounds
        int width = getBounds().width();
        int height = getBounds().height();
        float radius = Math.min(width, height) / 2;

        // Draw a red circle in the center
        canvas.drawCircle(width/2, height/2, radius, redPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        // This method is required
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        // This method is required
    }

    @Override
    public int getOpacity() {
        // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE
        return PixelFormat.OPAQUE;
    }
}

จากนั้นคุณจะเพิ่ม Drawable ในที่ที่ต้องการได้ เช่น ใน ImageView ดังที่แสดงที่นี่

val myDrawing = MyDrawable()
val image: ImageView = findViewById(R.id.imageView)
image.setImageDrawable(myDrawing)
image.contentDescription = resources.getString(R.string.my_image_desc)

MyDrawable mydrawing = new MyDrawable();
ImageView image = findViewById(R.id.imageView);
image.setImageDrawable(mydrawing);
image.setContentDescription(getResources().getString(R.string.my_image_desc));

ใน Android 7.0 (ระดับ API 24) ขึ้นไป คุณยังกำหนดอินสแตนซ์ของ Drawable ที่กำหนดเองด้วย XML ได้ด้วยวิธีต่อไปนี้

• การใช้ชื่อคลาสที่สมบูรณ์ในตัวเองเป็นชื่อองค์ประกอบ XML สำหรับแนวทางนี้ คลาส Drawable ที่กำหนดเอง ต้องเป็นคลาสระดับบนสุดแบบสาธารณะ

  <com.myapp.MyDrawable xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="#ffff0000" />

• ใช้ drawable เป็นชื่อแท็ก XML และระบุชื่อคลาสที่มีคุณสมบัติครบถ้วน จากแอตทริบิวต์คลาส คุณสามารถใช้วิธีนี้ได้ทั้งกับคลาสระดับบนสุดแบบสาธารณะและคลาสแบบคงที่ภายในแบบสาธารณะ

  <drawable xmlns:android="http://schemas.android.com/apk/res/android"
      class="com.myapp.MyTopLevelClass$MyDrawable"
      android:color="#ffff0000" />

เพิ่มสีให้กับ Drawable

ใน Android 5.0 (ระดับ API 21) ขึ้นไป คุณสามารถปรับสีบิตแมปและ Nine-Patch ที่กำหนดเป็นมาสก์อัลฟ่าได้ คุณสามารถปรับสีได้ด้วยทรัพยากรสีหรือแอตทริบิวต์ธีมที่เปลี่ยนเป็นทรัพยากรสี (เช่น ?android:attr/colorPrimary) โดยปกติแล้ว คุณจะสร้างชิ้นงานเหล่านี้เพียงครั้งเดียวและระบบจะปรับสีให้โดยอัตโนมัติเพื่อให้เข้ากับธีม

คุณสามารถใช้สีกับออบเจ็กต์ BitmapDrawable, NinePatchDrawable หรือ VectorDrawable ด้วยเมธอด setTint() นอกจากนี้ คุณยังตั้งค่าสีและการปรับสมดุลสีเขียว-แดงในเลย์เอาต์ด้วยแอตทริบิวต์ android:tint และ android:tintMode ได้ด้วย

แยกสีเด่นจากรูปภาพ

ไลบรารีการสนับสนุนของ Android มีคลาส Palette ซึ่งช่วยให้คุณแยกสีเด่นจากรูปภาพได้ คุณโหลด Drawable เป็น Bitmap และส่งไปยัง Palette เพื่อเข้าถึงสีของ Drawable ได้ ดูข้อมูลเพิ่มเติมได้ที่การเลือกสีด้วย Palette API