Merge pull request #18 from MoyeoRun/feature/badge-round-image-view

[#13] 뱃지가 달린 Round Image View 추가

app/build.gradle

@@ -61,9 +61,13 @@ android {
     kotlinOptions {
         jvmTarget = '1.8'
     }
+    buildFeatures {
+        viewBinding true
+    }
 }
 
 dependencies {
+    def glide_version = '4.13.1'
 
     implementation 'androidx.core:core-ktx:1.7.0'
     implementation 'androidx.appcompat:appcompat:1.4.1'
@@ -80,4 +84,8 @@ dependencies {
     // Hilt
     implementation "com.google.dagger:hilt-android:$hilt_version"
     kapt "com.google.dagger:hilt-android-compiler:$hilt_version"
+
+    // Glide
+    implementation "com.github.bumptech.glide:glide:$glide_version"
+    annotationProcessor "com.github.bumptech.glide:compiler:$glide_version"
 }

app/src/main/AndroidManifest.xml

@@ -2,6 +2,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.moyerun.moyeorun_android">
 
+    <uses-permission android:name="android.permission.INTERNET" />
     <application
         android:name=".MoyeoRunApplication"
         android:allowBackup="true"

app/src/main/java/com/moyerun/moyeorun_android/common/extension/ConvertDP.kt

@@ -0,0 +1,14 @@
+package com.moyerun.moyeorun_android.common.extension
+
+import android.content.res.Resources
+import android.util.TypedValue
+
+val Int.dp: Int
+    get() {
+        val metrics = Resources.getSystem().displayMetrics
+        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this.toFloat(), metrics)
+            .toInt()
+    }
+
+val Float.dp: Int
+    get() = (this * Resources.getSystem().displayMetrics.density + 0.5f).toInt()

app/src/main/java/com/moyerun/moyeorun_android/views/BadgeRoundImageView.kt

@@ -0,0 +1,122 @@
+package com.moyerun.moyeorun_android.views
+
+import android.Manifest
+import android.content.Context
+import android.util.AttributeSet
+import android.util.Patterns
+import android.view.LayoutInflater
+import androidx.annotation.ColorRes
+import androidx.annotation.Dimension
+import androidx.annotation.DrawableRes
+import androidx.annotation.RequiresPermission
+import androidx.constraintlayout.widget.ConstraintLayout
+import com.bumptech.glide.Glide
+import com.moyerun.moyeorun_android.R
+import com.moyerun.moyeorun_android.common.extension.dp
+import com.moyerun.moyeorun_android.databinding.ViewBadgeRoundImageBinding
+import java.io.IOException
+
+class BadgeRoundImageView @JvmOverloads constructor(
+    context: Context, attrs: AttributeSet? = null, defStyle: Int = 0
+) : ConstraintLayout(context, attrs, defStyle) {
+    private var binding: ViewBadgeRoundImageBinding =
+        ViewBadgeRoundImageBinding.inflate(LayoutInflater.from(context), this, true)
+
+    init {
+        val attributesTypedArray =
+            context.obtainStyledAttributes(attrs, R.styleable.BadgeRoundImageView, defStyle, 0)
+        with(binding.imgBigCircle) {
+            val bigCircleImgResId = attributesTypedArray.getResourceId(
+                R.styleable.BadgeRoundImageView_bigCircleImgSrc,
+                R.drawable.user_profile_image_default_112dp
+            )
+            val bigCircleImgBgResId = attributesTypedArray.getResourceId(
+                R.styleable.BadgeRoundImageView_bigCircleBackgroundColor,
+                R.color.main_white
+            )
+
+            this.setImageResource(bigCircleImgResId)
+            this.setBackgroundResource(bigCircleImgBgResId)
+        }
+
+        with(binding.imgBadgeSymbol) {
+            val badgeResId = attributesTypedArray.getResourceId(
+                R.styleable.BadgeRoundImageView_badgeImgSrc,
+                R.drawable.all_badge_camera_20dp
+            )
+            val badgeBgResId = attributesTypedArray.getResourceId(
+                R.styleable.BadgeRoundImageView_badgeBackgroundColor,
+                R.color.main_white
+            )
+            val badgeSize =
+                attributesTypedArray.getDimensionPixelSize(
+                    R.styleable.BadgeRoundImageView_badgeSize,
+                    35.dp
+                )
+
+            this.setImageResource(badgeResId)
+            this.setBackgroundColor(resources.getColor(badgeBgResId, context.theme))
+            with(this.layoutParams) {
+                this.height = badgeSize
+                this.width = badgeSize
+            }
+        }
+
+        attributesTypedArray.recycle()
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val verticalPadding = paddingTop + paddingBottom
+        val horizontalPadding = paddingStart + paddingEnd
+        if (widthMeasureSpec >= heightMeasureSpec) {
+            super.onMeasure(
+                heightMeasureSpec + horizontalPadding,
+                heightMeasureSpec + verticalPadding
+            )
+        } else {
+            super.onMeasure(
+                widthMeasureSpec + horizontalPadding,
+                widthMeasureSpec + verticalPadding
+            )
+        }
+    }
+
+    fun setBigCircleImgSrc(@DrawableRes imgResId: Int) {
+        binding.imgBigCircle.setImageResource(imgResId)
+    }
+
+    @RequiresPermission(Manifest.permission.INTERNET)
+    fun setBigCircleImgSrc(imgUrl: String, isImageCropped: Boolean = false) {
+        if (isImageCropped) {
+            Glide.with(context).load(imgUrl).centerCrop().into(binding.imgBigCircle)
+        } else
+            Glide.with(context).load(imgUrl).into(binding.imgBigCircle)
+    }
+
+    fun setBigCircleImageBg(@ColorRes bgResId: Int) {
+        binding.imgBigCircle.setBackgroundColor(resources.getColor(bgResId, context?.theme))
+    }
+
+    fun setBadgeImgSrc(@DrawableRes imgResId: Int) {
+        binding.imgBadgeSymbol.setImageResource(imgResId)
+    }
+
+    @RequiresPermission(Manifest.permission.INTERNET)
+    fun setBadgeImgSrc(imgUrl: String, isImageCropped: Boolean = false) {
+        if (isImageCropped) {
+            Glide.with(context).load(imgUrl).centerCrop().into(binding.imgBadgeSymbol)
+        } else
+            Glide.with(context).load(imgUrl).into(binding.imgBadgeSymbol)
+    }
+
+    fun setBadgeImageBg(@ColorRes bgResId: Int) {
+        binding.imgBadgeSymbol.setBackgroundColor(resources.getColor(bgResId, context?.theme))
+    }
+
+    fun setBadgeImageSize(@Dimension imgSize: Int) {
+        with(binding.imgBadgeSymbol.layoutParams) {
+            this.height = imgSize
+            this.width = imgSize
+        }
+    }
+}

app/src/main/res/drawable/all_badge_camera_20dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="20dp" android:viewportHeight="20"
+    android:viewportWidth="20" android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#AAAAAA" android:pathData="M10.4999,8.0273C9.1596,8.0273 8.0271,9.1599 8.0271,10.5002C8.0271,11.8404 9.1596,12.973 10.4999,12.973C11.8402,12.973 12.9728,11.8404 12.9728,10.5002C12.9728,9.1599 11.8402,8.0273 10.4999,8.0273Z"/>
+    <path android:fillColor="#AAAAAA" android:pathData="M17.0942,4.7302H14.9626L12.7313,2.4988C12.6549,2.4221 12.564,2.3613 12.464,2.3199C12.364,2.2784 12.2568,2.2572 12.1485,2.2573H8.8514C8.7431,2.2572 8.6359,2.2784 8.5359,2.3199C8.4359,2.3613 8.3451,2.4221 8.2686,2.4988L6.0373,4.7302H3.9058C2.9966,4.7302 2.2572,5.4695 2.2572,6.3787V15.4457C2.2572,16.3549 2.9966,17.0943 3.9058,17.0943H17.0942C18.0033,17.0943 18.7427,16.3549 18.7427,15.4457V6.3787C18.7427,5.4695 18.0033,4.7302 17.0942,4.7302ZM10.5,14.6215C8.2662,14.6215 6.3786,12.7339 6.3786,10.5001C6.3786,8.2663 8.2662,6.3787 10.5,6.3787C12.7337,6.3787 14.6213,8.2663 14.6213,10.5001C14.6213,12.7339 12.7337,14.6215 10.5,14.6215Z"/>
+</vector>

app/src/main/res/drawable/user_profile_image_default_112dp.xml

@@ -0,0 +1,58 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="112dp"
+    android:height="112dp"
+    android:viewportWidth="112"
+    android:viewportHeight="112">
+  <group>
+    <clip-path
+        android:pathData="M0,0h112v112h-112z"/>
+    <path
+        android:pathData="M56,111.936C86.928,111.936 112,86.879 112,55.968C112,25.058 86.928,0 56,0C25.072,0 0,25.058 0,55.968C0,86.879 25.072,111.936 56,111.936Z"
+        android:fillColor="#6196FF"/>
+    <path
+        android:strokeWidth="1"
+        android:pathData="M96.346,94.782C91.077,80.615 81.117,75.253 56.345,75.253C31.274,75.253 21.374,80.743 16.155,95.295C21.406,100.61 27.668,104.82 34.573,107.679C41.477,110.537 48.884,111.985 56.358,111.938C63.831,111.89 71.219,110.348 78.087,107.403C84.954,104.457 91.163,100.168 96.346,94.787V94.782Z"
+        android:fillColor="#0041E2"
+        android:strokeColor="#0041E2"/>
+    <path
+        android:pathData="M77.769,46.471C77.378,46.402 76.98,46.381 76.585,46.412C76.585,46.201 76.585,45.988 76.585,45.776C76.585,30.504 67.82,19.68 55.636,19.68C43.453,19.68 35.942,30.692 35.942,45.964C35.942,46.254 35.942,46.545 35.951,46.836C35.062,46.432 34.071,46.305 33.109,46.471C29.878,47.057 28.574,50.874 29.631,54.744C30.754,58.863 34.299,61.968 37.53,61.384C37.847,61.327 38.157,61.232 38.451,61.102C40.296,66.173 43.2,70.504 47.305,72.991V80.03C47.305,82.425 48.257,84.722 49.951,86.415C51.646,88.108 53.944,89.06 56.34,89.06C58.736,89.06 61.034,88.108 62.728,86.415C64.422,84.722 65.374,82.425 65.374,80.03V72.407C69.091,69.958 71.893,66.089 73.765,61.438C76.877,61.692 80.166,58.685 81.242,54.746C82.305,50.874 81,47.057 77.769,46.471Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M54.427,54.898C54.014,55.049 53.659,55.325 53.409,55.687C53.16,56.049 53.03,56.479 53.036,56.918C53.054,57.819 53.725,58.555 54.588,58.763C55.073,58.885 55.585,58.823 56.028,58.591C56.389,58.399 56.069,57.851 55.706,58.042C55.048,58.39 54.088,58.084 53.774,57.373C53.475,56.694 53.879,55.755 54.602,55.507C54.682,55.482 54.75,55.428 54.791,55.355C54.832,55.283 54.844,55.197 54.824,55.115C54.801,55.035 54.747,54.966 54.674,54.924C54.6,54.883 54.514,54.871 54.432,54.893L54.427,54.898Z"
+        android:strokeWidth="0.25"
+        android:fillColor="#0041E2"
+        android:strokeColor="#0041E2"/>
+    <path
+        android:pathData="M49.205,48.681C49.205,47.933 48.598,47.327 47.849,47.327C47.101,47.327 46.494,47.933 46.494,48.681V50.43C46.494,51.178 47.101,51.784 47.849,51.784C48.598,51.784 49.205,51.178 49.205,50.43V48.681Z"
+        android:fillColor="#0041E2"/>
+    <path
+        android:pathData="M64.616,48.681C64.616,47.933 64.009,47.327 63.261,47.327C62.512,47.327 61.905,47.933 61.905,48.681V50.43C61.905,51.178 62.512,51.784 63.261,51.784C64.009,51.784 64.616,51.178 64.616,50.43V48.681Z"
+        android:fillColor="#0041E2"/>
+    <path
+        android:pathData="M76.786,29.515C74.743,24.813 69.793,20.164 64.699,19.088C62.551,18.635 60.249,18.278 58.019,18.907C54.673,17.426 50.264,17.675 46.789,19.526C42.63,21.741 39.1,26.426 36.467,27.277C33.834,28.128 29.474,27.226 29.276,26.737C29.637,27.6 31.254,30.131 34.051,32.695C33.066,36.996 33.493,44.361 37.278,48.752C36.59,44.619 37.12,40.4 38.263,36.352L38.381,35.934C39.66,36.701 41.006,37.348 42.404,37.867C50.395,40.813 63.082,42.116 73.523,38.736C74.267,42.029 74.684,45.388 74.768,48.763C74.768,48.763 81.608,40.606 76.786,29.515Z"
+        android:fillColor="#0041E2"/>
+    <path
+        android:pathData="M77.06,29.353C75.883,26.663 73.972,24.271 71.732,22.388C70.596,21.419 69.347,20.592 68.012,19.925C66.663,19.279 65.23,18.826 63.755,18.578C61.829,18.226 59.843,18.07 57.934,18.601L58.179,18.633C55.931,17.648 53.423,17.429 51.01,17.803C48.597,18.177 46.387,19.212 44.424,20.667C42.601,22.017 40.992,23.606 39.261,25.072C38.592,25.642 37.902,26.203 37.132,26.629C36.361,27.055 35.485,27.22 34.609,27.277C33.487,27.345 32.36,27.277 31.254,27.075C30.829,27.004 30.409,26.902 29.998,26.771C29.88,26.737 29.766,26.692 29.657,26.635C29.627,26.619 29.484,26.559 29.575,26.593C29.56,26.584 29.548,26.573 29.538,26.559C29.501,26.518 29.581,26.634 29.551,26.57C29.371,26.196 28.845,26.524 29.001,26.891C29.362,27.743 29.942,28.525 30.495,29.259C31.493,30.575 32.608,31.798 33.826,32.914L33.745,32.605C33.287,34.62 33.193,36.725 33.342,38.781C33.513,41.137 34.014,43.483 34.977,45.649C35.504,46.851 36.203,47.97 37.053,48.971C37.28,49.237 37.63,48.94 37.584,48.662C37.01,45.164 37.321,41.578 38.126,38.142C38.294,37.427 38.487,36.719 38.688,36.011L38.221,36.202C42.11,38.518 46.63,39.675 51.072,40.37C55.85,41.137 60.709,41.26 65.52,40.736C68.266,40.439 70.975,39.869 73.608,39.035L73.217,38.813C73.952,42.079 74.365,45.409 74.45,48.756C74.456,49.01 74.807,49.202 74.993,48.981C75.866,47.938 76.536,46.686 77.091,45.452C78.396,42.576 78.977,39.425 78.784,36.273C78.611,33.885 78.028,31.544 77.06,29.353C76.897,28.98 76.351,29.302 76.511,29.675C78.026,33.179 78.586,37.065 77.883,40.832C77.446,43.194 76.563,45.451 75.28,47.483C75.104,47.761 74.919,48.034 74.723,48.299L74.631,48.426C74.582,48.489 74.678,48.367 74.604,48.459C74.584,48.484 74.564,48.509 74.543,48.534L75.086,48.758C74.998,45.353 74.576,41.965 73.827,38.642C73.804,38.561 73.75,38.493 73.677,38.451C73.604,38.41 73.518,38.399 73.437,38.421C68.812,39.912 63.921,40.473 59.07,40.41C54.529,40.37 50.012,39.747 45.629,38.558C43.149,37.872 40.754,36.971 38.536,35.651C38.494,35.626 38.447,35.612 38.399,35.609C38.351,35.606 38.302,35.614 38.257,35.632C38.212,35.65 38.172,35.678 38.14,35.714C38.107,35.75 38.083,35.793 38.07,35.84C37.151,39.077 36.544,42.412 36.662,45.789C36.699,46.808 36.8,47.823 36.966,48.828L37.498,48.518C36.027,46.803 35.109,44.677 34.562,42.501C34.032,40.352 33.822,38.137 33.939,35.928C33.985,34.865 34.123,33.809 34.352,32.771C34.367,32.717 34.368,32.66 34.353,32.606C34.339,32.552 34.311,32.502 34.271,32.463C33.074,31.371 31.979,30.173 31,28.883C30.461,28.164 29.897,27.4 29.545,26.568L28.996,26.888C29.156,27.226 29.717,27.354 30.036,27.447C30.715,27.632 31.409,27.759 32.11,27.828C32.937,27.927 33.772,27.952 34.604,27.903C35.367,27.854 36.157,27.743 36.87,27.447C38.205,26.893 39.331,25.854 40.4,24.906C41.787,23.68 43.138,22.405 44.621,21.292C46.188,20.117 47.885,19.184 49.791,18.69C51.688,18.186 53.675,18.114 55.605,18.478C56.078,18.571 56.545,18.694 57.003,18.846C57.224,18.92 57.442,19 57.657,19.088C57.743,19.133 57.832,19.172 57.925,19.202C58.09,19.238 58.286,19.149 58.446,19.111C59.555,18.87 60.695,18.809 61.823,18.931C63.838,19.113 65.862,19.567 67.683,20.456C71.134,22.152 74.083,25.067 75.91,28.442C76.125,28.839 76.322,29.243 76.502,29.657C76.675,30.048 77.223,29.726 77.06,29.353Z"
+        android:fillColor="#0041E2"/>
+    <path
+        android:strokeWidth="1"
+        android:pathData="M61.405,63.623C61.405,63.623 60.159,66 55.861,66C51.564,66 50.32,63.623 50.32,63.623"
+        android:fillColor="#00000000"
+        android:strokeColor="#0041E2"
+        android:strokeLineCap="round"/>
+    <path
+        android:strokeWidth="1"
+        android:pathData="M42.853,46.863C43.589,45.193 44.945,44.238 47.023,44.095C48.663,43.982 50.227,44.841 50.778,46.203"
+        android:strokeLineJoin="round"
+        android:fillColor="#00000000"
+        android:strokeColor="#0041E2"
+        android:strokeLineCap="round"/>
+    <path
+        android:strokeWidth="1"
+        android:pathData="M67.597,46.863C66.861,45.193 65.505,44.238 63.429,44.095C61.789,43.982 60.225,44.841 59.673,46.203"
+        android:strokeLineJoin="round"
+        android:fillColor="#00000000"
+        android:strokeColor="#0041E2"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>

app/src/main/res/layout/view_badge_round_image.xml

@@ -0,0 +1,27 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/img_big_circle"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:shapeAppearanceOverlay="@style/RoundImageView"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"/>
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/img_badge_symbol"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:shapeAppearanceOverlay="@style/RoundImageView"
+        android:scaleType="center"
+        app:layout_constraintTop_toTopOf="@id/img_big_circle"
+        app:layout_constraintBottom_toBottomOf="@+id/img_big_circle"
+        app:layout_constraintStart_toStartOf="@id/img_big_circle"
+        app:layout_constraintEnd_toEndOf="@+id/img_big_circle"
+        app:layout_constraintVertical_bias="1.0"
+        app:layout_constraintHorizontal_bias="1.0"/>
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/attrs.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <declare-styleable name="BadgeRoundImageView">
+        <attr name="bigCircleImgSrc" format="reference"/>
+        <attr name="bigCircleBackgroundColor" format="color"/>
+        <attr name="badgeImgSrc" format="reference"/>
+        <attr name="badgeBackgroundColor" format="color"/>
+        <attr name="badgeSize" format="reference|integer|dimension"/>
+    </declare-styleable>
+</resources>

app/src/main/res/values/styles_imageview.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="RoundImageView">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">50%</item>
+    </style>
+</resources>