Question

I am trying to create a layout but I am not too sure how to describe exactly what I want to do. So I have created the below image to describe what I am trying.

I am lost at how to get the spinner and edittext next to the imageview like I have in the image.

Here is my XML so far.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button android:id="@+id/btnCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="Cancel"
            />
        <Button android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Add"
            />
    </RelativeLayout>
    <RelativeLayout>
        <ImageView
            android:id="@+id/imgExercise"
            android:layout_width="50px"
            android:layout_height="50px"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            />
        <Spinner 
            android:id="@+id/spCategory"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            />
        <EditText 
            android:id="@+id/etName"
            android:hint="Name"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            />
    </RelativeLayout>
    <EditText 
        android:id="@+id/etDescription"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:lines="5"
        android:gravity="top"
        android:hint="Description"
        />
</RelativeLayout>

Answer 1

Tips -1:

First of all, you don’t need to take sub RelativeLayout because you can prepare the same layout in one parent RelativeLayout only. I am coming back with exact answer.

Tips – 2:

“px” is not preferable to define measurements, instead you can use dip or dp (density independent pixel) (for height/width of view) and sp(scaled pixel) for Font-size.

Solution:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"
 android:padding="5dp">

        <Button android:id="@+id/btnCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="Cancel"
            />
        <Button android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Add"
            />

        <ImageView
            android:id="@+id/imgExercise"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/btnCancel"
            android:src="@drawable/icon"
            android:scaleType="fitXY"
            />

        <Spinner 
            android:id="@+id/spCategory"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/imgExercise"
            android:layout_below="@+id/btnCancel"
            android:layout_alignTop="@+id/imgExercise"
            />

        <EditText 
            android:id="@+id/etName"
            android:hint="Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/imgExercise"
            android:layout_below="@+id/spCategory"
            android:layout_alignBottom="@+id/imgExercise"
            />


    <EditText 
        android:id="@+id/etDescription"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:lines="5"
        android:gravity="top"
        android:hint="Description"
        android:layout_below="@+id/imgExercise"
        />
</RelativeLayout>

Output: