티스토리 뷰

Color Picker란, 다음과 같이 사용자가 마우스를 통해 직접 색깔을 선택하여고, 
마우스 위치의 색을 가져오는 도구를 말한다. 

개발중인 앱에 이걸 쓰고싶었다. (필요했다)
사실 라이브러리로 있는 줄 모르고, 내가 직접 만들고 있었다.

여기서 제일 오른쪽 하단의 버튼을 누르면 사용자가 직접 Color를 설정할 수 있게 하고 싶었다.
그래서 알아보다가 Color Picker라는 라이브러리를 알게됐다. 
github.com/Dhaval2404/ColorPicker 여기에 아주 잘나와있다.

 

Dhaval2404/ColorPicker

🎨 Color Picker Library for Android. Contribute to Dhaval2404/ColorPicker development by creating an account on GitHub.

github.com

대충 설명하자면,

1. implementation 'com.github.dhaval2404:colorpicker:2.0'
   build.gradle의 dependency에 추가해야된다. 

ex)

dependencies {
	...
    implementation 'com.github.dhaval2404:colorpicker:2.0'
	...
}


2.  아래와 같이 사용하면 된다고 한다. 

// Kotlin Code
ColorPickerDialog
    .Builder(this)        				// Pass Activity Instance
    .setTitle("Pick Theme")           	// Default "Choose Color"
    .setColorShape(ColorShape.SQAURE)   // Default ColorShape.CIRCLE
    .setDefaultColor(mDefaultColor)     // Pass Default Color
    .setColorListener { color, colorHex ->
    	// Handle Color Selection
    }
    .show()

 

나는 버튼을 클릭했을 때 color picker를 띄워야하니, 아래와 같이 했다.

override fun onClick(view : View?) {
        when(view) {
            binding?.dialogColorPickerBtn -> {
                ColorPickerDialog
                    .Builder(context)        				// Pass Activity Instance
                    .setTitle("배경 색 설정")  
                    .setDefaultColor(parseColor("#ffffff"))          	// Default "Choose Color"
                    .setColorShape(ColorShape.CIRCLE)   // Default ColorShape.CIRCLE
                    .setColorListener { color, colorHex ->
                        // Handle Color Selection
                    }
                    .show()
            }

        }
    }

이제되겠지?

에러가 발생한다. minSdkVersion을 최소 21로 설정해주어야된다. build/gradle에서 meanSdkVersion을 21로 바꿔주자.

defaultConfig {
        multiDexEnabled true
        applicationId "com.example.obliviate"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

 

이제되겠지? 
이번엔 실행은 되는데 버튼을 누르면 다음과 같은 에러를 내면서 앱이 종료됨

dialog_color_picker:  Error inflating class com.google.android.material.card.MaterialCardView ..

java.lang.IllegalArgumentException:The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).

열심히 구글링 한 결과
AndroidManifest.xml에 android:theme을 
android:theme="@style/Theme.MaterialComponents.NoActionBar"로 설정해줘야된다..

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MaterialComponents.NoActionBar"> // 여기!
        <!--        Theme.AppCompat.NoActionBar-->
        <receiver android:name=".NewAppWidget">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
            </intent-filter>

            <meta-data
                android:name="android.appwidget.provider"
                android:resource="@xml/new_app_widget_info" />
        </receiver>

        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"></activity>
    </application>

이런식으로... 

이제되겠지?

이상하게 변해버린 모습(?)

아니.... 왜그래...
다시 또 검색을 열심히 해본결과 Layout에서 Button이 아니라 
androidx.appcompat.widget.AppCompatButton을 써주면 된다고 한다.

EX)

<androidx.appcompat.widget.AppCompatButton
                android:backgroundTint="#ED3624"
                android:background="@drawable/button_shape"
                android:layout_margin="5dp"
                android:layout_width="40dp"
                android:layout_height="40dp"/>

이제되겠지?

잘 나온다!

근데 저 Color Picker창의 배경색은 어떻게 바꾸는건지 모르겠다...
너무 밤색인데.. 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday