[Android] AvatarView란?

미디엄을 훑어보다가 AvatarView란 것을 설명하는 글이 있어 읽어보다가 급 포스팅 땡겨서 작성한다.

내가 읽은 미디엄 글은 아래 링크다.

 

https://proandroiddev.com/avatarview-for-android-take-your-profile-images-to-the-next-level-2c0c6e06911c

AvatarView for Android: Take Your Profile Images to the Next Level

 

그리고 이 라이브러리의 깃허브 링크는 아래에 있다.

 

https://github.com/getStream/avatarview-android

GitHub - GetStream/avatarview-android: ✨ Supports loading profile images with fractional styles, shapes, borders, indicators,

 

이게 뭔가 훑어보니 앱에서 프로필 사진을 띄울 때 사용할 수 있는 라이브러리같다.

지금까지는 CircleImageView를 써서 둥글게 표시하는 걸로 때우고 넘어갔던 프로필 사진이 사각형으로 다양하게 표시되고 글자로 프로필 사진을 설정할 수 있는 걸 보니 신기했다.

 

이걸 사용하려면 먼저 앱 수준 gradle에 의존성을 하나 넣어야 한다.

 

implementation "io.getstream:avatarview-coil:1.0.6"

 

그리고 테스트할 액티비티를 만들고 XML에 아래 코드를 넣는다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".avatarview.AvatarViewActivity">

        <io.getstream.avatarview.AvatarView
            android:id="@+id/avatar_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:avatarViewBorderColor="@color/black"
            app:avatarViewBorderWidth="3dp"
            app:avatarViewIndicatorBorderColor="@color/white"
            app:avatarViewIndicatorBorderSizeCriteria="10"
            app:avatarViewIndicatorColor="@android:color/holo_blue_light"
            app:avatarViewIndicatorEnabled="true"
            app:avatarViewIndicatorPosition="bottomRight"
            app:avatarViewIndicatorSizeCriteria="9"
            app:avatarViewInitialsTextStyle="bold"
            app:avatarViewShape="circle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

 

코틀린 코드도 적당히 작성해서 넣어준다. 사용한 이미지는 아래 포스팅에서 사용했던 것을 가져왔다.

 

https://onlyfor-me-blog.tistory.com/495

[Android] 코틀린과 ViewPager2로 미리보기 + 자동 무한 스크롤 기능 구현하는 법

 

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.example.kotlinprac.R
import com.example.kotlinprac.databinding.ActivityAvatarViewBinding
import io.getstream.avatarview.coil.loadImage

class AvatarViewActivity : AppCompatActivity() {

    private lateinit var binding: ActivityAvatarViewBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_avatar_view)
        binding.run {
            lifecycleOwner = this@AvatarViewActivity
            avatarView.loadImage(R.drawable.image)
        }
    }
}

 

그러면 에뮬레이터 기준으로 이런 화면이 나온다.

 

 

검은 테두리의 프로필 사진 우측 하단에 있는 작은 원에는 사용자의 상태에 따라 다른 색을 보여줘 다른 사람에게 해당 사용자의 상태를 시각적으로 표시해줄 수 있을 것 같다.

 

그리고 검은 테두리를 무지개 느낌이 나도록 만들 수도 있다. 먼저 colors.xml에 array를 정의한다.

 

<array name="rainbow">
    <item>#FF0000</item>
    <item>#FFA500</item>
    <item>#FFFF00</item>
    <item>#00FF00</item>
    <item>#0000FF</item>
</array>

 

그리고 XML에 적용해준다. 태그 안에 avatarViewBorderColorArray란 속성에 넣어준다.

배열을 넣었으니 avatarViewBorderColor 속성은 더 이상 먹히지 않기 때문에 없앴다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".avatarview.AvatarViewActivity">

        <io.getstream.avatarview.AvatarView
            android:id="@+id/avatar_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:avatarViewBorderWidth="3dp"
            app:avatarViewIndicatorBorderColor="@color/white"
            app:avatarViewIndicatorBorderSizeCriteria="10"
            app:avatarViewIndicatorColor="@android:color/holo_blue_light"
            app:avatarViewIndicatorEnabled="true"
            app:avatarViewIndicatorPosition="bottomRight"
            app:avatarViewIndicatorSizeCriteria="9"
            app:avatarViewInitialsTextStyle="bold"
            app:avatarViewBorderColorArray="@array/rainbow"
            app:avatarViewShape="circle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

 

그러면 아래와 같이 무지개색 테두리의 둥근 프로필 사진이 나타난다.

 

 

사각형으로 만들고 싶다면 avatarViewShape 속성의 circle을 rounded_rect로 바꾸면 된다.

기본 형태는 circle이기 때문에 원형 이미지를 원한다면 굳이 넣어줄 필요는 없을 듯하다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".avatarview.AvatarViewActivity">

        <io.getstream.avatarview.AvatarView
            android:id="@+id/avatar_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:avatarViewBorderWidth="3dp"
            app:avatarViewIndicatorBorderColor="@color/white"
            app:avatarViewIndicatorBorderSizeCriteria="10"
            app:avatarViewIndicatorColor="@android:color/holo_blue_light"
            app:avatarViewIndicatorEnabled="true"
            app:avatarViewIndicatorPosition="bottomRight"
            app:avatarViewIndicatorSizeCriteria="9"
            app:avatarViewInitialsTextStyle="bold"
            app:avatarViewBorderColorArray="@array/rainbow"
            app:avatarViewShape="rounded_rect" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

 

 

각진 부분의 굴곡은 avatarViewBorderRadius로 설정할 수 있다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".avatarview.AvatarViewActivity">

        <io.getstream.avatarview.AvatarView
            android:id="@+id/avatar_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:avatarViewBorderWidth="3dp"
            app:avatarViewIndicatorBorderColor="@color/white"
            app:avatarViewIndicatorBorderSizeCriteria="10"
            app:avatarViewIndicatorColor="@android:color/holo_blue_light"
            app:avatarViewIndicatorEnabled="true"
            app:avatarViewIndicatorPosition="bottomRight"
            app:avatarViewIndicatorSizeCriteria="9"
            app:avatarViewInitialsTextStyle="bold"
            app:avatarViewBorderColorArray="@array/rainbow"
            app:avatarViewBorderRadius="24dp"
            app:avatarViewShape="rounded_rect" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

 

이외에도 다양한 커스텀 방법이 있으니 관심있다면 해당 미디엄 글과 깃허브를 보면 될 것 같다.