Country Code Picker Compose

In various apps, we need to use a country code picker. There are several libraries available for this purpose. In XML we have a CCP created by hbb20, which is great. In Jetpack Compose there are few libraries but they lack some features and updates. So, I created this library to use in Jetpack Compose.

CountryCodePickerCompose is a modern, Material 3 compliant country code picker library built specifically for Jetpack Compose. It provides a beautiful, highly customizable solution for selecting country codes with phone number validation and formatting capabilities.

The library is designed to be production-ready with comprehensive testing (38 unit tests), proper ProGuard rules, and full Material You design system compliance. It supports 19 languages for country names with automatic detection based on device locale.

• Minimal & Lightweight: Optimized for performance with efficient code
• Emoji Flags: No image assets needed, uses native emoji flags for better performance
• 4 Usage Modes: As a View (Full Screen, Compact, or Attached to TextField), As a TextField (Integrated), As a Dialog, As a BottomSheet
• Automatic Detection: Detects user's country based on device settings (SIM card or locale)
• Phone Validation: Built-in phone number validation using Google's libphonenumber library
• Visual Transformation: Automatic phone number formatting as you type with country-specific patterns
• Advanced Search: Search by country name, code, or full phone number (e.g., "+12125551234")
• Material 3 Design: Complete Material You design system compliance with proper elevation, spacing, typography, and visual feedback
• 19 Languages: Country names available in multiple languages with automatic locale detection
• Dark Mode: Full dark mode support with proper contrast and theming
• Highly Customizable: Extensive customization options for all components (ViewCustomization and PickerCustomization)
• Production Ready: ProGuard rules included, 38 unit tests (100% passing), comprehensive KDoc documentation, CI/CD pipeline
• No Breaking Changes: Version 0.2 maintains backward compatibility with 0.1.x

Step 1: Add JitPack Repository

Add this to your settings.gradle.kts file:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
            url = uri("https://jitpack.io")
        }
    }
}

Step 2: Add Dependency

Add this to your module's build.gradle.kts file:

dependencies {
    implementation("com.github.ahmmedrejowan:CountryCodePickerCompose:0.2")
}

Step 3: Update Kotlin and Compose (Recommended)

// In your gradle/libs.versions.toml or build.gradle.kts
kotlin = "2.1.0"
composeBom = "2024.12.01"

// In your build.gradle.kts (Project level)
plugins {
    id("org.jetbrains.kotlin.plugin.compose") version "2.1.0" apply false
}

// In your build.gradle.kts (Module level)
plugins {
    id("org.jetbrains.kotlin.plugin.compose")
}

Basic CountryCodePicker

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

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

Compact Mode

CountryCodePicker(
    selectedCountry = selectedCountry,
    onCountrySelected = { selectedCountry = it },
    viewCustomization = ViewCustomization(
        showFlag = true,
        showCountryIso = false,
        showCountryName = false,
        showCountryCode = true,
        showArrow = true
    ),
    showSheet = true
)

CountryCodePickerTextField (All-in-One)

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(),
    label = { Text("Phone Number") },
    showError = true,
    showSheet = true
)

CountryPickerDialog

var isDialogOpen by remember { mutableStateOf(false) }

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

Automatic Country Detection

LaunchedEffect(Unit) {
    CCPUtils.getCountryAutomatically(LocalContext.current)?.let {
        selectedCountry = it
    }
}

Phone Number Validation

val validator = remember { CCPValidator(LocalContext.current) }
var isValid by remember { mutableStateOf(false) }

OutlinedTextField(
    value = phoneNumber,
    onValueChange = { newNumber ->
        phoneNumber = newNumber
        isValid = validator(number = newNumber, countryCode = selectedCountry.countryCode)
    },
    isError = phoneNumber.isNotEmpty() && !isValid
)

Visual Transformation

OutlinedTextField(
    value = phoneNumber,
    onValueChange = { phoneNumber = it },
    visualTransformation = CCPTransformer(
        context = LocalContext.current,
        countryIso = selectedCountry.countryIso
    ),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone)
)

Customization Options

// ViewCustomization
ViewCustomization(
    showFlag = true,
    showCountryIso = false,
    showCountryName = false,
    showCountryCode = true,
    showArrow = true
)

// PickerCustomization
PickerCustomization(
    showCountryCode = true,
    showFlag = true,
    showSearchClearIcon = true
)

Version 0.2 (Latest)

Major Improvements:

• 🎨 Material 3 Design - Complete overhaul with proper elevation, spacing, typography
• 🐛 All Bugs Fixed - Issues #1, #2, #3 resolved including keyboard handling
• 🆙 Latest Dependencies - Kotlin 2.1.0, Compose BOM 2024.12.01, Target SDK 35
• 🌍 19 Languages - Country names in multiple languages with automatic detection
• 📱 Enhanced Sample App - 7 sections with 15+ interactive examples
• 🛡️ Production Ready - ProGuard rules, 38 unit tests, comprehensive KDoc, CI/CD

Migration from 0.1.x:

• No breaking changes
• Update dependencies to Kotlin 2.1.0 and Compose BOM 2024.12.01
• ProGuard rules now automatically applied

Version 0.1

Initial Release:

• Basic country code picker functionality
• Dialog and view modes
• Phone number validation
• Custom styling options
• Emoji flags support

• Add more language translations (target: 30+ languages)
• Improve accessibility features (TalkBack, large text support)
• Add more customization options for animations
• Performance optimizations for large lists
• Support for region-specific phone number formats
• Integration with popular form validation libraries
• Custom country filtering options
• Favorites/recent countries feature