Develop Reference

RelativeLayout layout issue in Item Layout of ListView

I am working with a ListView item layout, but I can't arrange the child positions in a Relativelayout.
Here is my Item Layout frame:
I want The First ImageView on the top, one TextView in center, and the second ImageView on the bottom.
Here is my layout code(The Green RelativeLayout)
<RelativeLayout
android:id="#+id/bub_right"
android:layout_width="30dip"
android:layout_height="wrap_content"
android:layout_alignTop="#id/bub_left"
android:layout_alignBottom="#id/bub_left"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="#666666"
android:gravity="right">
<ImageView
android:layout_width="30dip"
android:layout_height="20dip"
android:id="#+id/bub_up"
android:layout_alignParentTop="true"
android:src="#drawable/up"/>
<TextView
android:layout_width="30dip"
android:layout_height="20dip"
android:text="123"
android:layout_centerVertical="true"
android:id="#+id/bub_score"
android:textSize="15dp"/>
<ImageView
android:id="#+id/bub_down"
android:layout_width="30dip"
android:layout_alignParentBottom="true"
android:layout_height="20dip"
android:src="#drawable/down"/>
</RelativeLayout>
I set these two lines to make sure The Green Relativelayout has the same height as the Red one.
android:layout_alignTop="#id/bub_left"
android:layout_alignBottom="#id/bub_left"
And the result is like this:
Please help, Thanks in advance.

Please replace your activity with this code. And check the result.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bub_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:weightSum="3" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left Side layout" />
</LinearLayout>
<LinearLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:weightSum="1" >
<ImageView
android:id="#+id/bub_up"
android:layout_width="30dip"
android:layout_height="wrap_content"
android:gravity="center"
android:src="#drawable/ic_launcher"
android:textSize="15dp" />
<TextView
android:id="#+id/bub_score"
android:layout_width="30dip"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="123" />
<ImageView
android:id="#+id/bub_down"
android:layout_width="30dip"
android:layout_height="wrap_content"
android:gravity="center"
android:src="#drawable/ic_launcher" />
</LinearLayout>

You can try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/layout"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="hii" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/layout"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="hii" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="hii" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="hii" />
</RelativeLayout>
</RelativeLayout>

Why does the imageview disappear on the layout?

The imageview is on the right of the layout. It doesn't display if the content of messagedetail_row_text is too long. The imageview does display if the content of messagedetail_row_text is not too long.
<?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="wrap_content"
android:layout_marginTop="15dp"
android:gravity="right"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/dfdwasdfds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/outgoing"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="22dip"
android:orientation="horizontal" >
<TextView
android:id="#+id/messagedetail_row_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="1dp"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/messagedetail_row_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:paddingTop="1dp"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/messagedetail_row_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="2dp"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#id/dfdwasdfds"
>
<ImageView
android:id="#+id/messagegedetail_rov_icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="right"
android:src="#drawable/retouxiang" />
</LinearLayout>
</RelativeLayout>

It is not clear what you are looking for exactly. This is from what I understand:
<?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="wrap_content"
android:layout_marginTop="15dp"
android:gravity="right"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/xyz"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/messagegedetail_rov_icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="right"
android:src="#drawable/retouxiang" />
</LinearLayout>
<LinearLayout
android:id="#+id/dfdwasdfds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/xyz"
android:background="#drawable/outgoing"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="22dip"
android:orientation="horizontal" >
<TextView
android:id="#+id/messagedetail_row_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="1dp"
android:textColor="#000000"
android:text="messagedetail_row_name"
android:textSize="18sp" />
<TextView
android:id="#+id/messagedetail_row_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:paddingTop="1dp"
android:text="messagedetail_row_date"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/messagedetail_row_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="2dp"
android:text="messagedetail_row_text and this is a long text"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>

Try to change
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#id/dfdwasdfds"
>
to
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#id/dfdwasdfds"
>

I think it is happening because you have given your textView width fill_parent and it takes up as much space is its length is, then its parent width is wrap_content, so it goes upto its child occupies space(i.e TextView), so you dont have space to display the ImageView.
You can try using LinearLayout as root layout instead of relativeLayout..and manage your views by giving them weights..

How to give 20 screen width to an ImageView

How do I create an UI header like this image?
I'm using the code below but how do I adjust 30% of the screen to the image and 70% to a TextView. I also use two TextViews on that 70% of width. This is my code, it does not look as in the image
<?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:background="#000000"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#=#EFECE5"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="San Diego Uified"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="School District"
/>
</LinearLayout>
</LinearLayout>

add android:layout_weight="3" property to image and android:layout_weight="7" to text

checkout weight for textviews and imageviews and weightSum for LinearLayout
What is android:weightSum in android, and how does it work?

