Custom EditText Design with boxes number

Question

does someone know how to make an EditText with the design below (or similar)?

I appreciate any help you can provide.

Answer 1

After some research, I decided to do it myself.

1 - Created one XML with 12 EditText

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/number1"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:layout_marginEnd="@dimen/_1sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="1">
        <requestFocus/>
    </EditText>

    <EditText
        android:id="@+id/number2"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="2" />

    <EditText
        android:id="@+id/number3"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="3" />

    <EditText
        android:id="@+id/number4"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="4" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:layout_marginEnd="@dimen/_2sdp"
        android:layout_weight="1"
        android:gravity="center"
        android:importantForAutofill="no"
        android:text="-"
        tools:ignore="HardcodedText,LabelFor" />

    <EditText
        android:id="@+id/number5"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="5" />

    <EditText
        android:id="@+id/number6"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="6" />

    <EditText
        android:id="@+id/number7"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="7" />

    <EditText
        android:id="@+id/number8"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="8" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:layout_marginEnd="@dimen/_2sdp"
        android:layout_weight="1"
        android:gravity="center"
        android:importantForAutofill="no"
        android:text="-"
        tools:ignore="HardcodedText,LabelFor" />

    <EditText
        android:id="@+id/number9"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"

        tools:text="9" />

    <EditText
        android:id="@+id/number10"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="0" />

    <EditText
        android:id="@+id/number11"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="0" />

    <EditText
        android:id="@+id/number12"
        style="@style/DefaultAddQPCode"
        android:layout_width="0dp"
        android:layout_height="@dimen/_28sdp"
        android:layout_marginEnd="0dp"
        android:background="@drawable/border_add_qp_code_digit"
        android:importantForAutofill="no"
        tools:ignore="LabelFor,Suspicious0dp"
        tools:text="1" />

</LinearLayout>

2 - Created a standard style for all the fields

<style name="DefaultEditTextStyle">
    <item name="android:inputType">number</item>
    <item name="android:layout_weight">1</item>
    <item name="android:padding">-5dp</item>
    <item name="android:gravity">center</item>
    <item name="maxLines">1</item>
    <item name="android:maxLength">1</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_marginEnd">@dimen/_2sdp</item>
    <item name="textColor">@color/white</item>
    <item name="android:textColor">@color/white</item>
</style>

3 - Created two different drawable to make the border (the difference between both is only the colour)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/border_add_qp_code_digit_selected" android:state_focused="true"/>
    <item android:drawable="@drawable/border_add_qp_code_digit_unselected" android:state_focused="false"/>
</selector>

(Drawable Shape Selected)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />

    <corners
        android:radius="4dp" />
    <stroke
        android:width="1dp"
        android:color="#ffffff" />
</shape>

(Drawable Shape Unselected)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />

    <corners
        android:radius="4dp" />
    <stroke
        android:width="1dp"
        android:color="#757575" />
</shape>