Computer >> 컴퓨터 >  >> 프로그래밍 >> Android

안드로이드 원형 ImageView에 그림자와 테두리 추가하는 방법

안드로이드 원형 ImageView에 그림자와 테두리 추가하기

이 튜토리얼에서는 안드로이드 앱에서 원형(Circular) ImageView에 그림자(shadow)와 테두리(border)를 추가하는 방법을 단계별로 알아봅니다. 기본 이미지를 원형으로 변환하면서 흰색 테두리와 회색 그림자 효과까지 함께 적용하는 실전 예제입니다.

1단계 — 새 프로젝트 생성

Android Studio에서 File → New Project를 선택하고, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

2단계 — 레이아웃 파일 작성 (res/layout/activity_main.xml)

아래 코드를 res/layout/activity_main.xml에 추가합니다. 화면 중앙에 ImageView 하나와 하단 우측에 버튼 하나를 배치하는 구조입니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/rl"
    android:padding="16dp"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <Button
        android:id="@+id/btn_circular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Circular It"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

3단계 — 메인 액티비티 작성 (src/MainActivity.java)

핵심 로직은 버튼 클릭 시 실행됩니다. 원본 비트맵 위에 캔버스(Canvas)와 페인트(Paint)를 사용해 흰색 테두리와 회색 그림자를 그린 뒤, RoundedBitmapDrawable로 원형 이미지를 만들어 ImageView에 적용합니다.

package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.drawable.RoundedBitmapDrawable;
import androidx.core.graphics.drawable.RoundedBitmapDrawableFactory;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private Resources mResources;
    private RelativeLayout mRelativeLayout;
    private Button mBTNCircular;
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = getApplicationContext();
        mResources = getResources();
        mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
        mImageView = (ImageView) findViewById(R.id.iv);
        mBTNCircular = (Button) findViewById(R.id.btn_circular);
        final Bitmap srcBitmap = BitmapFactory.decodeResource(mResources, R.drawable.flower);
        mImageView.setImageBitmap(srcBitmap);
        mBTNCircular.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Paint paint = new Paint();
                int srcBitmapWidth = srcBitmap.getWidth();
                int srcBitmapHeight = srcBitmap.getHeight();
                int borderWidth = 25;
                int shadowWidth = 10;
                int dstBitmapWidth = Math.min(srcBitmapWidth,srcBitmapHeight)+borderWidth*2;
                Bitmap dstBitmap = Bitmap.createBitmap(dstBitmapWidth,dstBitmapWidth, Bitmap.Config.ARGB_8888);
                Canvas canvas = new Canvas(dstBitmap);
                canvas.drawColor(Color.WHITE);
                canvas.drawBitmap(srcBitmap, (dstBitmapWidth - srcBitmapWidth) / 2, (dstBitmapWidth - srcBitmapHeight) / 2, null);
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(borderWidth * 2);
                paint.setColor(Color.WHITE);
                canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, canvas.getWidth() / 2, paint);
                paint.setColor(Color.LTGRAY);
                paint.setStrokeWidth(shadowWidth);
                canvas.drawCircle(canvas.getWidth()/2,canvas.getHeight()/2,canvas.getWidth()/2,paint);
                RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(mResources, dstBitmap);
                roundedBitmapDrawable.setCircular(true);
                roundedBitmapDrawable.setAntiAlias(true);
                mImageView.setImageDrawable(roundedBitmapDrawable);
            }
        });
    }
}

코드 핵심 포인트

  • borderWidth(25px): 원형 이미지 바깥쪽에 그려지는 흰색 테두리 두께입니다.
  • shadowWidth(10px): 테두리 바깥에 추가되는 연회색(LTGRAY) 그림자 두께입니다.
  • RoundedBitmapDrawable: 안드로이드 지원 라이브러리에서 제공하는 클래스로, 비트맵을 손쉽게 원형으로 만들어 줍니다.

4단계 — 매니페스트 설정 (Manifests/AndroidManifest.xml)

아래 코드를 AndroidManifest.xml에 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.app.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결한 상태라고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행할 기기 목록에서 본인의 모바일 기기를 선택하면, 앱이 설치되고 아래와 같은 기본 화면이 표시됩니다.

안드로이드 원형 ImageView에 그림자와 테두리 추가하는 방법

화면 하단의 Circular It 버튼을 누르면 일반 사각형 이미지가 흰색 테두리와 회색 그림자가 적용된 원형 이미지로 전환되는 것을 확인할 수 있습니다.