Develop Reference

Android RelativeLayout design issue

I am facing android design issue , I can't understand why it happened it is weird.
My layout code :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<RelativeLayout
android:id="#+id/outgoing_layout_bubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:layout_marginRight="8dp"
android:background="#drawable/chatrectbg"
android:padding="10dp"
android:visibility="visible">
<TextView
android:id="#+id/message"
style="#style/chat_text_message_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/time"
android:autoLink="web"
android:paddingRight="10dp"
android:text="#{chat.messageText}"
android:textColor="#android:color/white"
android:textStyle="bold" />
<TextView
android:id="#id/time"
style="#style/chat_timings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="4dp"
android:padding="5dp"
android:paddingRight="10dp"
android:text="#{chat.messageTime}"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
preview of this code is as below :
I want background color change wrapping text, but it doesn't.
I can't understand what I am doing wrong?

You can try like 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="wrap_content"
android:padding="10dp"
android:layout_gravity="end"
android:gravity="end"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#555"
android:padding="10dp"
android:gravity="end|center_vertical"
android:layout_gravity="right"
android:orientation="vertical">
<TextView
android:id="#+id/message"
style="#style/chat_text_message_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="Message "
android:textColor="#android:color/white"
android:textStyle="bold" />
<TextView
android:id="#id/time"
style="#style/chat_timings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/message"
android:padding="5dp"
android:gravity="right"
android:text="Time"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>

Making my layout better looking

I am looking for design, look and feel suggestions based on what I currently have - which is ugly:
http://screencast.com/t/mjHawFeFnbRb
It is basically a listview as such:
*
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/news_name_placeholder"
android:layout_weight="3"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_marginTop="10dp"
android:layout_height="match_parent"
android:text="#string/news_date_placeholder"
android:gravity="right"
android:layout_weight="1"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
It is clearly hard on the eyes, so I'm hoping I can get some great ideas on how to make it more enjoyable for the user, and really to make it look sexy.
Each line can be different depending on the data, so either I need them as they are, or another way to indicate the incoming data in 3 different states (currently red, yellow, green).
what would I call this type of element http://41.media.tumblr.com/91b9c05d7af1016675da74a7a232f39d/tumblr_mloupiH0gn1snfpwco1_400.png in order to search how to do it ?
Hopefully that gets the design ideas flowing :)
thx

I have decided to make something from scratch which you can build on, the desired look which you want to achieve (in screenshot) is professional and will be hard to get source of / make.
Here is what I've got, intead of changing the text color and making peoples eyes bleed you could have a color on the side representing the status (I'm guessing that's what it is).
Screenshot 1:
Top bar is fixed to the top, events are displayed below with their corresponding priority / status.
Screenshot 2:
Top bar stays at the top and allows you to scroll down to see all the events.
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F7C26D"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.testdesignapp.MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#eda737"
android:gravity="top"
android:orientation="horizontal"
android:padding="5dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Top bar " />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Non scrolling " />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="If needed" />
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/green" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView1"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView4"
android:layout_below="#+id/textView4"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView2"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView6"
android:layout_below="#+id/textView6"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/red" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView3"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView8"
android:layout_below="#+id/textView8"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/green" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView4"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView10"
android:layout_below="#+id/textView10"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView5"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView12"
android:layout_below="#+id/textView12"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/red" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView7"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView14"
android:layout_below="#+id/textView14"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/green" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView8"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView16"
android:layout_below="#+id/textView16"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/yellow" />
<TextView
android:id="#+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView9"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView18"
android:layout_below="#+id/textView18"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/red" />
<TextView
android:id="#+id/textView20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#id/imageView10"
android:text="Spanish unemployment change 19:00"
android:textSize="13sp" />
<TextView
android:id="#+id/textView21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView20"
android:layout_below="#+id/textView20"
android:text="This could be extra detail about the event, such as the date 02-12-2014 19:00 GMT."
android:textColor="#595959"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
The 3 images I used (green, yellow, red) you can generate HERE
Hope I helped, good luck! ;)
Markus

Take two more LinearLayout instead directly put left and right TextView as direct child and set weight which can show like left as label and right as value pair data :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.30">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/news_name_placeholder"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.70"
android:layout_marginLeft="5dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/news_date_placeholder"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>

Change your item LinearLayout orientaltion to vertical, since a single line is not enough to put your information. And change the text size of your two TextViews, I think textView1 must be larger than textView2.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/news_name_placeholder"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:text="#string/news_date_placeholder"
android:gravity="left"
style="?android:attr/listSeparatorTextViewStyle"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

Prevent a view from getting outside of the screen

I'm working with the Google Maps API v2, and I overrided getInfoContents() from InfoWindowAdapter for having a customized InfoWindow. Inside getInfoContents()I inflate an xml containing an ImageView, and three TextViews.
My problem comes when the text that is set inside the snippet is larger than the view, then the count TV it's set outside the view. This is illustrated above with some screenshots.
Here my xml layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/categoryIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/count"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/categoryIcon"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textStyle="bold" />
<TextView
android:id="#+id/snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snippet" />
</LinearLayout>
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#111177"
android:text="0"
android:textSize="20sp"
android:padding="10dp"
android:textColor="#FFF"
android:layout_toRightOf="#+id/text"
android:singleLine="true" />
</RelativeLayout>
How can I change this layout for getting the count TextView inside of the screen, and the snippet in multiline?
I want to always show the count TextView.
UPDATE:
Finally with the answer of Simon Marquis I realized a way to accomplish this. Here the new code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/categoryIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/text"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/categoryIcon">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textStyle="bold" />
<TextView
android:id="#+id/snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snippeta" />
</LinearLayout>
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#111177"
android:text="0"
android:textSize="20sp"
android:padding="10dp"
android:textColor="#FFF"
android:singleLine="true" />
</LinearLayout>
</RelativeLayout>

