This is a screenshot from an Android app from the play store. I am trying to replicate the design of this screen. I used TextInputLayout
from Material Design to create the input boxes. But I am unable to replicate the colour section in the above screenshot. I have figured out that they are using Recycler view
inside TextInputLayout
. I tried it, but it only shows the colours list without the box.
Here is the code that I have used-
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_marginLeft="16dp"
tools:layout_marginRight="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/nameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/counter_hint"
app:hintTextColor="@color/label_color"
app:helperTextEnabled="true"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:helperText="@string/helper_text_counter"
style="@style/TextInputStyle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/valueLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/value_hint"
app:hintTextColor="@color/label_color"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/valueResetLayout"
app:layout_constraintTop_toBottomOf="@id/nameLayout"
style="@style/TextInputStyle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/etValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/valueResetLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/value_hint"
app:hintTextColor="@color/label_color"
android:layout_marginStart="8dp"
app:layout_constraintTop_toBottomOf="@id/nameLayout"
app:layout_constraintStart_toEndOf="@id/valueLayout"
app:layout_constraintEnd_toEndOf="parent"
style="@style/TextInputStyle">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/etValueReset"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/colorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/counter_color_hint"
app:hintTextColor="@color/label_color"
android:layout_marginTop="16dp"
app:expandedHintEnabled="false"
app:layout_constraintTop_toBottomOf="@id/valueLayout"
style="@style/TextInputStyle"
>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/colorRv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:orientation="horizontal"/>
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>