Skip to content

Commit

Permalink
Bug fix and update
Browse files Browse the repository at this point in the history
  • Loading branch information
togisoft committed Oct 17, 2022
1 parent f06f4d6 commit 21d0389
Show file tree
Hide file tree
Showing 27 changed files with 420 additions and 221 deletions.
5 changes: 5 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

103 changes: 87 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,27 @@ Jetpack Compose Country Code Picker

<a href="https://www.buymeacoffee.com/togitech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

<h1>Updated</h1>

If you are looking for Country Phone Code Picker for Jetpack Compose you can use the package.


* Country numbers hints
* Phone number visualTransformation (Automatic number formatting)
* Automatic country recognition (detection by sim card if sim card is inserted)
* With TextField
* Can Customize
* Adding language translations

* Added language translations
* Added clear text button
* Dialog changed

Languages:

* Turkish
* English
* Italian
* Arabic
* Russian

New features will be added every day. This project is open source without any profit motive.

Expand All @@ -28,23 +33,92 @@ https://github.com/togisoft/jetpack_compose_country_code_picker/blob/master/ccp/

<h3>Screenshots</h3>
<div class="row">
<img src="screenshots/1.gif" width="300">
<img src="screenshots/1.jpg" width="300">
<img src="screenshots/1-en.jpg" width="300">
<img src="screenshots/2.jpg" width="300">
<img src="screenshots/3.jpg" width="300">
<img src="screenshots/4.jpg" width="300">
<img src="screenshots/5.jpg" width="300">
<img src="screenshots/6-dark.jpg" width="300">
<img src="screenshots/7-dark.jpg" width="300">
<img src="screenshots/1.png" width="300">
<img src="screenshots/2.png" width="300">
<img src="screenshots/3.png" width="300">
<img src="screenshots/4.png" width="300">
<img src="screenshots/5.png" width="300">
<img src="screenshots/6.png" width="300">
<img src="screenshots/7.png" width="300">
<img src="screenshots/8.png" width="300">
</div>


**** Specifications ****

<h3> DEFAULT </h3>

```kotlin
@Composable
fun TogiCountryCodePicker(
text: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.background,
showCountryCode: Boolean = true,
showCountryFlag: Boolean = true,
defaultCountry: CountryData,
pickedCountry: (CountryData) -> Unit,
focusedBorderColor: Color = MaterialTheme.colors.primary,
unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
cursorColor: Color = MaterialTheme.colors.primary,
error: Boolean,
rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
)

```

<h3> Rounded </h3>

```kotlin
@Composable
fun TogiRoundedPicker(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
shape: Shape = RoundedCornerShape(24.dp),
color: Color = MaterialTheme.colors.background,
showCountryCode: Boolean = true,
showCountryFlag: Boolean = true,
defaultCountry: CountryData,
pickedCountry: (CountryData) -> Unit,
focusedBorderColor: Color = MaterialTheme.colors.primary,
unFocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
cursorColor: Color = MaterialTheme.colors.primary,
error: Boolean,
rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
)

```

<h3> Bottom Text Field </h3>

```kotlin
@Composable
fun TogiBottomCodePicker(
text: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
color: Color = MaterialTheme.colors.background,
showCountryCode: Boolean = true,
showCountryFlag: Boolean = true,
showCountryName: Boolean = true,
defaultCountry: CountryData,
pickedCountry: (CountryData) -> Unit,
focusedBorderColor: Color = MaterialTheme.colors.primary,
unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
cursorColor: Color = MaterialTheme.colors.primary,
error: Boolean,
rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
)

```


<h3> Rounded Field Usage </h3>

