1

enter image description here

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>
Rajesh kumar
  • 982
  • 1
  • 9
  • 17

0 Answers0