You should add this to the LinearLayout:
android:layout_width="0dp"
android:layout_weight="1"
The new layout file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/categoryIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/count"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:id="#+id/text"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/categoryIcon"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textStyle="bold" />
<TextView
android:id="#+id/snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snippet" />
</LinearLayout>
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#111177"
android:text="0"
android:textSize="20sp"
android:padding="10dp"
android:textColor="#FFF"
android:layout_toRightOf="#+id/text"
android:singleLine="true" />
</RelativeLayout>

One solution if you want that the count TextView always appears at right is the following:
Put the count Text View before the LinearLayout and add
android:layout_alignParentRight="true"
And add android:layout_toLeftOf="#id/count" in the Linear Layout
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#00F"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/count"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

How to align image at extreme left of listitem?

I have an ImageView (android:id="#+id/unreadmail) which i want to show on extreme left of ListItem as shown in image. But it is not aligning properly. Any idea if i am missing anything ?
<LinearLayout
android:id="#+id/Text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/unreademail"
android:layout_width="2dip"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/emailsubject"
android:layout_centerVertical="true"
android:background="#8A6175"
android:visibility="invisible" />
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="20dip"
android:textColor="#313132"
android:textSize="12sp" />

Use this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="ObsoleteLayoutParam,ContentDescription,UselessLeaf,UselessParent" >
<LinearLayout
android:id="#+id/Text"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/unreademail"
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ic_launcher"
android:visibility="visible" />
<LinearLayout
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginLeft="20dp"
android:orientation="vertical" >
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:gravity="right"
android:layout_gravity="right"
android:orientation="horizontal" >
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="35dp"
android:text="Date"
android:textColor="#000"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

I think you should be using a relative layout at the top level (possibly not included in your code).
You cannot use 'to the left of' when the elements are at different levels in the heirarchy.
Thus I would start with your little icon left aligned to the parent and put the edit box (in the same relative view) 'to the right of' the icon.

This is the code sample for you there is no need to write the weight property if add the screenshot or the supported image how exactly you want then i can give you proper answer
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/unreademail"
android:layout_marginLeft="10dip"
android:orientation="vertical">
<TextView
android:id="#+id/emailsubject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="abcd"
android:textColor="#444444"
android:textSize="18sp" />
<TextView
android:id="#+id/emailcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/emailsubject"
android:layout_below="#id/emailsubject"
android:ellipsize="marquee"
android:gravity="center"
android:singleLine="true"
android:text="defg"
android:textColor="#444444"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/unreademail"
android:layout_width="2dip"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#8A6175"
android:visibility="invisible" />
<TextView
android:id="#+id/rcvdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="20dip"
android:textColor="#313132"
android:textSize="12sp" />
</RelativeLayout>

Distorted layout getting generated from XML in Android

I'm using this layout in one of my applications. I don't know why it is getting distorted. The main issue is that in all the three LinearLayout blocks, only the first TextView is displayed on the screen and in place of the TextViews following that, a big blank space is displayed.
The snapshot of the image being displayed is Snapshot...
Layout.xml
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp" >
<LinearLayout
android:id="#+id/ll_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:padding="10sp" >
<ImageView
android:id="#+id/certification_image"
android:layout_width="100sp"
android:layout_height="wrap_content"
android:contentDescription="#string/details_image"
android:visibility="gone" />
<ImageView
android:id="#+id/image_details_page"
android:layout_width="100sp"
android:layout_height="100sp"
android:contentDescription="#string/details_image" />
</LinearLayout>
<TextView
android:id="#+id/details_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/ll_images"
android:padding="10sp"
android:textColor="#040404"
android:textSize="25sp"
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:id="#+id/details_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/details_name"
android:layout_toLeftOf="#id/ll_images"
android:paddingLeft="5sp"
android:textColor="#343434"
android:textSize="15sp"
android:typeface="sans" />
<LinearLayout
android:id="#+id/ll_facts"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll_images">
<TextView
android:id="#+id/tv_facts"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient_bg"
android:padding="10sp"
android:text="Facts"
android:textColor="#android:color/darker_gray"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/details_tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5sp"
android:textSize="15sp"
android:text="#string/test" />
<TextView
android:id="#+id/details_tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5sp"
android:text="#string/test"
android:textSize="15sp" />
<TextView
android:id="#+id/details_tv4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5sp"
android:text="#string/test"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_foundation"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll_facts">
<TextView
android:id="#+id/tv_foundation"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient_bg"
android:padding="10sp"
android:text="Foundation Statement"
android:textColor="#android:color/darker_gray"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/details_tv5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5sp"
android:textColor="#343434"
android:text="#string/test"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll_foundation">
<TextView
android:id="#+id/tv_overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient_bg"
android:padding="10sp"
android:text="Overview"
android:textColor="#android:color/darker_gray"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/details_tv6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/test"
android:paddingLeft="5sp"
android:textColor="#343434"
android:textSize="15sp" />
</LinearLayout>
<Button
android:id="#+id/btnViewScorecard"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/ll_overview"
android:layout_margin="5sp"
android:background="#drawable/search_button"
android:paddingLeft="10sp"
android:text="#string/ViewScorecard"
android:textColor="#FFFFFF"
android:typeface="sans"
android:visibility="gone"/>
</RelativeLayout>
Any help would be really appreciated. Thanks in advance!!!

You forget about
xmlns:android="http://schemas.android.com/apk/res/android"
Just change
<RelativeLayout
to
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

Finally I have figured it out... All I had to do was I had to add the following line to my LinearLayout.
android:orientation="vertical"
Thanks all for the help...