Custom Country Picker View

Designers are creative souls and may come up with innovative designs. Android Country Picker provides flexibility to design your own UI and then power it through Android Country Picker to make it your Custom Country Picker View.

Prepare your custom and innovative UI

1. Add a container viewGroup (ConstraintLayout/RelativeLayout/LinearLayout etc) which will be your Custom Country Picker View
2. Add a TextView to show country Info
3. Add optional view for flag (add if you plan to show a flag)
   • ImageView for Flag (for custom flag provider)
   • TextView for Emoji Flag (for default emoji flag provider) Apply required styles to match your design For example, here is a custom layout:

• Preview
• 

   <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/customCountryPickerViewContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:foreground="?attr/selectableItemBackground"
        android:padding="8dp">

        <TextView
            android:id="@+id/tvSelectedCountryEmojiFlag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="40sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="🇦🇩" />

        <TextView
            android:id="@+id/tvSelectedCountry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tvSelectedCountryEmojiFlag"
            tools:text="Andorra" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Power your UI through CountryPickerViewHelper extension function (check source)

     private fun setupCustomCountryPicker() {
        // get lifecycle owner and context
        val lifecycleOwner: LifecycleOwner = this
        val context: Context = this

        // bind views
        val customCPContainer = findViewById<ConstraintLayout>(R.id.customCountryPickerViewContainer)
        val customCPSelectedCountryTextView = findViewById<TextView>(R.id.tvSelectedCountry)
        val customCPEmojiTextView = findViewById<TextView>(R.id.tvSelectedCountryEmojiFlag)
        
        // prepare view helper using extension function
        // please check 
        // https://github.com/hbb20/AndroidCountryPicker/blob/develop/countrypicker/src/main/java/com/hbb20/countrypicker/view/CPViewExtension.kt 
        // to find all available params of extension function
        val cpViewHelper = context.prepareCustomCountryPickerView(
            containerViewGroup = customCPContainer,
            tvSelectedCountryInfo = customCPSelectedCountryTextView,
            tvSelectedCountryEmojiFlag = customCPEmojiTextView
        )

        //observe live data
        cpViewHelper.selectedCountry.observe(
            lifecycleOwner,
            Observer { selectedCountry: CPCountry? ->
                // observe live data
                // your code to handle selected country
            }
         )
    }

If you want to listen to selected country through callback and not livedata then instead of cpViewHelper.selectedCountry.observe(...), pass onCountryChangedListener to extension function like this

        context.prepareCustomCountryPickerView(
            containerViewGroup = customCPContainer,
            tvSelectedCountryInfo = customCPSelectedCountryTextView,
            tvSelectedCountryEmojiFlag = customCPEmojiTextView
        ) { selectedCountry: CPCountry? ->
            // listen to change through callback
            // your code to handle selected country
        }

Configure Dialog / Country list

Although you can do all dialog and country list configurations through extension function in previous step. If you need to do change configuration afterwards, do following:

       // Modify CPViewConfig if you need. Access cpViewConfig through `cpViewHelper`
        cpViewHelper.cpViewConfig.viewTextGenerator = { cpCountry: CPCountry ->
            "${cpCountry.name} (${cpCountry.alpha2})"
        }
        // make sure to refresh view once view configuration is changed
        cpViewHelper.refreshView()

        // Modify CPDialogConfig if you need. Access cpDialogConfig through `countryPicker.cpViewHelper`
        // cpViewHelper.cpDialogConfig.

        // Modify CPListConfig if you need. Access cpListConfig through `countryPicker.cpViewHelper`
        // cpViewHelper.cpListConfig.

        // Modify CPRowConfig if you need. Access cpRowConfig through `countryPicker.cpViewHelper`
        // cpViewHelper.cpRowConfig.

DONE 😄

Your custom country picker is ready to go. Run the app and see magic.