如何将hbb20国家代码选择器加入Material Design EditText布局？

First, confirm you've added the latest version of the library to your app-level build.gradle:

implementation 'com.hbb20:ccp:2.5.0' // Check for the newest version on Maven Central

Next, here's the complete XML layout. We'll integrate the CountryCodePicker with a Material-styled phone number input, ensuring alignment and visual consistency:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingHorizontal="16dp"
    android:paddingVertical="12dp"
    android:gravity="center_vertical">

    <!-- Country Code Picker with Material-aligned styling -->
    <com.hbb20.CountryCodePicker
        android:id="@+id/ccp_phone_input"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="12dp"
        app:ccp_showFlag="true"
        app:ccp_showPhoneCode="true"
        app:ccp_showNameCode="false"
        app:ccp_defaultCountryCode="IN" <!-- Replace with your default country's ISO code -->
        app:ccp_textColor="@color/onSurface" <!-- Match your theme's on-surface color -->
        app:ccp_textSize="16sp"
        app:ccp_spinnerTextColor="@color/onSurface"
        app:ccp_spinnerTextSize="14sp"
        app:ccp_spinnerItemCount="10" />

    <!-- Material Design TextInputLayout for phone number -->
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:boxStrokeColor="@color/primary" <!-- Match your app's primary color -->
        app:boxStrokeWidth="2dp"
        app:hint="Phone Number"
        app:hintEnabled="true"
        app:startIconDrawable="@drawable/ic_outline_phone_24" <!-- Optional: add a phone icon -->
        app:shapeAppearanceOverlay="@style/ShapeAppearance.MyApp.EditText.Rounded">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_phone_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="phone"
            android:maxLength="15"
            android:textSize="16sp"
            android:hint="Phone Number"
            android:textColor="@color/onSurface" />

    </com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

Key Details & Customization Tips: #

• CountryCodePicker Tweaks:

  • ccp_defaultCountryCode: Set the initial selected country using its 2-letter ISO code (e.g., "US" for United States, "GB" for UK)
  • ccp_showFlag/ccp_showPhoneCode: Toggle visibility of flag and numeric country code to fit your UI needs
  • Match ccp_textColor and ccp_textSize to your EditText's style for a unified look

• Material Design EditText:

  • Use TextInputLayout to get Material's outlined/filled input styles. Switch to app:boxBackgroundMode="filled" if you prefer a filled background over outlined
  • shapeAppearanceOverlay (optional): Define this style in your styles.xml to add rounded corners to the input field:

    <style name="ShapeAppearance.MyApp.EditText.Rounded" parent="ShapeAppearance.Material3.SmallComponent">
        <item name="cornerSize">8dp</item>
    </style>
    

• Functional Integration (in Kotlin/Java):
  To auto-format the phone number based on the selected country, link the CCP with the EditText in your Activity/Fragment:

  val countryCodePicker = findViewById<CountryCodePicker>(R.id.ccp_phone_input)
  val phoneEditText = findViewById<TextInputEditText>(R.id.et_phone_number)
  
  countryCodePicker.registerCarrierNumberEditText(phoneEditText)
  // This will automatically format the input to match the selected country's number pattern
  

内容的提问来源于stack exchange，提问作者Sanush