วิธีทำ ImageView มุมโค้งมนใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีสร้างรูปภาพมุมโค้งมน (Rounded Corners) ใน ImageView โดยใช้ Canvas, BitmapShader และ drawRoundRect

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_margin="10dp"
        android:layout_height="fill_parent" />
</LinearLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

package com.example.sample;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView textView = findViewById(R.id.textView);
        textView.setTextColor(Color.RED);
        textView.setTextSize(20);
        
        ImageView mimageView = findViewById(R.id.imageView);
        Bitmap mbitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.cat)).getBitmap();
        
        Bitmap imageRounded = Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), mbitmap.getConfig());
        Canvas canvas = new Canvas(imageRounded);
        Paint mpaint = new Paint();
        mpaint.setAntiAlias(true);
        mpaint.setShader(new BitmapShader(mbitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        
        // วาดสี่เหลี่ยมมุมโค้ง รัศมี 100px
        canvas.drawRoundRect(new RectF(0, 0, mbitmap.getWidth(), mbitmap.getHeight()), 100, 100, mpaint);
        mimageView.setImageBitmap(imageRounded);
    }
}

วิธีที่ 2: ใช้ CardView (แนะนำ - เรียบง่ายกว่า)

<android.support.v7.widget.CardView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cardCornerRadius="20dp"
    app:cardElevation="4dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/your_image" />
</android.support.v7.widget.CardView>

วิธีที่ 3: ใช้ RoundedBitmapDrawable (API 21+)

RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
drawable.setCornerRadius(20f);
drawable.setAntiAlias(true);
imageView.setImageDrawable(drawable);

วิธีที่ 4: ใช้ ShapeAppearanceModel (Material Components)

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:shapeAppearanceOverlay="@style/RoundedCorners"
    android:src="@drawable/your_image" />


<style name="RoundedCorners">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">20dp</item>
</style>

เปรียบเทียบวิธีการ

การทดสอบ

เตรียมรูป cat.jpg ใน drawable รันแอป จะเห็นรูปภาพมุมโค้งมน