CODEWITHSUNDEEP
androidandroid-layout
startupsmith
startupsmith

Reputation: 5764

Android layout controls side by side?

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.

enter image description here

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>

Upvotes: 0

Views: 5190

Answers (5)

Paresh Mayani
Paresh Mayani

Reputation: 128428

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:

enter image description here

Upvotes: 11

Dragon Wang
Dragon Wang

Reputation: 31

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <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
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imgExercise"
            android:layout_width="50px"
            android:layout_height="50px"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@+id/imgExercise" >

            <Spinner
                android:id="@+id/spCategory"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:entries="@string/app_name" />

            <EditText
                android:id="@+id/etName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="Name" />
        </LinearLayout>
    </RelativeLayout>

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

</LinearLayout>

Upvotes: 1

MikeIsrael
MikeIsrael

Reputation: 2889

@lanks if you are not going to overlap anything then linearlayout is the way to go. I would recommend soemthing like this (this is sudo code, make sure to use the correct syntax in your xml) 

<LinearLayout
  android:orientation="vertical"
>
<LinearLayout
android:orientation="horizontal"
>
<BUtton 1/>
<Button 2/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
>
<ImageView />

<LinearLayout
android:orientation="vertical"
>
<spinner />
<TextField />
...

Upvotes: 0

Hiren Dabhi
Hiren Dabhi

Reputation: 3713

put spinner and edittext into one linear layout and its orientation is verticle. this layout set property android:layout_alignParentRight="true"

Upvotes: 0

Adil Soomro
Adil Soomro

Reputation: 37729

Try using

android:layout_toRightOf="@+id/imgExercise"

in both of the Spinner and EditText tag

and also use

android:layout_alignParentBottom="true"

inside EditText tag insted of

android:layout_alignParentTop="true"

Upvotes: 1

Related Questions