Android/XML Aligning imageViews above EditTexts

Question

I'm just trying to align an imageView above an edittext. The edit texts are aligned to be at the bottom of the activity. I put the two pairs inside A relative layout and just tried aligning the image to be above, but that doesn't work. https://i.sstatic.net/YW8Rx.png

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:id="@+id/linearLayout">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".5">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2"
            android:layout_above="@+id/edit1"
            android:layout_gravity="center"
            android:background="@drawable/arrow_down"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_alignRight="@android:id/list"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/edit1"
            android:hint="Your name"
            />
    </RelativeLayout>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight=".5">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_above="@+id/edit2"
        android:layout_centerHorizontal="true"
        android:background="@drawable/arrow_down"/>

<EditText
    android:layout_width="match_parent"
    android:layout_alignRight="@android:id/list"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/edit2"
    android:hint="Your number"
    android:inputType="number"
    />
</RelativeLayout>


</LinearLayout>




</RelativeLayout>

Answer 1

If you want to point the arrow towards the EditText then the following layout may solve your problem. To demonstrate your idea, I have just created a rough layout with some hardcoded values. But while developing your project, you should follow the standard guidelines provided by Google.

    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="1">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="0.5">

            <ImageView
                android:id="@+id/imageView1"
                android:src="@drawable/ic_down"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_centerHorizontal="true"/>

            <EditText
                android:id="@+id/name"
                android:layout_marginLeft="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/imageView1"
                android:layout_centerHorizontal="true"
                android:hint="Your Name"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="0.5">

            <ImageView
                android:id="@+id/imageView2"
                android:src="@drawable/ic_down"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_centerHorizontal="true"/>

            <EditText
                android:id="@+id/number"
                android:layout_marginLeft="8dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/imageView2"
                android:layout_centerHorizontal="true"
                android:hint="Your Number"/>

        </RelativeLayout>

    </LinearLayout>

  </RelativeLayout>

Answer 2

the solution of your problem is FrameLayout. In your code in the place of RelativeLayout use FrameLayout. First place the ImageView inside the FrameLayout, then place the EditText over there. That will solve your problem. Please let me know if I'm able to help you.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:weightSum="1"
    android:id="@+id/linearLayout">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".5">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2"
            android:background="@drawable/arrow_down"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/edit1"
            android:hint="Your name"
            />
    </FrameLayout>


<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight=".5">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:background="@drawable/arrow_down"/>

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/edit2"
    android:hint="Your number"
    android:inputType="number"
    />
</FrameLayout>