Create Android Layout

Question

I'm pretty new to Android development and would love some help creating a simple layout on android. This layout will be used in a listview.

This is the look I'm going for: good layout This is what I get (don't laugh): bad layout

The bottom row of text is overlapping the top, the number should be on the right (just left of the image) and the images in different rows should align.

(And yes, I know the colors are ugly.)

Here's my xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/thelayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="6dip"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <RelativeLayout
        android:id="@+id/widget375"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="5">
            <TextView
                android:id="@+id/txt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14pt"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/txt1" />
            <TextView
                android:id="@+id/txt3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/txt1"
                android:layout_alignParentLeft="true" />
            <TextView
                android:id="@+id/txt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14pt"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true" />
    </RelativeLayout>
    <ImageView
        android:id="@+id/theicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>

Thanks!

Can you add some of your code? We need to see which layout that you are using and what's the problem with your code. — Ima Vafaei, Mar 05 '14 at 05:38

Anu · Answer 1 · 2014-03-06T03:30:19.200

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

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

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="abc"
                    android:textSize="14pt" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"                    
                    android:textSize="14pt"
                    android:text="abc" />
            </LinearLayout>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:gravity="center" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

If the answer is correct then the user must accept your answer — No_Rulz, Mar 05 '14 at 06:32
sorry, i went to sleep :) i'm trying all these answers this morning, i'll choose an answer after i check them. — vkapadia, Mar 05 '14 at 16:47
worked ok, but then i just added `android:textSize="14pt"` to the textView1 and textView2, and now i dont see textView2 or textView3 at all! what happened? shouldnt the original tile stretch to fit all three textViews? — vkapadia, Mar 05 '14 at 16:54
I have edited the code with the changes you mentioned. Now try it.. Hope it will solve the issue — Anu, Mar 06 '14 at 03:21

Hamid Shatu · Accepted Answer · 2014-03-05T05:58:20.237

For text1, use android:layout_alignParentRight instead of android:layout_alignParentLeft.

For text3, add android:layout_below="@+id/txt1".

Try as below....

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/thelayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="6dip" >

    <RelativeLayout
        android:id="@+id/widget375"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="5" >

        <TextView
            android:id="@+id/txt3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/txt1" />

        <TextView
            android:id="@+id/txt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:textSize="14pt" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:textSize="14pt" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/theicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

score 1 · Answer 3 · answered Mar 05 '14 at 05:53

Try this code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/thelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dip" >

<LinearLayout
    android:id="@+id/widget375"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="vertical" >

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

        <TextView
            android:id="@+id/txt1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="qwerty"
            android:textSize="14pt" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right|center_vertical"
            android:text="123"
            android:textSize="14pt" />
    </LinearLayout>

    <TextView
        android:id="@+id/txt3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="abc" />
</LinearLayout>

<ImageView
    android:id="@+id/theicon"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" />

works great! i chose another answer since it did it more efficiently (6 objects instead of 7). thanks for the help! — vkapadia, Mar 05 '14 at 17:09

score 0 · Answer 4 · answered Mar 05 '14 at 05:53

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/thelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip" >

<RelativeLayout
    android:id="@+id/widget375"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/txt1"
        android:layout_toLeftOf="@+id/theicon"
       android:textSize="14pt" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt1"
        android:layout_alignLeft="@+id/txt1"
        android:layout_alignRight="@+id/txt2"
         />

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
       android:textSize="14pt" />

    <ImageView
        android:id="@+id/theicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
         />
</RelativeLayout>

</LinearLayout>

this layout is still putting the number just to the right of the name — vkapadia, Mar 05 '14 at 17:03

score 0 · Answer 5 · answered Mar 05 '14 at 05:56

Try this..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/thelayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="6dip" >

    <LinearLayout
        android:id="@+id/widget375"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <TextView
                android:id="@+id/txt1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:textSize="14pt" 
                android:singleLine="true"/>

            <TextView
                android:id="@+id/txt2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:singleLine="true"
                android:textSize="14pt" />
        </LinearLayout>

        <TextView
            android:id="@+id/txt3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/theicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</LinearLayout>

the number is still a little too far left. it should be just to the left of the image — vkapadia, Mar 05 '14 at 17:06

score 0 · Answer 6 · answered Mar 05 '14 at 06:01

You can try below code for view which you want.

<?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="60dp"
>
 <TextView android:id="@+id/item1"
        android:text="textview1"
        android:layout_marginTop="10dp"
        android:layout_height="wrap_content"
        android:layout_width="70dp"
        android:width="20dip"
    />
    <TextView android:id="@+id/item2"
        android:text="textview2"
        android:layout_marginTop="5dp"
        android:layout_below="@+id/item1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:width="100dip"
    />
   <TextView android:id="@+id/item3"
        android:text="textview3"
          android:layout_marginTop="10dp"
        android:layout_marginLeft="90dp"
        android:layout_toRightOf="@+id/item1"
        android:layout_height="wrap_content"
        android:layout_width="70dp"
        android:width="20dip"
    />

   <ImageView android:id="@+id/Imageview"
        android:background="@drawable/ic_launcher"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_height="40dp"
        android:layout_width="40dp"
        android:width="20dip"/>
</RelativeLayout>

It will help you.

Thanks

Create Android Layout

6 Answers6