rupesh
rupesh

Reputation: 2891

Layout creation in Android

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.

Upvotes: 2

Views: 63

Answers (3)

silwar
silwar

Reputation: 6518

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

Upvotes: 1

Damien R.
Damien R.

Reputation: 3373

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>

Upvotes: 3

MysticMagicϡ
MysticMagicϡ

Reputation: 28823

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.

Upvotes: 0

Related Questions