Create dynamic input fields inside flexbox | Android (Kotlin)
Learn how to create multiple edittext, for input, inside a flexbox with custom width and height
Have you got into a situation where you have to create number of fields as per the requirement and need to align them accordingly in the view?
Here’s the solution with code snippets to create it. I had a situation to create input fields inside a layout. Searched the internet for solutions and ways to understand how to create something this dynamic with EditText, took 2 days for research and couldn’t find anything.
I had only heard about display:flex; of CSS, so this was new for me. 😋 Learnt about flexbox, then thought of using EditText inside FlexBox and it was done. Here’s how it looks.
Creating the layout
Create a ConstraintLayout parent, and put the background in an ImageView or in a View with a background. On that we need a FlexboxLayout with flexWrap as wrap .
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/image_view_input_box"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/input_box"
app:layout_constraintTop_toBottomOf="<ID as per need>"
app:layout_constraintBottom_toBottomOf="<ID as per need>"
app:layout_constraintStart_toStartOf="<ID as per need>" app:layout_constraintEnd_toStartOf="<ID as per need>" />
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout_input"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="@dimen/dimen_8"
app:layout_constraintTop_toTopOf="@id/image_view_input_box" app:layout_constraintBottom_toBottomOf="@id/image_view_input_box"
app:layout_constraintStart_toStartOf="@id/image_view_input_box"
app:layout_constraintEnd_toEndOf="@id/image_view_input_box"
app:flexWrap="wrap">The FlexboxLayout will contain the EditText which will be created at runtime according to the length of input needed. Let’s move to the exciting part. 🥷
Creating the input field
Now, we will go through the logic of creating input fields.
1️⃣ First we need to know the length of the text to create that many input fields.
2️⃣ Take the reference of flexbox that was created in XML and make its flexDirection to ROW. (FlexDirection is the direction of children items that are placed inside the flex container)
3️⃣ Now we need to restrict the input to only 1 character.
4️⃣ Now, inside a loop we will generate the EditTexts and put them at place. Do whatever you need to do with the edittext before adding it to the flexbox.
NOTE : 📝
👉🏻 Text Watcher is in place to handle the movement of cursor and so is the map and arrays, you will notice their use in later in the steps.
👉🏻 mTextMap takes the EditText’s randomly generated IDs as key and stores the TextMapModel as value.
👉🏻 TextMapModel is nothing but an object having the text (string) and view (EditText) reference.
👉🏻 mTextIdArray is having the EditText’s randomly generated IDs as the item at corresponding indices.
There’s was another way to have the IDs stored or retrieved, I didn’t implement it, you can use whichever way benefits you, this is just for implementation idea/demo. 🤓
Let’s look into the text watcher
See what logic you can gather from the following snippet of text watcher. Below this we will discuss what is done. ✌️
So, there are two listeners in the function, addTextChangedListener (to check the change in texts) and setOnKeyListener (to listen to a specific keys that are used, will be used for DELETE event here).
The code snippet is self-explanatory, but let’s discuss to recheck all. 😜
We don’t need to do anything in beforeTextChanged as there’ll always be a change, for our case, and we need to handle the onTextChanged and afterTextChanged.
When the text is changed, we will modify the mTextMap of that editText of which the text is changed along with the new text (string) and move the focus to the next EditText if there is any. Same happens for the afterTextChanged, as the change will be a blank, because of the DELETE event, the focus will be on the previous editText if there is any. 👻
Do some modifications for any other similar use case and it will be handy. I hope this gave some insights into the dynamicity of EditTexts inside flexbox. If you don’t want flexbox you can create a custom layout to handle as a container. And need to customize as per need.
Happy exploring!
More contents below: