Skip to content

Commit 9b0874d

Browse files
togisofttogisoft
committed
Optimization
Added Arabic language. Adjustments and optimizations have been made.
1 parent 2e5b0ef commit 9b0874d

File tree

29 files changed

+717
-513
lines changed

29 files changed

+717
-513
lines changed

‎.idea/.name‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/gradle.xml‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Jetpack Compose Country Code Picker
2+
23
Jetpack Compose Country Code Picker
34

45
<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>
@@ -12,149 +13,148 @@ If you are looking for Country Phone Code Picker for Jetpack Compose you can use
1213
* Can Customize
1314
* Adding language translations
1415

16+
1517
Languages:
1618

1719
* Turkish
1820
* English
1921
* Italian
22+
* Arabic
2023

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

2326
For language support, you can translate the file below and send it to me.
2427
https://github.com/togisoft/jetpack_compose_country_code_picker/blob/master/ccp/src/main/res/values/strings.xml
2528

26-
<h3> Usage Example </h3>
27-
28-
```kotlin
29-
// With Country Phone Code
30-
@Composable
31-
fun SelectCountryWithCountryCode() {
32-
val getDefaultLangCode = getDefaultLangCode() // Auto detect language
33-
val getDefaultPhoneCode = getDefaultPhoneCode() // Auto detect phone code : +90
34-
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
35-
val phoneNumber = rememberSaveable { mutableStateOf("") }
36-
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
37-
var verifyText by remember { mutableStateOf("") }
38-
var isValidPhone by remember { mutableStateOf(true) }
39-
Column(
40-
modifier = Modifier.padding(16.dp)
41-
) {
42-
Text(
43-
text = verifyText,
44-
fontWeight = FontWeight.Bold,
45-
modifier = Modifier
46-
.fillMaxWidth()
47-
.wrapContentSize(Alignment.Center)
48-
)
49-
TogiCountryCodePicker(
50-
pickedCountry = {
51-
phoneCode = it.countryPhoneCode
52-
defaultLang = it.countryCode
53-
},
54-
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
55-
focusedBorderColor = MaterialTheme.colors.primary,
56-
unfocusedBorderColor = MaterialTheme.colors.primary,
57-
dialogAppBarTextColor = Color.Black,
58-
dialogAppBarColor = Color.White,
59-
error = isValidPhone,
60-
text = phoneNumber.value,
61-
onValueChange = { phoneNumber.value = it }
62-
)
63-
64-
val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
65-
val checkPhoneNumber = checkPhoneNumber(
66-
phone = phoneNumber.value,
67-
fullPhoneNumber = fullPhoneNumber,
68-
countryCode = defaultLang
69-
)
70-
Button(
71-
onClick = {
72-
verifyText = if (checkPhoneNumber) {
73-
isValidPhone = true
74-
"Phone Number Correct"
75-
} else {
76-
isValidPhone = false
77-
"Phone Number is Wrong"
78-
79-
}
80-
},
81-
modifier = Modifier.fillMaxWidth()
82-
.padding(16.dp)
83-
.height(60.dp)
84-
) {
85-
Text(text = "Phone Verify")
86-
}
87-
}
88-
}
29+
<h3>Screenshots</h3>
30+
<div class="row">
31+
<img src="screenshots/1.gif" width="300">
32+
<img src="screenshots/1.jpg" width="300">
33+
<img src="screenshots/1-en.jpg" width="300">
34+
<img src="screenshots/2.jpg" width="300">
35+
<img src="screenshots/3.jpg" width="300">
36+
<img src="screenshots/4.jpg" width="300">
37+
<img src="screenshots/5.jpg" width="300">
38+
<img src="screenshots/6-dark.jpg" width="300">
39+
<img src="screenshots/7-dark.jpg" width="300">
40+
</div>
41+
42+
8943

90-
}
91-
```
92-
9344
<h3> Rounded Field Usage </h3>
9445

