[Kotlin] Squicle 디자인 XML 코드 작성

📱테스트 환경

Samsung Galaxy Android 13 • Android 10

---

😢 내가 겪은 문제

스퀘어클(Squicle) 디자인에 대해 처음들어봤다. 스퀘어클 디자인을 적용해달라는데 처음에 뭔말인가 싶었는데 ...

카카오톡 프로필에 적용된 디자인을 생각하면 된다. 모서리가 둥근 정사각형

스퀘어(Squre) + 써클(Circle) 의 합성어라고 한다. 말을 처음들어서 그렇지 익숙한 디자인의 형태였다.

그래서 쓸일이 많아서 기록해 두고 언제든지 복사 • 붙여넣기해서 쓰려고 한다 ^^

Squicle.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <stroke
        android:width="2dp"
        android:color="#ffffff" />
    <corners
        android:bottomRightRadius="10.5dp"
        android:topLeftRadius="10.5dp"
        android:topRightRadius="10.5dp"
        android:bottomLeftRadius="10.5dp" />
</shape>

코드도 워낙 간단해서 알겠지만 한줄씩 설명을 적어보자면,

도형 내부를 채우는 색을 정의

여기서는 흰색으로 설정

<solid android:color="#ffffff" />

도형의 테두리 선을 정의

선의 두께를 2dp로, 색을 흰색(#ffffff)으로 설정

<stroke android:width="2dp" android:color="#ffffff" />

줄은 도형의 모서리를 둥글게

각 모서리의 반지름을 각각 10.5dp로 설정

<corners
    android:bottomRightRadius="10.5dp"
    android:topLeftRadius="10.5dp"
    android:topRightRadius="10.5dp"
    android:bottomLeftRadius="10.5dp" />