```kotlin
val context = LocalContext.current
val context = LocalContext.current
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
val phoneNumber = rememberSaveable { mutableStateOf("") }
Expand Down Expand Up @@ -92,8 +166,6 @@ fun SelectCountryWithCountryCode() {
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
focusedBorderColor = MaterialTheme.colors.primary,
unfocusedBorderColor = MaterialTheme.colors.primary,
dialogAppBarTextColor = Color.Black,
dialogAppBarColor = Color.White,
error = isValidPhone,
text = phoneNumber.value,
onValueChange = { phoneNumber.value = it }
Expand Down Expand Up @@ -131,8 +203,7 @@ fun SelectCountryWithCountryCode() {
* focusedBorderColor = TextField Border Color
* unfocusedBorderColor = TextField Unfocused Border Color
* cursorColor = TextField Cursor Color
* dialogAppBarColor = Dialog Top App Bar Background Color
* dialogAppBarTextColor = Dialog Top App Bar Text Color


<h3> How to add in your project </h3>

Expand Down
14 changes: 7 additions & 7 deletions app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ plugins {
}

android {
compileSdk 32
compileSdk 33

defaultConfig {
applicationId "com.togitech.togii"
minSdk 21
targetSdk 32
targetSdk 33
versionCode 1
versionName "1.0"

Expand All @@ -36,7 +36,7 @@ android {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerExtensionVersion "1.3.2"
}
packagingOptions {
resources {
Expand All @@ -47,13 +47,13 @@ android {

dependencies {

implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.core:core-ktx:1.9.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
implementation 'androidx.activity:activity-compose:1.4.0'
implementation 'com.google.accompanist:accompanist-systemuicontroller:0.24.5-alpha'
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
implementation 'androidx.activity:activity-compose:1.6.0'
implementation 'com.google.accompanist:accompanist-systemuicontroller:0.26.5-rc'

implementation project(path: ':ccp')
testImplementation 'junit:junit:4.13.2'
Expand Down
53 changes: 50 additions & 3 deletions app/src/main/java/com/togitech/togii/MainActivity.kt
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.togitech.togii

import com.togitech.ccp.component.TogiBottomCodePicker
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
Expand All @@ -11,7 +12,6 @@ import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.google.accompanist.systemuicontroller.rememberSystemUiController
Expand Down Expand Up @@ -61,6 +61,7 @@ class MainActivity : ComponentActivity() {

SelectCountryWithCountryCode()
RoundedPicker()
BottomCodePicker()

}
}
Expand All @@ -84,8 +85,6 @@ class MainActivity : ComponentActivity() {
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
focusedBorderColor = MaterialTheme.colors.primary,
unfocusedBorderColor = MaterialTheme.colors.primary,
dialogAppBarTextColor = Color.Black,
dialogAppBarColor = Color.White,
error = isValidPhone,
text = phoneNumber.value,
onValueChange = { phoneNumber.value = it }
Expand Down Expand Up @@ -115,6 +114,54 @@ class MainActivity : ComponentActivity() {
}


@Composable
fun BottomCodePicker() {
val context = LocalContext.current
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
val phoneNumber = rememberSaveable { mutableStateOf("") }
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
var isValidPhone by remember { mutableStateOf(true) }

Column(
modifier = Modifier.padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
TogiBottomCodePicker(
showCountryName = true,
pickedCountry = {
phoneCode = it.countryPhoneCode
defaultLang = it.countryCode
},
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
focusedBorderColor = MaterialTheme.colors.primary,
unfocusedBorderColor = MaterialTheme.colors.primary,
error = isValidPhone,
text = phoneNumber.value,
onValueChange = { phoneNumber.value = it }
)
val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
val checkPhoneNumber = checkPhoneNumber(
phone = phoneNumber.value,
fullPhoneNumber = fullPhoneNumber,
countryCode = defaultLang
)
OutlinedButton(
onClick = {
isValidPhone = checkPhoneNumber
},
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.height(
50.dp
)
) {
Text(text = "Phone Verify")
}
}
}


@Composable
private fun RoundedPicker() {
val context = LocalContext.current
Expand Down
8 changes: 4 additions & 4 deletions build.gradle
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
buildscript {
ext {
compose_version = '1.2.0-beta02'
compose_version = '1.2.1'
}
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id 'com.android.application' version '7.1.2' apply false
id 'com.android.library' version '7.1.2' apply false
id 'org.jetbrains.kotlin.android' version '1.6.21' apply false
id 'com.android.application' version '7.3.0' apply false
id 'com.android.library' version '7.3.0' apply false
id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

task clean(type: Delete) {
Expand Down
18 changes: 11 additions & 7 deletions ccp/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ version '1.1.3'


android {
compileSdk 32
compileSdk 33
namespace = 'com.togitech.ccp'

defaultConfig {
minSdk 21
targetSdk 32
targetSdk 33
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
Expand All @@ -40,7 +40,7 @@ android {
freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn"
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerExtensionVersion "1.3.2"
}
packagingOptions {
resources {
Expand All @@ -50,12 +50,16 @@ android {
}

dependencies {
def lifecycle_version = "2.5.1"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"

implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'androidx.activity:activity-compose:1.4.0'
implementation 'androidx.core:core-ktx:1.9.0'
implementation 'androidx.appcompat:appcompat:1.5.1'
implementation 'androidx.activity:activity-compose:1.6.0'
implementation "androidx.compose.material:material:$compose_version"
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
implementation 'com.googlecode.libphonenumber:libphonenumber:8.12.48'

}
Expand Down
Loading

0 comments on commit 21d0389

Please sign in to comment.