[JAVA][Android] 이미지뷰 원으로 만들기 / 프로필 사진처럼 만들기

앱을 꾸밀때 프로필사진이 동그랗게 원으로 되어있는것을 CircularImageView 클래스를 만들어서 해볼겁니다.

별도의 선언없이 해당 xml에 <com.example.circletest.CircularImageView> 자신의 프로젝트명을 넣고 클래스명을 넣어주시고 사용 하면 됩니다.

 

 

 

CircularImageView

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;

import androidx.appcompat.widget.AppCompatImageView;

public class CircularImageView extends AppCompatImageView {

    Path path;
    Paint paint;
    Drawable backgroundDrawable;

    public CircularImageView(Context context) {
        super(context);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        path = new Path();
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        backgroundDrawable = getResources().getDrawable(R.drawable.circle_shape);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        float radius = Math.min(getWidth() / 2, getHeight() / 2); // 현재 반지름 계산 방식 유지
        path.reset();
        path.addCircle(getWidth() / 2f, getHeight() / 2f, radius, Path.Direction.CW);
        canvas.clipPath(path);

        if (backgroundDrawable != null) {
            // 배경 이미지 크기 조정
            int backgroundWidth = (int) (2 * radius); // 원의 반지름 * 2
            int backgroundHeight = (int) (2 * radius);
            backgroundDrawable.setBounds(0, 0, backgroundWidth, backgroundHeight);
            backgroundDrawable.draw(canvas);
        }
        super.onDraw(canvas);
    }
}

 

mainActivity

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

 

drawable

circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/transparent" />
    <stroke
        android:width="5dp"
        android:color="@android:color/black" />
</shape>

 

tes1.png

 

 

layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="circleImageView 적용 후"
        android:textSize="22sp"
        app:layout_constraintStart_toEndOf="@+id/profileImg"
        app:layout_constraintTop_toTopOf="@+id/profileImg" />



    <com.example.circletest.CircularImageView
        android:id="@+id/profileImg"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:srcCompat="@drawable/test1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/test1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/circle_shape" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="circleImageView 적용전"
        android:textSize="22dp"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

시연화면