[Android] 이미지 버튼 만들기

이미지 버튼을 만들땐 해상도에 따라 버튼의 넓이를 조절할 것인지, 고정 dp로 할것인지에 따라 다르게 작업해야 합니다. 

해상도에 따라 버튼의 넓이를 조절하고 높이는 고정으로 할 경우 이미지를 다운받아서 적용하면 이미지 원본 비율을 유지한채 나머지 넓이는 여백으로 가득 찰 것 입니다.  그래서 상황에 맞는 이미지를 적용해야 합니다.

>> 통 이미지를 그대로 적용했을 경우

        <ImageView
            android:id="@+id/image1"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:src="@drawable/group8"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

통 이미지

위 이미지를 버튼에 적용한 결과 

여백을 채우고자 scalyType을 fill_xy로 지정하는등 억지로 늘린다면 이미지가 깨지는 결과를 초래합니다.  그렇기 때문에 이미지의 넓이만 늘리는 작업은 vector기반으로 작업하거나 넓이에 따라 높이를 늘려주거나 centerCrop으로 모든 이미지를 보여주진 않지만 꽉차게 보이게 할순 있습니다. 

scale type : centerCrop으로 설정

하지만 위와 같은 결과를 원하진 않기 때문에 넓이만 넓어지는 버튼의 경우 배경은 drawable(코드로 직접 그린다)로 작성하고 버튼안 체크 이미지만 따로 짤라서 사용합니다. 

※drawable로 도형을 그리는 방법은 구글링을 참고하세요

>> 배경과 버튼속 이미지를 따로 분류해서 작업한 경우

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="0dp"
            android:layout_margin="20dp"
            android:layout_height="50dp"
            android:background="@drawable/round_chatting_me"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/group8"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

분리된 이미지를 이미지뷰에 설정하고, 추가로 생성한 부모 뷰를 배경으로 설정하면 해상도에 따라 넓이는 넓어지고 버튼속 이미지도 깨지지 않는 이미지 버튼을 만들 수 있습니다. ( 위 코드에서 사용한 'group8' 이미지가 처음엔 보라색 배경까지 포함된 이미지 였다가 배경으로 사용할 부모 뷰로 분리한 뒤로 흰색 체크 모양만 갖고 있는 이미지로 변경 해서 작업 했습니다. ) 

위 코드의 결과 

 

상황에따라 작업을 달리하면 조금 더 퀄리티 있고 이쁜 앱을 만들 수 있습니다.

궁금하신 사항이나 잘못된 내용은 댓글로 남겨주시면 반영하도록 하겠습니다. 감사합니다.