Как добавить текстовое представление влево и отредактировать текст вправо внутри фона с помощью кнопки удаления рядом с фоном Android

Question

Ниже приведено изображение, которое мне потребовалось.

Вы можете видеть, что есть синий фон и внутри него, у него есть трейлер № 1, которыйtextview и 01010 - editext (поле ввода). Также вне фона есть кнопка удаления рядом с синим фоном.

То, что я пробовал, это

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="@color/app_white">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

                    <RelativeLayout
                        android:id="@+id/relative_1"
                        android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/blue_light"
                android:layout_marginRight="60dp"
                android:layout_marginLeft="60dp">
                <TextViewÒ
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Trailer number"
                    android:padding="@dimen/margin_5"
                    android:layout_margin="5dp"
                    android:layout_alignParentLeft="true"/>
                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:inputType="number"
                    android:text="01010"
                    android:layout_alignParentRight="true"/>

            </RelativeLayout>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="0dp"
                android:layout_toRightOf="@+id/relative_1"
                android:background="@drawable/ic_delete_cion" />

        </RelativeLayout>
  </LinearLayout>
</LinearLayout>

Но значок удаления вообще не отображается, а также строка отображается в 01010 eddittext.

Это мой скриншот.

Answer 1

Я внес некоторые изменения в ваш макет, и он соответствует вашим требованиям и подходит для каждого устройства.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">


    <LinearLayout
        android:id="@+id/relative_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/default_blue_light">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center|start"
            android:padding="10dp"
            android:text="Trailer number" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:background="@null"
            android:inputType="number"
            android:padding="5dp"
            android:text="01010"
            android:textSize="14sp" />



    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/ic_delete_icon" />

</LinearLayout>

Answer 2

Вы можете достичь этого, только поместив android:weightSum в линейный макет.попробуйте ниже код

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/app_white"
    android:orientation="horizontal"
    android:padding="10dp"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight=".9"
        android:background="@color/blue_light"
        android:orientation="horizontal"
        android:weightSum="1">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".7"
            android:text="Trailer number" />

        <EditText
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".2"
            android:background="@null"
            android:inputType="number"
            android:text="01010"
            android:textSize="14sp" />

    </LinearLayout>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="20dp"
        android:layout_weight=".1"
        android:layout_gravity="center"
        android:background="@drawable/ic_delete_cion" />
</LinearLayout>

Answer 3

Попробуйте этот xml код: (Пожалуйста, замените dimensions, padding, styles на ваш собственный)

Код :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="#FFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/relative_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            android:layout_weight="6"
            android:background="#f5f5f5">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_margin="5dp"
                android:gravity="center_vertical"
                android:padding="5dp"
                android:text="Trailer number" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginEnd="0dp"
                android:layout_marginRight="0dp"
                android:inputType="number"
                android:text="01010" />

        </RelativeLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginEnd="8dp"
            android:src="@drawable/ic_delete_black_24dp" />

    </LinearLayout>
</LinearLayout>

Надеюсь, это поможет.Счастливое кодирование