9546
```kotlin
96-
val getDefaultLangCode = getDefaultLangCode()
97-
val getDefaultPhoneCode = getDefaultPhoneCode()
98-
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
99-
val phoneNumber = rememberSaveable { mutableStateOf("") }
100-
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
101-
var isValidPhone by remember { mutableStateOf(true) }
102-
103-
TogiRoundedPicker(
104-
value = phoneNumber.value,
105-
onValueChange = { phoneNumber.value = it },
106-
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
47+
val context = LocalContext.current
48+
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
49+
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
50+
val phoneNumber = rememberSaveable { mutableStateOf("") }
51+
var isValidPhone by remember { mutableStateOf(true) }
52+
53+
TogiRoundedPicker(
54+
value = phoneNumber.value,
55+
onValueChange = { phoneNumber.value = it },
56+
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
57+
pickedCountry = {
58+
phoneCode = it.countryPhoneCode
59+
defaultLang = it.countryCode
60+
},
61+
error = isValidPhone
62+
)
63+
64+
65+
```
66+
67+
```kotlin
68+
// With Country Phone Code
69+
@Composable
70+
fun SelectCountryWithCountryCode() {
71+
val context = LocalContext.current
72+
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
73+
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
74+
val phoneNumber = rememberSaveable { mutableStateOf("") }
75+
var isValidPhone by remember { mutableStateOf(true) }
76+
var verifyText by remember { mutableStateOf("") }
77+
Column(
78+
modifier = Modifier.padding(16.dp)
79+
) {
80+
Text(
81+
text = verifyText,
82+
fontWeight = FontWeight.Bold,
83+
modifier = Modifier
84+
.fillMaxWidth()
85+
.wrapContentSize(Alignment.Center)
86+
)
87+
TogiCountryCodePicker(
10788
pickedCountry = {
10889
phoneCode = it.countryPhoneCode
10990
defaultLang = it.countryCode
11091
},
111-
error = isValidPhone
92+
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
93+
focusedBorderColor = MaterialTheme.colors.primary,
94+
unfocusedBorderColor = MaterialTheme.colors.primary,
95+
dialogAppBarTextColor = Color.Black,
96+
dialogAppBarColor = Color.White,
97+
error = isValidPhone,
98+
text = phoneNumber.value,
99+
onValueChange = { phoneNumber.value = it }
112100
)
113-
114-
115-
```
116-
117-
<h3><- ********* Extras ********* -></h3>
118-
119-
* focusedBorderColor = TextField Border Color
120-
* unfocusedBorderColor = TextField Unfocused Border Color
121-
* cursorColor = TextField Cursor Color
122-
* focusedBorderColorSearch = SearchField Border Color
123-
* unfocusedBorderColorSearch = SearchField Unfocused Border Color
124-
* cursorColorSearch = SearchFiled Cursor Color
125-
* dialogAppBarColor = Dialog Top App Bar Background Color
126-
* dialogAppBarTextColor = Dialog Top App Bar Text Color
127-
128-
101+
102+
val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
103+
val checkPhoneNumber = checkPhoneNumber(
104+
phone = phoneNumber.value,
105+
fullPhoneNumber = fullPhoneNumber,
106+
countryCode = defaultLang
107+
)
108+
Button(
109+
onClick = {
110+
verifyText = if (checkPhoneNumber) {
111+
isValidPhone = true
112+
"Phone Number Correct"
113+
} else {
114+
isValidPhone = false
115+
"Phone Number is Wrong"
116+
117+
}
118+
},
119+
modifier = Modifier.fillMaxWidth()
120+
.padding(16.dp)
121+
.height(60.dp)
122+
) {
123+
Text(text = "Phone Verify")
124+
}
125+
}
126+
}
127+
```
128+
129+
<h3><- ********* Extras ********* -></h3>
130+
131+
* focusedBorderColor = TextField Border Color
132+
* unfocusedBorderColor = TextField Unfocused Border Color
133+
* cursorColor = TextField Cursor Color
134+
* focusedBorderColorSearch = SearchField Border Color
135+
* unfocusedBorderColorSearch = SearchField Unfocused Border Color
136+
* cursorColorSearch = SearchFiled Cursor Color
137+
* dialogAppBarColor = Dialog Top App Bar Background Color
138+
* dialogAppBarTextColor = Dialog Top App Bar Text Color
139+
129140
<h3> How to add in your project </h3>
130-
141+
131142
In the build.gradle add maven central repository
132-
133-
134-
143+
135144
```groovy
136145
repositories {
137-
maven { url 'https://jitpack.io' }
146+
maven { url 'https://jitpack.io' }
138147
}
139-
148+
140149
```
150+
141151
Step 2. Add the dependency
152+
142153
```
143154
dependencies {
144-
implementation 'com.github.togisoft:jetpack_compose_country_code_picker:1.1.2'
155+
implementation 'com.github.togisoft:jetpack_compose_country_code_picker:1.1.3'
145156
146157
}
147158
```
148-
149-
150-
151-
<br>
152-
<div class="row">
153-
<img src="screenshots/outlined.gif" width="300">
154-
<img src="screenshots/error.gif" width="300">
155-
<img src="screenshots/shot_screen.gif" width="300">
156-
<img src="screenshots/1.jpg" width="300">
157-
<img src="screenshots/2.jpg" width="300">
158-
<img src="screenshots/3.jpg" width="300">
159-
<img src="screenshots/4.jpg" width="300">
160-
</div>
159+
160+

‎app/src/main/java/com/togitech/togii/MainActivity.kt‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
1212
import androidx.compose.ui.Alignment
1313
import androidx.compose.ui.Modifier
1414
import androidx.compose.ui.graphics.Color
15+
import androidx.compose.ui.platform.LocalContext
1516
import androidx.compose.ui.unit.dp
1617
import com.google.accompanist.systemuicontroller.rememberSystemUiController
1718
import com.togitech.ccp.component.TogiCountryCodePicker
@@ -39,6 +40,7 @@ class MainActivity : ComponentActivity() {
3940
)
4041
Scaffold(modifier = Modifier.fillMaxSize(),
4142
topBar = { TopAppBar(title = { Text(text = "Togisoft") }) }) {
43+
it.calculateTopPadding()
4244
Surface(modifier = Modifier.fillMaxSize()) {
4345
SelectCountryBody()
4446
}
@@ -65,12 +67,10 @@ class MainActivity : ComponentActivity() {
6567

6668
@Composable
6769
fun SelectCountryWithCountryCode() {
68-
val getDefaultLangCode = getDefaultLangCode()
69-
val getDefaultPhoneCode = getDefaultPhoneCode()
70-
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
70+
val context = LocalContext.current
71+
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
7172
val phoneNumber = rememberSaveable { mutableStateOf("") }
72-
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
73-
var verifyText by remember { mutableStateOf("") }
73+
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
7474
var isValidPhone by remember { mutableStateOf(true) }
7575
Column(
7676
modifier = Modifier.padding(16.dp)
@@ -117,14 +117,16 @@ class MainActivity : ComponentActivity() {
117117

118118
@Composable
119119
private fun RoundedPicker() {
120+
val context = LocalContext.current
121+
120122
Column(
121-
modifier = Modifier.padding(16.dp)
123+
modifier = Modifier.padding(8.dp),
124+
horizontalAlignment = Alignment.CenterHorizontally
122125
) {
123-
val getDefaultLangCode = getDefaultLangCode()
124-
val getDefaultPhoneCode = getDefaultPhoneCode()
125-
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
126+
127+
var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
126128
val phoneNumber = rememberSaveable { mutableStateOf("") }
127-
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
129+
var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
128130
var isValidPhone by remember { mutableStateOf(true) }
129131
val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
130132

@@ -140,20 +142,20 @@ private fun RoundedPicker() {
140142
defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
141143
pickedCountry = {
142144
phoneCode = it.countryPhoneCode
143-
defaultLang = it.countryCode
145+
defaultLang = it.countryCode.ifBlank { "tr" }
144146
},
145147
error = isValidPhone
146148
)
147149

148150
OutlinedButton(
149151
onClick = { isValidPhone = checkPhoneNumber }, modifier = Modifier
150152
.fillMaxWidth()
151-
.padding(horizontal = 16.dp)
153+
.padding(horizontal = 16.dp, vertical = 16.dp)
152154
.height(
153155
50.dp
154156
)
155157
) {
156158
Text(text = "Verify Phone Number")
157159
}
158160
}
159-
}
161+
}

‎app/src/main/java/com/togitech/togii/ui/theme/Color.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ val Purple500 = Color(0xFF6200EE)
77
val Purple700 = Color(0xFF3700B3)
88
val Teal200 = Color(0xFF03DAC5)
99
val Blue500 = Color(0xFF062DA7)
10+
val Gray = Color(0xFF1B1B1B)
1011
val Yellow500 = Color(0xFFFFA000)

‎app/src/main/java/com/togitech/togii/ui/theme/Theme.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ private val DarkColorPalette = darkColors(
1414
)
1515

1616
private val LightColorPalette = lightColors(
17-
primary = Blue500,
18-
primaryVariant = Blue500,
17+
primary = Gray,
18+
primaryVariant = Gray,
1919
secondary = Teal200
2020

2121
/* Other default colors to override

0 commit comments

Comments
 (0)