[Android] 색상 선택창, 팔레트 구현하기 - Color Sheet 라이브러리 사용법

목차

 

이번 포스트에서는 msaikanth/colrSheet을 이용해서 팔레트 창을 만들어보겠습니다. 

 

GitHub - msasikanth/ColorSheet: A color picker bottom sheet 🌈

 

결과물은 아래와 같습니다.

Dependency 추가하기

 

colorSheet라이브러리를 사용하기 위해서는 minSdk가 21 이상이 여야 합니다.

//color Sheet
    implementation "dev.sasikanth:colorsheet:1.0.1"

 

ColorSheet Layout설정

 

 

저는 fragment안에 picker color 버튼을 누르면 colorSheet이 다이얼로그로 띄우게 할 것이기 때문에

fragment안에 button을 누르면 다이얼로그가 띄워지고, 유저가 색상을 선택하면 TextView로 유저가 선택한 색깔로 backgroundtint가 바뀌도록 해보겠습니다. 

 

저는 위 빨간박스 같이 모서리가 동그란 모양으로 만들어주고 싶기 때문에 아래와 같이 shape 리소스를 추가해주었습니다. 

 

res/drawable/home_iconshape

 

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="8dp" />

</shape>

 

res/layout/color_sheetLayout

 

<TextView
        android:id="@+id/displayColor"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/home_icon_shape"
        android:backgroundTint="@color/Dark"
        app:layout_constraintBottom_toBottomOf="@+id/colorPicker_button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/colorPicker_button" />

    <Button
        android:id="@+id/colorPicker_button"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:text="Pick Color"
        android:textColor="@color/headline"
        app:layout_constraintStart_toEndOf="@+id/displayColor"
        app:layout_constraintTop_toBottomOf="@+id/appBarLayout" />

 

Activity나 Fragment에서 Color Sheet 설정하기

 

이번 예제에서는 fragment에서 팔레트 창이 열리기 때문에 Activity에서 colorsheet을 구현하신다면 코멘트를 확인해주세요. 

 

class CreateSubjectFragment : Fragment(R.layout.create_subject_dialog) {

	//선택된 색깔이 무엇인지 먼저 구현해줍니다. 
	private var selectedColor: Int = ColorSheet.NO_COLOR 
    	companion object {
        	private const val COLOR_SELECTED = "selectedColor"

    	}
        
        //onCreateView는 엑티비티에서oncreate과 비슷한 역할을 합니다. 
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?

    ): View? {
    	val view = inflater.inflate(R.layout.create_subject_dialog, container, false)
    //colorSheet
    	
       	//view를 통해주는 이유는 바로 colorPicker로 불러오게되면 에러가 나옵니다. 반드시 뷰를 통해전달해줘야합니다.
        //Activity에서 사용한다면 view.가 필요없이 바로 사용해줄수있습니다. 
        view.colorPicker_button.setOnClickListener{
            setupColorSheet() //코드를 간단하게 보이게 하기위해 아래 새로운함수로 만들어 주었습니다. 
        }
        return view
    }
    
    private fun setupColorSheet()  {
        val colors = resources.getIntArray(R.array.colors) // array는 다음 코드 블록에서 만들어주겠습니다. 
        ColorSheet().cornerRadius(8)
        	
            //colorPicker 설정
            
            .colorPicker(
                colors = colors,
                selectedColor = selectedColor,
                listener = { color ->
                    selectedColor = color
                    setColor(selectedColor) 
                })
            .show(childFragmentManager) //fragment에서 써주기때문에 childFragmentManager로 썻습니다. 
            //만약 Activity에서 사용하신다면, supportFragmentManager을 대신 넣어주세요.

    }
    
    //ui에 textView background tint와 pickColor버튼의 text를 바꿔줍니다.
    private fun setColor(@ColorInt color: Int) {
            displayColor.backgroundTintList = ColorStateList.valueOf(color) //backgroundtint를 선택된 컬러로 바꿉니다.
            colorPicker_button.text = ColorSheetUtils.colorToHex(color) //선택된 color의 코드로 pick color버튼의 text를 바꿉니다.
    }

 

팔레트에 들어갈 색상 array에 넣어주기

 

이제 파레트에 들어갈 색상을 Array에 넣어주어야 합니다. 

 

 

Value아래에 Array.xml을 만들어주세요. 여기 안에있는 Array들이 팔레트에 들어가게 될 색상입니다. 

 

res/values/array

<resources>
    <array name="colors">
        <item>#d32f2f</item>
        <item>#7b1fa2</item>
        <item>#303f9f</item>
        <item>#0288d1</item>
        <item>#00796b</item>
        <item>#689f38</item>
        <item>#fbc02d</item>
        <item>#f57c00</item>
        <item>#5d4037</item>
        <item>#455a64</item>
    </array>
</resources>

 

결과