How to add country code picker into material design edit text layout?

Question

I'm using https://github.com/hbb20/CountryCodePickerProject library for country code picker. This is the way that UI designers did it. But unfortunately, Can anyone have the XML solution to this? You must use the hbb20 country code picker & material design text layout + material design edit text.

Answer 1

Create this class in your project.

class CustomTextInputLayout @JvmOverloads
    /**
     * Constructor
     * @param context Context
     * @param attrs Attribute Set for view
     * @param defStyleAttr Int style from attr
     */
    constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : TextInputLayout(context, attrs, defStyleAttr) {
    
        private var bounds: Rect? = null
        private var recalculateMethod: Method? = null
        private var collapsingTextHelper: Any? = null
    
        /**
         * Companion Object
         */
        companion object {
            const val COLLAPSING_HELPER = "collapsingTextHelper"
            const val COLLAPSED_BOUNDS = "collapsedBounds"
            const val RECALCULATE = "recalculate"
        }
    
        /**
         * Init constructors
         */
        init {
            init()
        }
    
        /**
         * On layout changes
         * @param changed Boolean
         * @param left Int
         * @param top Int
         * @param right Int
         * @param bottom Int
         */
        override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
            super.onLayout(changed, left, top, right, bottom)
            adjustBounds()
        }
    
        /**
         * Init function call the TextInputLayout class and the secondary internal class CollapsingTextHelper
         * @see TextInputLayout
         */
        private fun init() {
            try {
                //Search internal and private class over object called as variable
                val cthField = TextInputLayout::class.java.getDeclaredField(COLLAPSING_HELPER)
                cthField.isAccessible = true
                collapsingTextHelper = cthField.get(this)
    
                //Search in private class the other component to create a view
                val boundsField = collapsingTextHelper?.javaClass?.getDeclaredField(COLLAPSED_BOUNDS)
                boundsField?.isAccessible = true
                bounds = boundsField?.get(collapsingTextHelper) as Rect
                recalculateMethod = collapsingTextHelper?.javaClass?.getDeclaredMethod(RECALCULATE)
    
            } catch (e: NoSuchFieldException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            } catch (e: IllegalAccessException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            } catch (e: NoSuchMethodException) {
                collapsingTextHelper = null
                bounds = null
                recalculateMethod = null
                e.printStackTrace()
            }
        }
    
        /**
         * Adjust Bounds of the view for padding
         * and changes for the view
         */
        private fun adjustBounds() {
            if (collapsingTextHelper == null)
                return
            try {
                bounds?.left = editText?.left!! + editText?.paddingLeft!!
                recalculateMethod?.invoke(collapsingTextHelper)
            } catch (e: InvocationTargetException) {
                e.printStackTrace()
            } catch (e: IllegalAccessException) {
                e.printStackTrace()
            } catch (e: IllegalArgumentException) {
                e.printStackTrace()
            }
    
        }
    }

Now you can use this class in your design file as an XML component. Then put your country code picker XML component on top of this edit text using constraint or whatever parent layout that you are using.

<com.xxx.xxx.utils.CustomTextInputLayout
    android:id="@+id/userNameLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    android:layout_marginStart="@dimen/_20sdp"
    android:layout_marginEnd="@dimen/_20sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView2">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/inputText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/emailOrMobile"
        android:inputType="textEmailAddress"
        android:theme="@style/customUnderLinePrimary" />

</com.xxx.xxx.utils.CustomTextInputLayout>

Add this code into your activity or fragment. Please make sure the drawable that you are using is the transparent or the same colour in your background.

 inputText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.transparent, 0, 0, 0)
 inputText.compoundDrawablePadding = 80