[Android] XML 없이 텍스트, 버튼 배경 둥글게 만들기(XML 그만 만들자)

🧐  배경

 안드로이드를 처음 접했을 때부터 텍스트, 버튼을 둥글게 만들기 위해서 수많은 XML 파일을 생성해왔다.

꽤 많은 프로젝트를 해왔지만, 코너값을 넣기 위해서 기계적으로 XML Shape를 쓰고있었다.

회사 신사업 출시를 앞두고 프로젝트 정리를 하고 있었는데, 정말 보기 싫은 정도의 shape XML들이 있었다.

사업 아이템에 많은 상태 값(status)과 다양한 뷰가 있었기에 다른 프로젝트보다 파일이 훨씬 더 많았다.

심지어 손을 많이 거쳐 간 장기 프로젝트이고, 입사하기 전까지 컨벤션이 없었기에 충격 그 자체다.🤬

 

 개발자라면 이런 상황을 보면 바로 고치고 싶지 않겠는가🥸

 

친한 안드로이드 개발자들에게 수소문했지만 모두 XML Shape를 쓰고 있었다.😇

선망하는 기업 프로젝트도 이렇다고 하니 놀랍긴 했다.

---

🙃 고민한 해결책들

1. MaterialButton 활용

 MaterialButton에는 cornerRadius라는 속성이 있다. inset, ripple 등을 제거한다면 텍스트뷰로 활용할 수 있지 않겠느냐는 생각을 했다.

 Button이 TextView 하위 객체라고 하지만, 불필요한 구현이 포함되어 있으니 객체 지향적 측면에서는 맞지 않다고 판단했다.

 

2. ShapeDrawable

 XML로 정의된 Shape도 결국엔 렌더되기 위해서는 안드로이드 코드로 그려질 것이라 생각했다.

ShapeDrawable이라는 이름으로 그냥 검색해봤는데 존재했다.😮

그리고 Radius와 Solid까지 채울 수 있었지만, Stroke 설정이 불가능했다.😢

 

3. GradientDrawable

안드로이드 XML attributes를 살펴보니 Shape XML에서 사용하는 corner/solid/stroke 등 GradientDrawable의 속성들로 정의되어 있었다.

GradientDrawable에는 Stroke까지 설정할 수 있었다.👍

 

4. Compose😇

Compose짱

 

---

📌 Code

GradientDrawable을 생성하여 View의 백그라운드에 설정해주는 형식을 고안했다.

View 확장 함수를 통해 코드로 세팅할 수 있으며, DataBinding을 활용하여 XML 뷰에서 바로 적용도 가능하다.

@BindingAdapter(
    value = [
        "setTopLeftCorners",
        "setTopRightCorners",
        "setBottomRightCorners",
        "setBottomLeftCorners",
        "setInsideBackgroundColor",
        "setStrokeWidth",
        "setStrokeColor"
    ], requireAll = false
)
fun View.setBackgroundShape(
    @Px topLeftCorners: Float? = null,
    @Px topRightCorners: Float? = null,
    @Px bottomRightCorners: Float? = null,
    @Px bottomLeftCorners: Float? = null,
    @ColorInt insideBackgroundColor: Int? = null,
    @Px strokeWidth: Float? = null,
    @ColorInt strokeColor: Int? = null
) {
    val corners = floatArrayOf(
        topLeftCorners ?: 0f, topLeftCorners ?: 0f,
        topRightCorners ?: 0f, topRightCorners ?: 0f,
        bottomRightCorners ?: 0f, bottomRightCorners ?: 0f,
        bottomLeftCorners ?: 0f, bottomLeftCorners ?: 0f
    )

    GradientDrawable().apply {
        setStroke(strokeWidth?.toInt() ?: 0, strokeColor ?: android.R.color.transparent)
        cornerRadii = corners
        setColor(insideBackgroundColor ?: android.R.color.transparent)
    }.run {
        this@setBackgroundShape.background = this
    }
}

 

대부분의 둥근 형태 뷰는 코너값이 서로 다르지는 않기에 아래 코드를 통해 다형성을 챙겼다.

