[Android] Shape를 다중으로 사용하기

---

2020/07/23 - [개발 창고/안드로이드 개발] - [Android] round box 만들기

[Android] round box 만들기

 

일반적으로 이전 게시글에서 이야기한 것과 같이 shape를 단일로 호출해주면 도형을 적용할 수 있습니다.

그런데, 이용하다 보면 한가지 제약사항이 발생하곤 하는데, 그건 바로 한쪽만 선을 그어주고 싶은 경우입니다.

 

보통 활용 예시는 다음과 같습니다.

1. 입력창을 개인화 하는경우

2. 제목과 내용을 분리하는 바를 넣고 싶은 경우

3. 제목과 같이 앞에 두꺼운 바를 두고 싶은 경우

 

주로 1번과 2번을 위해 사용되는 경우가 같은데, 간단히 소스로 공유해드리도록 하겠습니다.

설명은 이전 게시글과 큰 차이 없으므로 내용을 이해하는데 어려움은 없을 겁니다.

 

참고로 단점은, 배경색을 투명으로 적용이 불가하다는 단점이 있습니다. (이 문제를 해결할 방법을 아시는 분은 공유 좀 Y.Y)

---

res > drawable > border_under.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#202020" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
        </shape>
    </item>
</layer-list>

 

1. 입력창 개인화

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@drawable/border_under"
        android:text="입력창"
        android:textSize="40sp"
        />
</RelativeLayout>

 

하단에 검정색의 언더바가 들어간 예

 

2. 제목과 내용 분리

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border_under"
        android:padding="10dp"
        android:text="제목"
        android:textSize="40sp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:text="내용"
        android:textSize="40sp"
        />
</LinearLayout>

 

제목과 내용의 분리 예

3. 제목 강조 Bar

 

res > drawable > bar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>
    <item android:start="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
        </shape>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bar"
        android:padding="10dp"
        android:paddingStart="20dp"
        android:text="제목"
        android:textSize="40sp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp"
        android:text="내용"
        android:textSize="40sp"
        />
</LinearLayout>

 

제목 Bar가 생성된 예

 

고려할 사항은 예시에서도 자세히 보면 보이겠지만 바를 제외한 배경 색상이 뒤에 배경과 일치하지 않으면 어색해 보일 수 있다는 단점이 있습니다.

때문에 주로 개발할 때는 res > value > color.xml에 bgColor를 하나 넣어두고 배경색과 생성하는 이미지의 배경색을 공통으로 일치하도록 하는 게 하나의 팁입니다.

---

[JAVA] How to use multiple shapes

🇺🇸 English

2024.02.19 - [개발 창고/Android] - [Android] How to use multiple shapes

[Android] How to use multiple shapes