UI 커스텀 할때 유용한 사이트

UI 커스텀 할때 유용한 사이트

• 앱을 구현하는 중에 checkbox를 커스텀 하여 구현할 일이 있었는데, ui를 커스텀 하는데 유용한 사이트를 발견해서 공유하고자 합니다.

 

• 다른 UI 컴포넌트에서도 적용 가능하나 저같은 경우 checkbox에 적용했기 때문에 checkbox 커스텀으로 예시를 들겠습니다.

 

• 안드로이드 checkbox를 커스텀 하기 위해서는 xml로 디자인하여 직접 만드는 경우와 이미지를 구하여 checkbox를 커스텀 할 수 있습니다.

 

 

logo marker

위의 사이트에 가면 직접 UI 로고를 만들 수도 있고,

아래그림과 같이 검색하여 원하는 디자인의 로고를 얻을 수 있습니다.

 

 

 

 

 

그리고 얻은 이미지를 아래 사이트를 통해서 해상도별로 얻으면 끝!

App Icon Maker - Resize App Icon to all sizes for iOS/Android projects.

App Icon Maker - Resize App Icon to all sizes for iOS/Android projects.

 

 

 

실제 코드

custom_checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

• drawble에 있는 checked/unchecked 이미지는 위 사이트에서 얻은 이미지로 하시면 됩니다.

 

 

<CheckBox
        android:id="@+id/chkSelected"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/custom_checkbox"
        android:scaleX="0.5"
        android:scaleY="0.5" />

• 위 코드와 같이 button을 custom_checkbox로 바꿔주신 후 scale을 조정하여 사용하면 간편하게 커스텀 checkbox를 구현할 수 있습니다.