Country Code Picker Compose library
A Modern Country Code Picker for Jetpack Compose
github.com/ahmmedrejowan/CountryCodePickerCompose
Install
Add the dependency to your module's
build.gradle.kts(orbuild.gradle):kotlindependencies { implementation("com.rejowan:ccpc:1.0.1") }groovydependencies { implementation 'com.rejowan:ccpc:1.0.1' }
Screenshots
6 images, scroll sideways, open one to use the arrow keys
About
A beautiful, modern country code picker library built with Jetpack Compose and Material 3. Features 4 flexible usage modes (View, TextField, Dialog, BottomSheet), automatic country detection, phone number validation with libphonenumber, visual number formatting, and support for 19 languages. Minimal footprint using emoji flags instead of image assets.
Features
- Minimal & Lightweight - Optimized for performance with efficient code
- Emoji Flags - No image assets needed, uses native emoji flags
- 4 Usage Modes - View, TextField, Dialog, and BottomSheet
- Automatic Detection - Detects user's country based on device settings
- Phone Validation - Built-in validation using libphonenumber
- Visual Transformation - Automatic phone number formatting as you type
- Advanced Search - Search by country name, code, or phone number
- Material 3 Design - Complete Material You compliance
- 19 Languages - Country names in multiple languages
- Dark Mode - Full dark mode support with proper contrast
- Highly Customizable - Extensive customization options
Usage
Basic Picker:
var selectedCountry by remember { mutableStateOf(Country.UnitedStates) }
CountryCodePicker(
selectedCountry = selectedCountry,
onCountrySelected = { selectedCountry = it },
modifier = Modifier.fillMaxWidth()
)With TextField and Validation:
var phoneNumber by remember { mutableStateOf("") }
var selectedCountry by remember { mutableStateOf(Country.UnitedStates) }
CountryCodePickerTextField(
number = phoneNumber,
onValueChange = { country, number, isValid ->
selectedCountry = country
phoneNumber = number
},
selectedCountry = selectedCountry,
modifier = Modifier.fillMaxWidth(),
showError = true
)Dialog Picker:
var isDialogOpen by remember { mutableStateOf(false) }
if (isDialogOpen) {
CountryPickerDialog(
onDismissRequest = { isDialogOpen = false },
onItemClicked = { country ->
selectedCountry = country
isDialogOpen = false
},
selectedCountry = selectedCountry
)
}Bottom Sheet Picker:
var isSheetOpen by remember { mutableStateOf(false) }
if (isSheetOpen) {
CountryPickerBottomSheet(
onDismissRequest = { isSheetOpen = false },
onItemClicked = { country ->
selectedCountry = country
isSheetOpen = false
},
selectedCountry = selectedCountry
)
}API Reference
Composables:
| Composable | Description |
|---|---|
CountryCodePicker |
Flexible picker view (standalone, compact, or attached to TextField) |
CountryCodePickerTextField |
All-in-one TextField with integrated picker, validation, and formatting |
CountryPickerDialog |
Standalone picker dialog for manual integration |
CountryPickerBottomSheet |
Material 3 bottom sheet picker with drag handle and keyboard support |
Classes:
| Class | Description |
|---|---|
Country |
Data class representing a country (name, code, ISO, flag) |
ViewCustomization |
Customize picker button appearance (flag, name, code, arrow visibility) |
PickerCustomization |
Customize dialog/sheet appearance (padding, colors, strings) |
SearchBarTheme |
Theme class for search bar styling (icons, borders, background) |
Utilities:
| Utility | Description |
|---|---|
CCPUtils.getCountryAutomatically() |
Detect user's country from SIM or locale |
CCPValidator |
Validate phone numbers using libphonenumber |
CCPTransformer |
Visual transformation for automatic phone formatting |
Country.findCountry() |
Find country from phone number |
Changelog
v1.0.1
latest- SearchBarTheme
- itemSelectorColor
- Fixed searchBarColor not being applied correctly
- and 2 more
Full notes for v1.0.1
v1.0.1 on GitHub ↗What's Changed
✨ Added
- SearchBarTheme - New consolidated theme class for search bar styling with
searchIconTint,clearIconTint,searchBorderColor,searchBorderColorUnfocused, andsearchBackgroundColor - itemSelectorColor - New parameter in
PickerCustomizationto customize selected item highlight color
🐛 Fixed
- Fixed
searchBarColornot being applied correctly - Fixed
itemSelectedColornot working in BottomSheet
⚠️ Deprecated
- Individual search styling properties in
PickerCustomization(searchIconTint,clearIconTint,searchBorderColor,searchBorderColorUnfocused) - UsesearchBarThemeinstead
📦 Installation
kotlinimplementation("com.rejowan:ccpc:1.0.1")v1.0.0
- Maven Central
- Background Color Fix
- Search Customization
- and 2 more
Full notes for v1.0.0
v1.0.0 on GitHub ↗🎉 First Stable Release
Version 1.0.0 marks the first stable release with Maven Central publishing and semantic versioning.
📦 Installation
kotlinimplementation("com.rejowan:ccpc:1.0.0")What's New
- Maven Central - Now available on Maven Central for easier dependency management
- Background Color Fix - Fixed
backgroundColorparameter not being applied (#5) - Search Customization - New
searchIconTint,clearIconTint,searchBorderColoroptions (#5) - Lighter Dependencies - Removed
material-icons-extendedrequirement (#6) - Semantic Versioning - Following proper semantic versioning from this release
Migration from JitPack
kotlin// OLD implementation("com.github.ahmmedrejowan:CountryCodePickerCompose:0.2") // NEW implementation("com.rejowan:ccpc:1.0.0")0.2
- 🎨 Complete Material 3 Overhaul - Modern design with proper elevation, spacing, and typography
- 🐛 All Critical Bugs Fixed - Issues #1, #2, #3 resolved
- ⌨️ Fixed Keyboard Handling - Bottom sheet content no longer hidden by keyboard
- and 36 more
Full notes for 0.2
0.2 on GitHub ↗🎉 v0.2 - Material 3 Design & Stability
A major update bringing Material 3 design compliance, critical bug fixes, and enhanced user experience.
✨ Highlights
- 🎨 Complete Material 3 Overhaul - Modern design with proper elevation, spacing, and typography
- 🐛 All Critical Bugs Fixed - Issues #1, #2, #3 resolved
- ⌨️ Fixed Keyboard Handling - Bottom sheet content no longer hidden by keyboard
- 🌍 19 Language Support - Country names in multiple languages
- 📱 Enhanced Sample App - 7 sections with 15+ interactive examples
- 🛡️ Production Ready - 38 unit tests, ProGuard rules, CI/CD pipeline
🎨 Material 3 Design (19 improvements)
- ✅ Proper elevation (6dp dialogs, 1dp bottom sheets)
- ✅ 28dp rounded corners throughout
- ✅ Complete typography scale with line heights
- ✅ Selected country highlighting with check icons
- ✅ Material 3 OutlinedTextField for search
- ✅ Drag handles on bottom sheets
- ✅ Empty state UI when no results
- ✅ Search result count display
- ✅ Consistent 8dp grid spacing
- ✅ 56dp minimum touch targets
- ✅ Semantic color tokens (outline, outlineVariant)
- ✅ Auto-scroll to selected country
- ✅ Animated clear button
- ✅ Improved flag emoji consistency
🐛 Critical Fixes
- Issue #1, #3: Fixed
rememberModalBottomSheetState()API compatibility with Compose BOM 2024.12.01+ - Issue #2: Fixed VisualTransformation crashes (ArrayIndexOutOfBoundsException, IllegalStateException)
- Keyboard Handling: Bottom sheet content stays visible when keyboard appears
- Empty Text Crashes: Added bounds checking in CCPTransformer
🆙 Updated Dependencies
- Kotlin: 1.9.0 → 2.1.0
- Compose BOM: 2024.05.00 → 2024.12.01
- Compose Compiler: Migrated to Kotlin plugin
- Target SDK: 34 → 35
- Core KTX: 1.13.1 → 1.15.0
- Lifecycle: 2.7.0 → 2.8.7
- Activity Compose: 1.9.0 → 1.9.3
🆕 New Features
- Phone Number Search: Find country from phone number (e.g.,
+12125551234) - Enhanced Sample App: 7 example sections with dark/light mode toggle
- 19 Languages: Automatic country name translations
- Better Validation: Real-time feedback with clear error messages
🛡️ Development Experience
- ✅ ProGuard/R8 Rules: Automatic support for release builds
- ✅ 38 Unit Tests: 100% passing with CI/CD pipeline
- ✅ Comprehensive KDoc: Complete API documentation
- ✅ Input Validation: Clear error messages for invalid parameters
📦 Installation
kotlindependencies { implementation("com.github.ahmmedrejowan:CountryCodePickerCompose:0.2") }0.1
Initial Release of Country Code Picker Compose
Full notes for 0.1
0.1 on GitHub ↗Initial Release of Country Code Picker Compose
Roadmap
- Kotlin Multiplatform support (iOS, Desktop)
- More flag rendering options
- Additional phone number utilities