Try to use "android:layout_weight"
Assigning a value 'android:layout_weight' will split up the available space in the parent View, according to the value of each View‘s layout_weight and its ratio to the overall layout_weight specified in the current layout for this and other View elements.
In your case
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#=#EFECE5"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="30"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="San Diego Uified"
android:layout_weight="35"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="School District"
android:layout_weight="35"
/>
</LinearLayout>

here you go..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#000000" android:orientation="vertical" >
<!-- Header Layout -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="1.0" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="0.30" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="1.0" >
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="San Diego Uified"
android:layout_weight="0.50"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="School District"
android:layout_weight="0.50"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- Body layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal"
android:layout_weight="0.70"
android:weightSum="1.0" >
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="School aasdadadad adasd"
android:layout_weight="0.50"
/>
</LinearLayout>

LinearLayout: TextViews at left, big ImageView at right

i'm working on a LinearLayout but unfortunately it's not working as it should.
The goal is to have a LinearLayout with two TextViews (one placed below the other) on the left side, and an ImageView on the right side.
The ImageView should be as big as possible, the TextViews should take the remaining space.
At the moment my layout XML is like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_label2"
android:textSize="14dp" />
</LinearLayout>
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
The part that isn't working: If the text in the TextViews is "too long", the ImageView gets shrinked. I want it exactly the other way round.
Any solutions?

It would be more efficient to use RelativeLayout instead of LinearLayout. Then you can place your views without having to nest layouts:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/image"
android:layout_below="#+id/title"
/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
By arranging the TextViews to be relative to the ImageView instead of the other way around, the ImageView takes priority for the space, and the text works with the remainder.

this might be help to you
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_labj hairu iue rel2"
android:textSize="14dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>

A little modification to Kirans Code..worked for me
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="Name: BalaVishnu"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:src="#drawable/edit_icon" />
</LinearLayout>

android - xml. Having difficulty lining up the elements in the way I'd like

I'd like to center these phrases in my view. I can get "#+id/m_popcorn" to the center of the screen but, I cannot get"#+id/m_keyhole" and the other text views to line up beneath it. I would also like all five phrases to be centered in the screen, rather than having only "#+id/m_popcorn" centered. What am I doing wrong?
<?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:scaleType="center" >
<ImageView
android:id="#+id/viola_desmond_pic"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/desc"
android:src="#drawable/viola_desmond" />
<TextView
android:id="#+id/list_background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#AA000000"
android:contentDescription="#string/desc" >
</TextView>
<TextView
android:id="#+id/m_popcorn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="spilled popcorn" />
<TextView
android:id="#+id/m_keyhole"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/m_popcorn"
android:layout_centerHorizontal="true"
android:text="keyhole" />
<TextView
android:id="#+id/m_pistol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/m_keyhole"
android:layout_centerHorizontal="true"
android:text="pistol" />
<TextView
android:id="#+id/m_cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/m_pistol"
android:layout_centerHorizontal="true"
android:text="cat" />
<TextView
android:id="#+id/m_pen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/m_cat"
android:layout_centerHorizontal="true"
android:text="pen" />
</RelativeLayout>

Here is the layout file...
<?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" >
<ImageView
android:id="#+id/viola_desmond_pic"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:contentDescription="testing"
android:src="#drawable/icon" />
<LinearLayout
android:id="#+id/ll_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/list_background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AA000000"
android:contentDescription="text description"
android:gravity="center_horizontal" >
</TextView>
<TextView
android:id="#+id/m_popcorn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="spilled popcorn" />
<TextView
android:id="#+id/m_keyhole"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="keyhole" />
<TextView
android:id="#+id/m_pistol"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="pistol" />
<TextView
android:id="#+id/m_cat"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="cat" />
<TextView
android:id="#+id/m_pen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="pen" />
</LinearLayout>
</RelativeLayout>

you can use this code to have a list of textView in center of your layout, i am using a linear layout that fill the parent layout and set it's gravity to center, any child of this layout is in the center of it :
<?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:gravity="center"
android:scaleType="center">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:gravity="center"
android:id="#+id/linearLayout1">
<TextView
android:contentDescription="desk"
android:text="TextView"
android:id="#+id/list_background"
android:layout_height="wrap_content"
android:background="#AA000000"
android:layout_width="wrap_content"></TextView>
<TextView
android:id="#+id/m_popcorn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="spilled popcorn"></TextView>
<TextView
android:id="#+id/m_keyhole"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="keyhole"></TextView>
<TextView
android:id="#+id/m_pistol"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="pistol"></TextView>
<TextView
android:id="#+id/m_cat"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="cat"></TextView>
<TextView
android:id="#+id/m_pen"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="pen"></TextView>
</LinearLayout>
<ImageView
android:contentDescription="desk"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/viola_desmond_pic"
android:src="#drawable/icon"
android:layout_alignParentRight="true"></ImageView>
</RelativeLayout>