https://github.com/tfaki/CountryCP

Customize your country text field for Jetpack Compose
https://github.com/tfaki/CountryCP

android-library composer-library country-code-picker country-flags country-list country-picker customizable jetpack-compose textfield

Last synced: about 2 months ago
JSON representation

Customize your country text field for Jetpack Compose

• Host: GitHub
• URL: https://github.com/tfaki/CountryCP
• Owner: tfaki
• Created: 2023-11-22T16:43:01.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-01-29T08:28:31.000Z (5 months ago)
• Last Synced: 2024-05-02T05:25:44.012Z (about 2 months ago)
• Topics: android-library, composer-library, country-code-picker, country-flags, country-list, country-picker, customizable, jetpack-compose, textfield
• Language: Kotlin
• Homepage:
• Size: 7.22 MB
• Stars: 51
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-list - tfaki/CountryCP - Customize your country text field for Jetpack Compose (Kotlin)

README

        


  

  

  





  

  

  



## CountryCP

Customize your country text field for Jetpack Compose



 



 
GIF 





 



## Usage

```kotlin

  val phoneNumber = remember { mutableStateOf("") }

  val showError = remember { mutableStateOf(false) }

  CountryCP(

     modifier = Modifier

      .background(Color.White)

      .fillMaxWidth()

      .padding(horizontal = 16.dp, vertical = 8.dp),

     text = phoneNumber.value,

     shape = RoundedCornerShape(8.dp),

     showError = showError.value,

     errorText = "Enter correct phone number",

     onValueChange = { phoneNumber.value = it },

     phonePlaceholder = {

        Text(text = "xxx xxx xx xx")

      },

     errorTextPaddings = PaddingValues(vertical = 2.dp, horizontal = 16.dp),

     onFullNumberValue = { fullPhoneNumber.value = it },

     phoneFieldColors = OutlinedTextFieldDefaults.colors(

       focusedBorderColor = Color.Red,

       unfocusedBorderColor = Color.Transparent,

       focusedContainerColor = Color.White,

       unfocusedContainerColor = Color.LightGray,

       errorContainerColor = if (showError.value) Color(0xFFFFE5E5) else Color.Transparent

     )

  )

```

## Customize

```python

  modifier -> Arrange your view

  searchModifier -> Arrange your search view

  text -> Set text

  onValueChange -> Use when text changes

  onFullNumberValue -> Get fullnumber value

  shape -> Arrange country field radius

  showCountryCode -> If you want the country code to appear

  showError -> If you want the error to appear

  errorText -> Set error text

  showClearIcon -> If you want clear icon to appear

  focusField -> If you want focus the field

  initialCountryCode -> Arrange initial country

  errorTextPaddings -> Set error label paddings

  phonePlaceholder -> When custom phone placeholder

  searchPlaceholder -> When custom search placeholder

  onClicked -> Get clicked

  phoneFieldColors -> Set your phone field colors

  searchFieldColors -> Set your search field colors

  customRightIcon -> Customize your right icon

```

## Download

> material3 is required.

  Groovy

  ## settings.gradle

  ```gradle

  maven { url 'https://jitpack.io' }

  ```

  ## build.gradle

  ```gradle

  implementation 'androidx.compose.material3:material3:1.1.0'

  implementation 'com.github.tfaki:CountryCP:'

  ```

  Kotlin DSL

  ## settings.gradle

  ```gradle

  maven(url = "https://jitpack.io")

  ```

  ## build.gradle

  ```gradle

  implementation("androidx.compose.material3:material3:1.1.0")

  implementation("com.github.tfaki:CountryCP:")

  ```

 
License 



``` xml

Copyright 2023 tfaki.

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.