Faced with the problem of customizing the bottom band EditText. It is necessary that a separate lane be allocated for each character entered (see fig.) EditText Example

Implemented by placing EditText and ImageView in RelativeLayout and separating the entered characters with spaces.

<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="40dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:gravity="center"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:gravity="center" android:orientation="horizontal"> <EditText android:id="@+id/et_code" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@null" android:singleLine="true" android:textColor="@color/black" android:textSize="16dp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal"> <ImageView android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="1px" android:alpha="0.3" android:background="@color/black" /> <ImageView android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="1px" android:alpha="0.3" android:background="@color/black" /> <ImageView android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="1px" android:alpha="0.3" android:background="@color/black" /> <ImageView android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="1px" android:alpha="0.3" android:background="@color/black" /> </LinearLayout> </RelativeLayout> </RelativeLayout>

The decision is more than bad, maybe someone faced with such an evil?

  • 2
    I did with the help of several EditText - Vladyslav Matviienko
  • metalurgus, and how then to enter the text without switching between them? - Alexey Shtanko
  • When entering a character, transfer focus to the next field. Removal is more difficult, but everything is possible - Vladyslav Matviienko
  • 2
    The most adequate is to make separate EditText, but if you really want to, then no one bothers to override EditText and implement what you described above in it - BORSHEVIK

1 answer 1

How about using ready-made solutions?

It seems that here is just what you need, in the style of Material Design.

Another option here . In the screenshots, by default, a little bit is not the way you want, but judging by the description on the githaba, there are great opportunities for customization.

In this case, in both cases there are no problems with switching the focus when entering.

  • Good decisions, thanks! - Alexey Shtanko