Android 개발 시 가로로 배열된 여러 버튼 사이의 간격 제거하기

1. 문제 상황

요약에서 설명한 내용이 명확하지 않을 수 있어, 문제를 아래 그림으로 보여드립니다.

Button1과 Button2 사이의 간격, 그리고 버튼과 좌우 경계 사이의 간격을 어떻게 제거할 수 있을까요?

2. 문제의 원인

여기서 발생하는 간격은 사실 버튼 배경 이미지의 투명한 부분 때문입니다. 아래 그림을 참고하세요. (두 버튼이 동시에 눌린 상태)

이 간격은 버튼 자체의 일부이기 때문에 margin과 padding을 0으로 설정해도 제거되지 않습니다. (margin을 음수로 설정하는 것은 진정한 해결책이라고 하기 어렵겠죠?)

3. 해결 방안 및 검증

버튼의 style 속성 설정:
```
<Button style="?android:attr/buttonBarButtonStyle"/>
```
(초기 상태)

(두 버튼이 모두 눌린 상태)

방안 1의 효과: 간격을 제거할 수 있으며, 버튼 기본 클릭 효과(배경색이 파란색으로 변함)에 영향을 주지 않습니다.
버튼의 style을 사용자 정의 style로 설정 (혹은 버튼의 background 속성에 사용자 정의 이미지 직접 설정):
```
<style name="mybutton">
    <item name="android:background" >@drawable/whitecolor</item>
    <item name="android:padding">0dp</item>
    <item name="android:gravity">center</item>
</style>
```
(초기/눌림 상태)

방안 2의 효과: 간격은 제거되지만, 버튼의 기본 클릭 효과가 사라집니다.
버튼의 background를 투명색으로 설정:
```
android:background="#00000000"
```
(초기/눌림 상태)

방안 3의 효과: 간격은 제거되지만, 버튼의 기본 클릭 효과가 사라집니다 (방안 2와 동일한 결과).

LinearLayout을 TableLayout으로 교체:

<TableLayout
    android:stretchColumns="*"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text=" Button1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text=" Button2" />
    </TableRow>
</TableLayout>

방안 4의 효과: 간격을 제거할 수 없습니다.

사용자 정의 selector를 버튼 배경으로 사용:
```
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/highlight"
        android:state_pressed="true"></item>
    <item android:drawable="@drawable/normal"></item>
</selector>
```
```
android:background="@drawable/bg_btn"
```
(왼쪽 버튼이 눌린 상태)

방안 5의 효과: 간격을 제거할 수 있으며, 버튼의 기본 클릭 효과에 영향을 주지 않습니다 (방안 1과 유사하지만, 버튼 배경을 커스터마이징할 수 있다는 점에서 더 낫습니다).

4. 요약

버튼 간격을 제거하는 핵심은 background 속성을 수정하는 것입니다. 테두리에 투명색이 포함되지 않은 이미지를 버튼 배경으로 사용하면 간격을 없앨 수 있습니다.

버튼 간격 제거를 위해서는 방안 5(사용자 정의 selector를 버튼 배경 이미지로 사용)를 권장합니다.

1. 문제 상황

2. 문제의 원인

3. 해결 방안 및 검증

4. 요약

댓글

댓글 작성