Country Code Picker Compose logo

Country Code Picker Compose library

A Modern Country Code Picker for Jetpack Compose

github.com/ahmmedrejowan/CountryCodePickerCompose

stars24forks9releasev1.0.1licenseApache-2.0requiresAPI 24

Install

  1. Add the dependency to your module's build.gradle.kts (or build.gradle):

    kotlin
    dependencies {
        implementation("com.rejowan:ccpc:1.0.1")
    }
    groovy
    dependencies {
        implementation 'com.rejowan:ccpc:1.0.1'
    }

com.rejowan:ccpc:1.0.1on Maven Centralrequires API 24Maven Central page ↗

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.

YouTube playlist, open on youtube.com

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:

kotlin
var selectedCountry by remember { mutableStateOf(Country.UnitedStates) }

CountryCodePicker(
    selectedCountry = selectedCountry,
    onCountrySelected = { selectedCountry = it },
    modifier = Modifier.fillMaxWidth()
)

With TextField and Validation:

kotlin
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:

kotlin
var isDialogOpen by remember { mutableStateOf(false) }

if (isDialogOpen) {
    CountryPickerDialog(
        onDismissRequest = { isDialogOpen = false },
        onItemClicked = { country ->
            selectedCountry = country
            isDialogOpen = false
        },
        selectedCountry = selectedCountry
    )
}

Bottom Sheet Picker:

kotlin
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

  1. v1.0.1

    latest
    • SearchBarTheme
    • itemSelectorColor
    • Fixed searchBarColor not being applied correctly
    • and 2 more
    Full notes for v1.0.1

    What's Changed

    ✨ Added
    • SearchBarTheme - New consolidated theme class for search bar styling with searchIconTint, clearIconTint, searchBorderColor, searchBorderColorUnfocused, and searchBackgroundColor
    • itemSelectorColor - New parameter in PickerCustomization to customize selected item highlight color
    🐛 Fixed
    • Fixed searchBarColor not being applied correctly
    • Fixed itemSelectedColor not working in BottomSheet
    ⚠️ Deprecated
    • Individual search styling properties in PickerCustomization (searchIconTint, clearIconTint, searchBorderColor, searchBorderColorUnfocused) - Use searchBarTheme instead
    📦 Installation
    kotlin
    implementation("com.rejowan:ccpc:1.0.1")
    v1.0.1 on GitHub ↗
  2. v1.0.0

    • Maven Central
    • Background Color Fix
    • Search Customization
    • and 2 more
    Full notes for v1.0.0

    🎉 First Stable Release

    Version 1.0.0 marks the first stable release with Maven Central publishing and semantic versioning.

    📦 Installation
    kotlin
    implementation("com.rejowan:ccpc:1.0.0")
    What's New
    • Maven Central - Now available on Maven Central for easier dependency management
    • Background Color Fix - Fixed backgroundColor parameter not being applied (#5)
    • Search Customization - New searchIconTint, clearIconTint, searchBorderColor options (#5)
    • Lighter Dependencies - Removed material-icons-extended requirement (#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")
    v1.0.0 on GitHub ↗
  3. 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

    🎉 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
    kotlin
    dependencies {
        implementation("com.github.ahmmedrejowan:CountryCodePickerCompose:0.2")
    }
    0.2 on GitHub ↗
  4. 0.1

    Initial Release of Country Code Picker Compose

    Full notes for 0.1

    Initial Release of Country Code Picker Compose

    0.1 on GitHub ↗
see the releases on GitHub ↗

Roadmap

  • Kotlin Multiplatform support (iOS, Desktop)
  • More flag rendering options
  • Additional phone number utilities

More libraries

all libraries →
main*Kotlinapps:12 work:3 libraries:5 products:1
© 2026 K M Rejowan AhmmedprivacyAvailable for work