ImageButon внутри ввода текста редактировать текст без потери плавающих меток

Question

У меня есть текст для редактирования с плавающими метками, как первый на изображении

            <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>

и я хочу, чтобы кнопка ImageButton находилась справа от текста редактирования, как и вторая, но я теряю подсказку и плавающую метку ...

   <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>

Я хочу, чтобы и imageButton, и плавающая метка. Спасибо за любую помощь !!

Answer 1

Используйте FrameLayout и храните эти представления отдельно от дочернего элемента макета. Нравится

<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>

Это будет работать. Здесь заполнение с помощью EditText android:paddingRight="40dp" будет обрабатывать случай, когда при наборе текста не будет идти под кнопкой закрытия. Вы можете увеличить или уменьшить это значение в соответствии с требованиями вашего пользовательского интерфейса.

---

При правильном выравнивании и атрибутах вида в соответствии с вашим вопросом, ответ будет

<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>