@BindingAdapter(
    value = [
        "setTopCorners",
        "setBottomCorners",
        "setInsideBackgroundColor",
        "setStrokeWidth",
        "setStrokeColor"
    ], requireAll = false
)
fun View.setBackgroundShape(
    @Px topCorners: Float? = null,
    @Px bottomCorners: Float? = null,
    @ColorInt insideBackgroundColor: Int? = null,
    @Px strokeWidth: Float? = null,
    @ColorInt strokeColor: Int? = null
) {
    setBackgroundShape(
        topLeftCorners = topCorners,
        topRightCorners = topCorners,
        bottomRightCorners = bottomCorners,
        bottomLeftCorners = bottomCorners,
        insideBackgroundColor = insideBackgroundColor,
        strokeWidth = strokeWidth,
        strokeColor = strokeColor
    )
}

@BindingAdapter(
    value = [
        "setCorners",
        "setInsideBackgroundColor",
        "setStrokeWidth",
        "setStrokeColor"
    ], requireAll = false
)
fun View.setBackgroundShape(
    @Px corners: Float? = null,
    @ColorInt insideBackgroundColor: Int? = null,
    @Px strokeWidth: Float? = null,
    @ColorInt strokeColor: Int? = null
) {
    setBackgroundShape(
        topLeftCorners = corners,
        topRightCorners = corners,
        bottomRightCorners = corners,
        bottomLeftCorners = corners,
        insideBackgroundColor = insideBackgroundColor,
        strokeWidth = strokeWidth,
        strokeColor = strokeColor
    )
}

 

뷰 코드로 작성하는 것은 다음과 같이 사용할 수 있겠다.

binding.txtHelloWorld.setBackgroundShape(
            corners = 8.toPx,
            insideBackgroundColor = ContextCompat.getColor(this, R.color.purple_500),
            strokeWidth = 2.toPx,
            strokeColor = ContextCompat.getColor(this, R.color.black)
)

// 추가 팁(?) : Px 단위이기에 DpToPx 변환이 필요하다
val Int.toPx: Float
    get() {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this.toFloat(), resources.displayMetrics)
    }

 

아래 스크린샷의 상단 버튼은 방금 정의한 함수에 의해 만들어졌으며, 하단 버튼은 Shape XML로 만들어졌다.

동일한 Drawable 증명 끝

---

📮 단점, 그리고 Compose(?)

코드 또는 데이터 바인딩이기에 프리뷰를 확인할 수 없다는 것이 큰 단점일 것 같다.

나는 프리뷰를 큰 틀, 형태를 알아보기 위해서만 사용하긴 해서, 나 같은 경우는 큰 문제는 아니다.

 

이를 해결하기 위해서 커스텀뷰로 TextView를 만들거나 라이브러리 형태로 제작하여 여러 프로젝트에서 사용할 수 있겠지만

문제를 느끼지 못하여 채택한 방법은 아니다.

TDS(Toss Design System)처럼 소속 디자인 팀이 일관적인 형태의 뷰를 고안한다면 커스텀뷰를 만들어 확장성있게 적용해볼 생각은 있다.

 

가장 좋은 방법은 Compose로 넘어가는 것이다.

Modifier로 쉽게 코너 값을 설정할 수 있고 직관적이며 프리뷰까지 해결된다.

Button(
       shape = RoundedCornerShape(23.dp),
       border = BorderStroke(3.dp, Color.Red)
)

하지만 기존 프로젝트를 Compose로 전환하는 것은 무리가 있다.

 

문제(문제가 아닐 수도 있지만)를 직면하고서야 고민을 했다는 게 스스로 아쉬워서 당연하게 넘어간 것들을 돌아보고 있다.

다양한 문제 중 뷰와 관련된 문제 대부분은 Compose로 해결이 가능하기에 프로젝트 단위로 빨리 맛보고 싶다.

회사에서 신사업을 또 준비하고 있는데 그 프로젝트는 Compose를 100% 사용할 예정이다.

(데드라인 탓에 XML로 넘어가는 것은 절대 하지말자고, 금지할 것이라고 팀에 선언해놨다. 내가 뭐라고)

 

지긋지긋한 XML, RecyclerView 탈출!?👊