풍선도움말 레이아웃 구현

위와 같은 뷰를 구현하려고 보니 기존에 나인패치 이미지를 이용하고 있었다. 

매번 이미지 요청하기도 그렇고 xml을 이용해 할 수 있는 방법을 찾아보았다.

 

먼저 우측하단 모서리를 제외한 코너에 라운드가 적용된 사각형 모양을 작성한다. (drawable/bg_banner.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#462c94"></solid>

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

</shape>

 

---

다음은 사각형 아래에 붙는 꼬리 삼각형 모양을 작성한다. (drawable/bg_banner_tail.xml)

 

크기는 width, height

위치는 item 태그내부의 gravity

모양은 path 태그의 pathData

M x,y 는 (x,y)로 이동하여서 새로운 경로를 시작

Z 는 시작 경로지점으로 선을 그려서 경로를 닫음

 

위 속성을 적절히 수정해가면 삼각형 모양을 만들 수 있다.

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >
<item
    android:width="8dp"
    android:height="8dp"
    android:gravity="bottom|left">
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="8dp"
        android:height="8dp"
        android:viewportWidth="8.0"
        android:viewportHeight="8.0">
        <path
            android:pathData="M 0,8 8,8 0,0z"
            android:fillColor="#462c94"/>
    </vector>
</item>
</layer-list>

 

---

이제 위에서 작성한 2개의 drawable을 이용해 레이아웃을 작성한다. (layout.xml )

관리 편의상 TextView와 ImageView를 하나의 Layout에 넣는다. 

 

 

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/layoutBanner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            >

            <TextView
                android:id="@+id/txtBanner"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_banner"
                android:gravity="center"
                android:paddingStart="8dp"
                android:paddingTop="8dp"
                android:paddingEnd="8dp"
                android:paddingBottom="8dp"
                android:text="풍선도움말"
                android:textColor="#ffffff"
                />

            <ImageView
                android:id="@+id/txtBannerTail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_banner_tail"
                app:layout_constraintBottom_toBottomOf="@+id/txtBanner"
                app:layout_constraintLeft_toRightOf="@+id/txtBanner" />
        </androidx.constraintlayout.widget.ConstraintLayout>