Develop Reference

How to use a RecyclerView inside TextInputLayout of MaterialDesign?

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>

How to align text in TextInputLayout in android?

In a RelativeLayout I have a TextInputLayout where I have EditText inside it to type phone number and a Textview inside a LinearLayout where I am showing the country code.
When we start typing `TextInputLayout slide to top, but I want it to slide to as in image 3.
I am facing issue in this can somebody help me?
This is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/error_mobile_no"
android:layout_alignTop="#+id/error_mobile_no"
android:layout_alignBottom="#+id/error_mobile_no"
android:layout_marginTop="0dp"
android:layout_marginBottom="0dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/country_code_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/lorin_regular"
android:text="+971"
android:layout_marginBottom="2dp"
android:textColor="#color/black"
android:textSize="14sp" />
</LinearLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/error_mobile_no"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
app:errorEnabled="true">
<EditText
android:id="#+id/etPhoneNumberDetailedActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:autofillHints=""
android:paddingStart="35dp"
android:backgroundTint="#6283a3"
android:fontFamily="#font/lorin_regular"
android:hint="#string/mobile_number"
android:inputType="phone"
android:textColor="#color/black"
android:textColorHint="#6283a3" android:textSize="14sp" />
</com.google.android.material.textfield.TextInputLayout>
</RelativeLayout>
This is an image of the field before entering text.
This is the image after entering text.
But I am trying to get it to look like this.

You can use the app:prefixText to display the prefix:
<com.google.android.material.textfield.TextInputLayout
android:hint="mobile_number"
app:prefixText="+971"
...>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:autofillHints=""
android:inputType="phone"
.../>
</com.google.android.material.textfield.TextInputLayout>

How to lift up a button with softkeyboard and able to scroll the rest of the content behind

I have a Button which is aligned at the bottom of my screen. This Button lifts up when the SoftKeyboard is opened. The page is blank in the middle. But it has some content at the top and some right above the bottom aligned Button. The problem is when the SoftKeyboard is opened, the blank area in the middle is filled with the content in the bottom. What I want instead is, the bottom content to stay where it was and be able to scroll behind to see it.

Use the below property for your activity in android manifest. So that screen component can be accessible even after after soft keyboard opened.
<activity
android:windowSoftInputMode="adjustResize" ... >
...
</activity>
Reference Link: https://developer.android.com/training/keyboard-input/visibility#Respond

For someone facing the same problem, I solved it this way
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<!--data binding declaration-->
</data>
<RelativeLayout
android:id="#+id/register_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary_amber_200"
tools:context=".login.view.EnterEmailActivity">
<LinearLayout
android:id="#+id/register_ll"
android:layout_width="match_parent"
android:layout_height="92dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:gravity="center">
<View
android:id="#+id/register_bar"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/primary_amber_100"
android:layout_marginBottom="12dp"
android:visibility="invisible"/>
<Button
android:id="#+id/register_loginBtn"
style="#style/Button_Default_Dark_Grey"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_small"
android:fitsSystemWindows="true"
android:text="#string/next"
android:layout_marginLeft="#dimen/margin_medium"
android:layout_marginRight="#dimen/margin_medium"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
style="#style/ToolBar_Basic_Light"
android:background="#color/primary_amber_200"
android:elevation="0dp"
android:paddingLeft="#dimen/margin_medium"
android:paddingRight="#dimen/margin_medium">
<TextView
android:id="#+id/toolbar_title"
style="#style/Text_Basic_Toolbar" />
</androidx.appcompat.widget.Toolbar>
<ScrollView
android:id="#+id/register_sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
android:layout_below="#id/toolbar"
android:paddingLeft="#dimen/margin_medium"
android:paddingRight="#dimen/margin_medium"
android:layout_marginBottom="#dimen/margin_xlarge92">
<RelativeLayout
android:id="#+id/register_rl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/register_txtHeader"
style="#style/Text_Title_H1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_large"
android:text="#string/enter_email" />
<EditText
android:id="#+id/register_email"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_below="#id/register_txtHeader"
android:layout_marginTop="#dimen/margin_xlarge"
android:background="#color/primary_amber_100"
android:gravity="center_vertical"
android:hint="#string/email"
android:inputType="textEmailAddress"
android:paddingLeft="#dimen/margin_medium"
android:paddingRight="#dimen/margin_small" />
<View
android:id="#+id/register_blank"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="#id/register_email"
/>
<RelativeLayout
android:id="#+id/register_bottom_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_small"
android:layout_below="#id/register_blank"
android:layout_marginTop="#dimen/margin_xxxlarge"
android:gravity="bottom"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/register_agreetxt"
style="#style/Text_Body_2"
android:textColor="#color/secondary_grey_800"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:text="#string/agree" />
<TextView
android:id="#+id/register_terms"
style="#style/Text_Button_Normal"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="#id/register_agreetxt"
android:text="#string/terms"
android:gravity="center"/>
<TextView
android:id="#+id/register_policy"
style="#style/Text_Button_Normal"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="#id/register_agreetxt"
android:layout_marginLeft="#dimen/margin_xlarge"
android:layout_toRightOf="#id/register_terms"
android:text="#string/policy"
android:gravity="center_vertical"/>
<TextView
android:id="#+id/register_have_accnt"
style="#style/Text_Body_2"
android:textColor="#color/secondary_grey_800"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="#id/register_terms"
android:text="#string/already_have_an_account"
android:gravity="center"/>
<TextView
android:id="#+id/register_login"
style="#style/Text_Button_Normal"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_below="#id/register_terms"
android:layout_marginLeft="#dimen/margin_xlarge"
android:layout_toRightOf="#id/register_have_accnt"
android:text="#string/login"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
</layout>
Dont forget to add android:windowSoftInputMode="stateVisible|adjustResize" to your activity in your manifest file.

ImageButon inside text input edit text without losing floating labels

I have some edit text with floating labels like the first one in the image
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdMode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_mode">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdMode"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:text="#string/signup_nif"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
and I want to have an ImageButton on the right side of the edit text like the second one but I am losing the hint and the floating label...
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_number">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
<ImageButton
android:id="#+id/imgClearUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</RelativeLayout>
</android.support.design.widget.TextInputLayout>
I want to have both, imageButton and floating label. Thanks for any help!!

Use FrameLayout and keep these views separately to the child of the layout. Like
<FrameLayout
android:layout_marginTop="#dimen/dp20"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="signup_id_number">
<EditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="40dp"
android:inputType="text"
android:textColor="#FF00FF"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#android:drawable/ic_menu_close_clear_cancel" />
</FrameLayout>
This will work. Here padding with EditText android:paddingRight="40dp" will handle the case where, while typing text will not go under close button. You can increase or decrease this value as per your UI requirement.
With proper alignment and view's attributes as per your question, answer would be
<FrameLayout
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/signup_id_number">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:paddingRight="40dp"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</FrameLayout>

Alert Dialog hidden behind soft-keyboard android

This is my custom alert dialog code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/inset_background_dialog"
android:padding="#dimen/dialog_elements_margin">
<TextView
android:id="#+id/text_add_address_title_addnewaddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/add_new_address_title_addnewaddress"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<ImageView
android:id="#+id/image_close_dialogue_addnewaddress"
android:layout_width="#dimen/dialog_close_button"
android:layout_height="#dimen/dialog_close_button"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
android:src="#drawable/ic_unchecked_black"/>
<EditText
android:id="#+id/edit_address_title_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/text_add_address_title_addnewaddress"
android:hint="#string/address_title_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_mobile_number_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_address_title_addnewaddress"
android:hint="#string/mobile_number_hint_addnewaddress"
android:inputType="number"/>
<EditText
android:id="#+id/edit_apartment_no_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_mobile_number_addnewaddress"
android:hint="#string/house_no_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_landmark_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_apartment_no_addnewaddress"
android:hint="#string/landmark_hint_addnewaddress"/>
<EditText
android:id="#+id/edit_location_addnewaddress"
style="#style/roundedEditText"
android:layout_below="#+id/edit_landmark_addnewaddress"
android:hint="#string/address_hint_addnewaddress"/>
<Button
android:id="#+id/save_address_addnewaddress"
android:layout_width="match_parent"
android:layout_height="#dimen/dialog_elements_height"
android:layout_below="#+id/edit_location_addnewaddress"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/dialog_elements_margin"
android:background="#drawable/add_button_back_about_product"
android:text="#string/save_address_button_addnewaddress"
android:textAllCaps="false"
android:textColor="#color/tabSelectedTextColor"/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
The problem is, edit-text fields at the bottom are hidden behind the soft keyboard. I tried updating the android manifest to android:windowSoftInputMode="adjustResize" within the particular activity yet no luck. Any solution for this?

<ScrollView>
<LinearLayout android:orientation="vertical"
android:scrollbars="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<EditView />
<Button />
</LinearLayout>
set your UI inside the LinearLayout and try.