[Java][Android] Glide 라이브러리를 사용해 원형 이미지 뷰 만들기

안녕하세요. 오늘은 Glide 라이브러리를 사용해서, 원형 이미지 뷰를 만들어보겠습니다.

 

Glide는 안드로이드에서 이미지를 효율적으로 로드할수 있는 강력한 라이브러리입니다. 

 

물론 Glide를 사용하지 않아도, 이미지 뷰를 커스텀 하여 원형 이미지를 구현할 수 있지만, 

서버에 저장된 이미지를 로드해야 한다던가 할 때는 Glide를 사용하면 매우 효율적으로 구현이 가능합니다.

 

이번 예시는, drawble에 각자 원하는 이미지 파일을 넣고, 해당 이미지를 원형으로 나타내보겠습니다.

 

전체 코드입니다.

 

우선 Module :app 수준의 build.gradle 에 Glide 라이브러리를 추가해 줍니다.

 

implementation ("com.github.bumptech.glide:glide:4.16.0")

 

 

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:id="@+id/main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">


  <ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:id="@+id/image1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="100dp"/>

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="원형 이미지 뷰"
    android:textSize="20sp"
    android:layout_marginTop="20dp"
    app:layout_constraintTop_toBottomOf="@id/image1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>



</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

  private ImageView image1;

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

    image1 = findViewById(R.id.image1);


    Glide.with(this)
        .load(R.drawable.cat1)
        .circleCrop()
        .into(image1);

  }
}

 

 

 

Glide의 circleCrop() 메서드를 사용하여, 원형으로 이미지를 나타낼 수 있습니다.

이 밖에도, 글라이드를 활용하면 다양한 이미지 효과를 나타낼 수 있습니다.

 

시연 화면입니다.