Merge pull request #3 from TuleSimon/v1.13

minor improvements

README.md

@@ -5,10 +5,12 @@ Jetpack Compose Material Country Code Picker
 <a href="https://www.linkedin.com/mwlite/in/tule-simon-67a202157">Chat me up on Linkedln</a>
 
 ## Latest Version
-The latest version is <a href="https://github.com/TuleSimon/xMaterialccp/releases/tag/v1.12">V1.12</a>
+The latest version is <a href="https://github.com/TuleSimon/xMaterialccp/releases/tag/v1.13">v1.13</a>
 
-## WHAT IS NEW (v1.12)
+## WHAT IS NEW (v1.13)
 * update compose version, and android kotlin version
+* Added a new color feature
+* fix minor bugs
 
 # CREDIT
 This project was forked from <a href="https://github.com/togisoft/jetpack_compose_country_code_picker">togisoft</a>,
@@ -66,35 +68,29 @@ fun MaterialCountryCodePicker(
     showCountryFlag: Boolean = true,
     defaultCountry: CountryData,
     pickedCountry: (CountryData) -> Unit,
-    focusedBorderColor: Color = MaterialTheme.colorScheme.primary,
-    unfocusedBorderColor: Color = MaterialTheme.colorScheme.onSecondary,
-    cursorColor: Color = MaterialTheme.colorScheme.primary,
-    dialogAppBarColor: Color = MaterialTheme.colorScheme.primary,
-    error: Boolean=false,
-    showErrorText: Boolean=true,
+    error: Boolean = false,
+    showErrorText: Boolean = true,
     flagPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
-    surfaceColor:Color = MaterialTheme.colorScheme.surface,
-    countryItemBgColor:Color = Color.Unspecified,
-    countryItemBgShape:RoundedCornerShape = RoundedCornerShape(0.dp),
-    phonenumbertextstyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    phonehintnumbertextstyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    searchFieldPlaceHolderTextStyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    searchFieldTextStyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    searchFieldBackgroundColor:Color = MaterialTheme.colorScheme.background.copy(0.7f),
-    searchFieldShapeCornerRadiusInPercentage:Int = 30,
-    textFieldShapeCornerRadiusInPercentage:Int = 30,
-    errorTextStyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    dialogNavIconColor: Color = MaterialTheme.colorScheme.onBackground,
-    appbartitleStyle :TextStyle = MaterialTheme.typography.titleLarge,
+    countryItemBgShape: RoundedCornerShape = RoundedCornerShape(0.dp),
+    phonenumbertextstyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    phonehintnumbertextstyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    searchFieldPlaceHolderTextStyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    searchFieldTextStyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    searchFieldShapeCornerRadiusInPercentage: Int = 30,
+    textFieldShapeCornerRadiusInPercentage: Int = 30,
+    errorTextStyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    appbartitleStyle: TextStyle = MaterialTheme.typography.titleLarge,
     countryItemVerticalPadding: Dp = 8.dp,
     countryItemHorizontalPadding: Dp = 8.dp,
-    countrytextstyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    dialogcountrycodetextstyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    showCountryCodeInDIalog:Boolean = true,
-    countrycodetextstyle:TextStyle = MaterialTheme.typography.bodyMedium,
-    showDropDownAfterFlag:Boolean = false,
-    dropDownIconTInt:Color = MaterialTheme.colorScheme.onBackground
-) 
+    countrytextstyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    dialogcountrycodetextstyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    showCountryCodeInDIalog: Boolean = true,
+    countrycodetextstyle: TextStyle = MaterialTheme.typography.bodyMedium,
+    showDropDownAfterFlag: Boolean = false,
+    isEnabled: Boolean = true,
+    isReadOnly: Boolean = false,
+    colors:CCPColors
+)
 ```  
 
 
@@ -119,13 +115,9 @@ fun SelectCountryWithCountryCode() {
                 defaultLang = it.countryCode
             },
             defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
-            focusedBorderColor = MaterialTheme.colorScheme.primary,
-            unfocusedBorderColor = MaterialTheme.colorScheme.primary,
-            dialogAppBarColor = Color.White,
             error = !isValidPhone,
             text = phoneNumber.value,
             onValueChange = { phoneNumber.value = it },
-            surfaceColor = MaterialTheme.colorScheme.surface,
             searchFieldPlaceHolderTextStyle = MaterialTheme.typography.bodyMedium,
             searchFieldTextStyle = MaterialTheme.typography.bodyMedium,
             phonenumbertextstyle =  MaterialTheme.typography.bodyMedium,
@@ -134,14 +126,30 @@ fun SelectCountryWithCountryCode() {
             showErrorText = true,
             showCountryCodeInDIalog = true,
             showDropDownAfterFlag = true,
-            searchFieldBackgroundColor = MaterialTheme.colorScheme.secondaryContainer,
             textFieldShapeCornerRadiusInPercentage = 40,
             searchFieldShapeCornerRadiusInPercentage = 40,
             appbartitleStyle = MaterialTheme.typography.titleLarge,
             countryItemBgShape = RoundedCornerShape(5.dp),
             showCountryFlag = true,
             showCountryCode = true,
-            countryItemBgColor = MaterialTheme.colorScheme.secondaryContainer
+            isEnabled = true,
+            colors  = ccpDefaultColors(
+                primaryColor =MaterialTheme.colorScheme.primary,
+                errorColor =MaterialTheme.colorScheme.error,
+                backgroundColor =MaterialTheme.colorScheme.background,
+                surfaceColor =MaterialTheme.colorScheme.surface,
+                outlineColor =MaterialTheme.colorScheme.outline,
+                disabledOutlineColor =MaterialTheme.colorScheme.outline.copy(0.1f),
+                unfocusedOutlineColor =MaterialTheme.colorScheme.onBackground.copy(0.3f),
+                textColor =MaterialTheme.colorScheme.onBackground.copy(0.7f),
+                cursorColor =MaterialTheme.colorScheme.primary,
+                topAppBarColor =MaterialTheme.colorScheme.surface,
+                countryItemBgColor =MaterialTheme.colorScheme.surface,
+                searchFieldBgColor =MaterialTheme.colorScheme.surface,
+                dialogNavIconColor =MaterialTheme.colorScheme.onBackground.copy(0.7f),
+                dropDownIconTint =MaterialTheme.colorScheme.onBackground.copy(0.7f)
+
+            )
         )
 
         val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
@@ -184,30 +192,23 @@ fun SelectCountryWithCountryCode() {
 * *** showCountryFlag ***
 * *** defaultCountry *** The default country to be showed when the ccp is first initialized without any selection
 * *** pickedCountry *** the function to be called whenever a country is selected with a parameter of [CountryData] that sets the select country data to the parameter passed
-* *** focusedBorderColor *** the border color when textfield is focused
-* *** unfocusedBorderColor *** the border color when textfield is unfocused
-* *** cursorColor *** The color to be used for the cursor on the textfield
-* *** dialogAppBarColor *** The background color of the topappbar
 * *** error *** if to switch textfield to error state, if `true` the textfield shows red outlines and an error icon
 * showErrorText if to show an errortext that appears below the textfield when an error occurs
 * flagPadding the padding values on the textfield
-* surfaceColor The color to be used as surface background for the country lazy column
-* countryItemBgColor The background color of the country item in the lazy column
 * countryItemBgShape The shape to be used for a row in the lazy column
 * phonenumbertextstyle the textstyle for the phone number on the textfield
 * phonehintnumbertextstyle the textstyle for the phone number hint on the textfield
 * searchFieldPlaceHolderTextStyle the placeholder on the searchfield text style
 * searchFieldTextStyle the search textfield text style
 * errorTextStyle the style to be used for the error text
 * appbartitleStyle the style to be used for the title on the appbar
-* searchFieldBackgroundColor the background color of the search field
 * searchFieldShapeCornerRadiusInPercentage the searchfield shape corner radius
 * textFieldShapeCornerRadiusInPercentage the textfield shape corner radius
-* dialogNavIconColor the navigation icon on the appbar tint color
 * countryItemVerticalPadding the vertical padding for the country item on the lazy column
 * countryItemHorizontalPadding the horizontal padding for the country item on the lazy column
 * isEnabled to make the cccp to be enabled or disabled, if disabled the ccp can not be edited
 * isReadOnly to make the cccp to be readonly, if readonly ccp can not be edited
+* *** colors *** customized the colors of the picker
 
 
 

app/build.gradle

@@ -50,8 +50,8 @@ android {
 dependencies {
 
     implementation 'androidx.core:core-ktx:1.9.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
-    implementation 'androidx.activity:activity-compose:1.6.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
+    implementation 'androidx.activity:activity-compose:1.7.0'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
     implementation 'androidx.compose.material3:material3:1.1.0-alpha07'

app/src/main/java/com/simon/materialCCPExample/MainActivity.kt

@@ -21,6 +21,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.simon.materialCCPExample.ui.theme.MaterialCCPExampleTheme
 import com.simon.xmaterialccp.component.MaterialCountryCodePicker
+import com.simon.xmaterialccp.data.CCPColors
+import com.simon.xmaterialccp.data.ccpDefaultColors
 import com.simon.xmaterialccp.data.utils.checkPhoneNumber
 import com.simon.xmaterialccp.data.utils.getDefaultLangCode
 import com.simon.xmaterialccp.data.utils.getDefaultPhoneCode
@@ -77,29 +79,41 @@ fun SelectCountryWithCountryCode() {
                 defaultLang = it.countryCode
             },
             defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
-            focusedBorderColor = MaterialTheme.colorScheme.primary,
-            unfocusedBorderColor = MaterialTheme.colorScheme.primary,
-            dialogAppBarColor = Color.White,
             error = !isValidPhone,
             text = phoneNumber.value,
             onValueChange = { phoneNumber.value = it },
-            surfaceColor = MaterialTheme.colorScheme.surface,
-            searchFieldPlaceHolderTextStyle = MaterialTheme.typography.titleLarge.copy(color = Color.Green),
+            searchFieldPlaceHolderTextStyle = MaterialTheme.typography.bodyMedium,
             searchFieldTextStyle = MaterialTheme.typography.bodyMedium,
             phonenumbertextstyle =  MaterialTheme.typography.bodyMedium,
             countrytextstyle =  MaterialTheme.typography.bodyMedium,
             countrycodetextstyle =  MaterialTheme.typography.bodyMedium,
             showErrorText = true,
             showCountryCodeInDIalog = true,
             showDropDownAfterFlag = true,
-            searchFieldBackgroundColor = MaterialTheme.colorScheme.secondaryContainer,
             textFieldShapeCornerRadiusInPercentage = 40,
             searchFieldShapeCornerRadiusInPercentage = 40,
             appbartitleStyle = MaterialTheme.typography.titleLarge,
             countryItemBgShape = RoundedCornerShape(5.dp),
             showCountryFlag = true,
             showCountryCode = true,
-            countryItemBgColor = MaterialTheme.colorScheme.secondaryContainer
+            isEnabled = true,
+            colors  = ccpDefaultColors(
+                primaryColor =MaterialTheme.colorScheme.primary,
+                errorColor =MaterialTheme.colorScheme.error,
+                backgroundColor =MaterialTheme.colorScheme.background,
+                surfaceColor =MaterialTheme.colorScheme.surface,
+                outlineColor =MaterialTheme.colorScheme.outline,
+                disabledOutlineColor =MaterialTheme.colorScheme.outline.copy(0.1f),
+                unfocusedOutlineColor =MaterialTheme.colorScheme.onBackground.copy(0.3f),
+                textColor =MaterialTheme.colorScheme.onBackground.copy(0.7f),
+                cursorColor =MaterialTheme.colorScheme.primary,
+                topAppBarColor =MaterialTheme.colorScheme.surface,
+                countryItemBgColor =MaterialTheme.colorScheme.surface,
+                searchFieldBgColor =MaterialTheme.colorScheme.surface,
+                dialogNavIconColor =MaterialTheme.colorScheme.onBackground.copy(0.7f),
+                dropDownIconTint =MaterialTheme.colorScheme.onBackground.copy(0.7f)
+
+            )
         )
 
         val fullPhoneNumber = "$phoneCode${phoneNumber.value}"

app/src/main/java/com/simon/materialCCPExample/ui/theme/Theme.kt

@@ -10,6 +10,7 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
@@ -24,8 +25,11 @@ private val DarkColorScheme = darkColorScheme(
 private val LightColorScheme = lightColorScheme(
     primary = Purple40,
     secondary = PurpleGrey40,
-    tertiary = Pink40
-
+    tertiary = Pink40,
+    surface = Color.White,
+    background = Color.Gray,
+    outline = PurpleGrey40.copy(0.5f),
+    error = Color.Red
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),
@@ -41,7 +45,7 @@ private val LightColorScheme = lightColorScheme(
 fun MaterialCCPExampleTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
-    dynamicColor: Boolean = true,
+    dynamicColor: Boolean = false,
     content: @Composable () -> Unit
 ) {
     val colorScheme = when {

build.gradle

@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        compose_version = '1.4.0-beta02'
+        compose_version = '1.4.0'
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {

xmaterialccp/build.gradle

@@ -5,7 +5,7 @@ plugins {
 }
 
 group = 'com.github.TuleSimon'
-version = '1.12'
+version = 'v1.13'
 
 android {
     namespace 'com.simon.xmaterialccp'
@@ -53,8 +53,8 @@ dependencies {
 
     implementation 'androidx.core:core-ktx:1.9.0'
     implementation 'androidx.appcompat:appcompat:1.6.1'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
-    implementation 'androidx.activity:activity-compose:1.6.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
+    implementation 'androidx.activity:activity-compose:1.7.0'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
     implementation 'androidx.compose.material3:material3:1.1.0-alpha07'
@@ -74,7 +74,7 @@ afterEvaluate {
                 from components.release
                 groupId = 'com.github.TuleSimon'
                 artifactId = 'xMaterialccp'
-                version = '1.12'
+                version = 'v1.13'
             }
         })
     }