Layout creation in Android

Question

Here i am pasting my Layout file : may be question has been asked so many times but please help me out friends

<ImageView
    android:id="@+id/productImageId"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/products_category" />

<RelativeLayout
    android:id="@+id/linearView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id="@+id/productType"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/productName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/productRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

Now what i want is image should be in left and text in right . Image1 name Image1 type Iamge1 rating

Image 1 is a single image as you can see the above but my text is displaying below the image in single line e.g

Image1 name type rating

Can anyone tell me what i am missing or where i should correct my layout file. Thanks for considering.

IIIIIII name IIIIIII type IIIIIII rating(I is single image) IIIIIII — rupesh, Dec 27 '13 at 09:25
correct me if i am wrong, so do you want Image1 on left and all textviews on right of the image? my second question is do you want all textviews in vertical direction or horizontal direction? — silwar, Dec 27 '13 at 09:29
Like users profile image in left side and right side name age and so on http://stackoverflow.com/users/2067853/rup35h — rupesh, Dec 27 '13 at 09:29

Damien R. · Accepted Answer · 2013-12-27T09:32:09.850

Your parent is probably a vertical oriented LinearLayout, try to add this LinearLayout in your code like this:

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
   <ImageView
       android:id="@+id/productImageId"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:contentDescription="@string/products_category" />

   <LinearLayout android:id="@+id/linearView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

       <TextView
           android:id="@+id/productType"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textAppearance="?android:attr/textAppearanceLarge" />

       <TextView
           android:id="@+id/productName"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textAppearance="?android:attr/textAppearanceLarge" />

       <TextView
           android:id="@+id/productRating"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textAppearance="?android:attr/textAppearanceLarge" />
   </LinearLayout>
</LinearLayout>

now text are coming right to the image but overlapping to each other — rupesh, Dec 27 '13 at 09:28
One thing @Damien R. is there any quick thing by which i can put border in my images?? — rupesh, Dec 27 '13 at 09:42
i didn't meant that. :) Ok Mystic how can i show rating star in place of number e.g; ***(3 Star) *****(5 Star) — rupesh, Dec 27 '13 at 10:01

silwar · Answer 2 · 2013-12-27T09:44:33.870

Another easy way to do it is

<LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="horizontal">
<ImageView
   android:id="@+id/productImageId"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:contentDescription="@string/products_category" />

<LinearLayout
   android:id="@+id/linearView1"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <TextView
       android:id="@+id/productType"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
       android:id="@+id/productName"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
       android:id="@+id/productRating"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceLarge" />
  </LinearLayout>
</LinearLayout>

This can be done with using Single RelativeLayout as parent container instead of using two levels of layouts

Please check following layout

<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
   android:id="@+id/productImageId"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:contentDescription="@string/products_category" />


   <TextView
       android:id="@+id/productType"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@+id/productImageId"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
       android:id="@+id/productName"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@+id/productImageId"
       android:layout_below="@+id/productType"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
       android:id="@+id/productRating"
       android:layout_below="@+id/productName"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@+id/productImageId"
       android:textAppearance="?android:attr/textAppearanceLarge" />

 </RelativeLayout>

Major benefit of using this layout is performance improvement as we are reducing one level of Layout Hierarchy which will use less processing power of the device

MysticMagicϡ · Answer 3 · 2013-12-27T09:27:28.980

Try this:

<?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="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/productImageId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="xx"
        android:src="@drawable/ic_launcher" />

    <RelativeLayout
        android:id="@+id/linearView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/productType"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="xx"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/productName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/productType"
            android:text="xx"
            android:textAppearance="?android:attr/textAppearanceLarge" 
            android:layout_below="@id/productType"/>

        <TextView
            android:id="@+id/productRating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/productName"
            android:text="xx"
            android:textAppearance="?android:attr/textAppearanceLarge" 
            android:layout_below="@id/productName"/>
    </RelativeLayout>

</LinearLayout>

So Image will take left portion in horizontal linear layout, while 3 textviews will come in relative layout one below other.

See the result I am getting:

enter image description here

Hope it helps.

now text are coming right to the image but overlapping to each other — rupesh, Dec 27 '13 at 09:24
@rup35h In copy - paste, I had missed layout_below. I don't know how. Try edited answer :) — MysticMagicϡ, Dec 27 '13 at 09:27
i didn't meant that. :) Ok Mystic how can i show rating star in place of number e.g; ***(3 Star) *****(5 Star) — rupesh, Dec 27 '13 at 09:45

Layout creation in Android

3 Answers3