기본패딩제거

BSpindroid·2022년 4월 29일
0

위젯 디자인

목록 보기
1/1
post-thumbnail

포스팅을 작성하게 된 이유...

  • 디자이너가 올린 디자인이 기본패딩보다 작은경우가 있는데 이를 제거하는 방법을 알아보고 기록하기 위해서

  • 버튼, 라디오버튼, 이미지버튼, 체크박스 등 다양하게 커스텀 가능

  • 기본패딩 제거전
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".ButtonCustomActivity">

    <!--theme.xml에서 기본 텍스트크기를 30dp로 설정함-->
    <!--1. 이미지 파일에 셀렉터를 정의한다
    * 셀렉터에서 padding을 정의하면 기본 패딩값이 사라지게 된다
    2. 정의된 셀렉터를 적용한다-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="기본패딩 제거 전"/>
    <!--<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="기본패딩 제거 후"/>-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50dp"
        android:text="Button"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android_picture"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1번"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2번"/>

    </RadioGroup>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1번"/>

</androidx.appcompat.widget.LinearLayoutCompat>

1.버튼의 기본 패딩을 제거

  • xml파일에서 해당 위젯의 속성을 아래와 같이 설정

android:minWidth="0dp"
android:minHeight="0dp"

android:button="@null" // checkbox, radiobutton의 체크, 동그라미 버튼 삭제

위 속성을 설정하면 버튼이 사라지고 페딩값이 사라진 거나 줄어든 것을 확인할 수 있다

위의 결과로 얻을 수 있겠지만 필자는 아래 방법도 사용하였다

android:includeFontPadding="false" // 글자의 기본 패딩을 제거 -> 상하 여백 증가

+ 버튼의 상하좌우 패딩을 부분적으로 늘리는 방법

  • drawble -> new -> Drawble Resource File 누르고 이름입력해 생성후
    selector 리소스 파일 정의
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--상태변화가 있는 효과는 항상 기본효과보다 위에 적용-->
    <!-- 버튼 클릭 상태 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <stroke android:width="2dp"
                android:color="#C7C7C9"/>
            <corners android:radius="100dp"/>
            <padding
                android:top="3dp"
                android:bottom="3dp"
                android:left="15dp"
                android:right="15dp" />
        </shape>
    </item>
    <!-- 버튼 기본 상태 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/purple_200"/>
            <corners android:radius="100dp"/>
            <padding
                android:top="3dp"
                android:bottom="3dp"
                android:left="15dp"
                android:right="15dp" />
        </shape>
    </item>
</selector>
  1. selector로 버튼의 상태에따라 배경이 변화되게 만든다

2.shape안의 padding 태그안에 아래 값을 설정함으로써 좌우에 더 많은 패딩값을 줬다

android:top="3dp"
android:bottom="3dp"
android:left="15dp"
android:right="15dp"

  1. padding이 제거된 리소스파일을 해당 위젯의 background에 적용
  • 최종 xml파일
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".ButtonCustomActivity">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="기본패딩 제거 후"/>
    <Button
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:includeFontPadding="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50dp"
        android:text="안녕"/>

    <ImageButton
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/android_picture"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:button="@null"
            android:includeFontPadding="false"
            android:background="@drawable/selector_radio_button"
            android:layout_marginRight="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1번"/>

        <RadioButton
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:button="@null"
            android:includeFontPadding="false"
            android:background="@drawable/selector_radio_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2번"/>

    </RadioGroup>

    <CheckBox
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:button="@null"
        android:includeFontPadding="false"
        android:background="@drawable/selector_radio_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1번"/>

</androidx.appcompat.widget.LinearLayoutCompat>
  • 결과화면

마치면서

기본패딩이 제거가 안되서 구현하기 어려운 디자인이 많았는데 위 방법을 적용하면 많은 디자인을 구현할 수 있었다.

profile
Android 신입 개발자를 향해!

0개의 댓글