I have a RelativeLayout like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/single_row"
android:padding="12dip">
<ImageView
android:id="#+id/page_image"
android:layout_marginRight="6dip"
android:layout_width="66dip"
android:layout_height="66dip"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
style="#style/pulse_content"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/page_desc"
android:layout_below="#id/page_name"
style="#style/pulse_content"
android:layout_alignLeft="#id/page_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Principal Consultant" />
<Button
android:id="#+id/follow_button"
android:layout_below="#id/author_image"
android:layout_marginTop="15dip"
android:layout_alignParentBottom="true"
android:text="Follow"
style="#style/follow_button" />
</RelativeLayout>
The issue I'm running into is that I want the follow_button to be below both the page_desc as well as the page_image. Sometimes the page_desc content will have a height bigger than the size of the image, sometimes not. The issue is that if I set the follow_button below either the image or the description, then the other one will get clipped. Is there an efficient / effective way to ensure that the image or page_desc are always visible and above the button?
Here you go:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/single_row"
android:padding="12dip">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/page_image"
android:layout_marginRight="6dip"
android:layout_width="66dip"
android:layout_height="66dip"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
style="#style/pulse_content"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/page_desc"
android:layout_below="#id/page_name"
style="#style/pulse_content"
android:layout_alignLeft="#id/page_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Principal Consultant" />
</RelativeLayout>
<Button
android:id="#+id/follow_button"
android:layout_marginTop="15dip"
android:text="Follow"
style="#style/follow_button" />
</LinearLayout>
The answer here requires very little change. You had most of your layout correct, however, there is one option messing everything up. AlignParentXXXX will often take a "false" priority over your LayoutXXXX options. So, by setting your Button to AlignParentBottom, you are telling the RelativeLayout that the Button's size is not calculated in the parent layout size.
You may resolve the issue by simply removing AlignParent="true" from your Button. The result code is below and tested. This solution keeps in line with your desires, I believe.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/single_row"
android:padding="12dip">
<ImageView
android:id="#+id/page_image"
android:layout_marginRight="6dip"
android:layout_width="66dip"
android:layout_height="66dip"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
style="#style/pulse_content"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/page_desc"
android:layout_below="#id/page_name"
style="#style/pulse_content"
android:layout_alignLeft="#id/page_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Principal Consultant" />
<Button
android:id="#+id/follow_button"
android:layout_below="#id/author_image"
android:layout_marginTop="15dip"
android:text="Follow"
style="#style/follow_button" />
</RelativeLayout>
I ran into many similar issues with AlignParent when WrapContent was on the Parent. Top and Bottoms positioning creates undesired behavior if not prepared for it. I find, in general, it is best to use only one or the other (if at all) and line up the rest above or below that.
Since everything is interdependent in the RelativeLayout it is irrelevant what order you place it in, but it does matter if you are trying to access one view before its created. For example, using the android:layout_below attribute is not exactly what you wanted for the Button. If you set the other views android:layout_above the button it would make the views always above it.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/single_row"
android:padding="12dip">
<Button
android:id="#+id/follow_button"
android:layout_marginTop="15dip"
android:layout_alignParentBottom="true"
android:text="Follow"
style="#style/follow_button" />
<ImageView
android:id="#+id/page_image"
android:layout_above="#id/follow_button"
android:layout_marginRight="6dip"
android:layout_width="66dip"
android:layout_height="66dip"
android:layout_alignParentLeft="true"
android:src="#drawable/no_photo" />
<TextView
android:id="#+id/page_name"
android:layout_above="#id/follow_button"
style="#style/pulse_content"
android:layout_alignTop="#id/page_image"
android:layout_toRightOf="#id/page_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/page_desc"
android:layout_above="#id/follow_button"
android:layout_below="#id/page_name"
style="#style/pulse_content"
android:layout_alignLeft="#id/page_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Principal Consultant" />
</RelativeLayout>
Related
I am trying to create for Android a row layout I have in an iOS app, at least I need to make it very similar to the iOS layout.
Here you have the iOS screenshot and the Android layout scheme:
And this is the layout code I have so far:
<?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="vertical"
android:background="#5981b2">
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/facebook" />
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="Titulo"
android:textSize="22dp"/>
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_alignParentRight="true"
android:layout_marginRight="3dp"
android:text="Subtitle" />
<ImageView
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/titleText"
android:layout_toRightOf="#+id/titleText"
android:src="#drawable/valoracion" />
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
android:text="14"
android:textSize="12dp" />
<ImageView
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/num"
android:layout_toRightOf="#+id/num"
android:src="#drawable/flecha" />
</RelativeLayout>
Of course, any help to make the layout similar to the iOS layout is welcome.
The other two answers explained pretty well what you were doing wrong. I created a VERY rough layout of how your view should look like just to give you an idea of all the parameters. This is in no way the best solution but it does replicate what you described in the picture. According to your requirements you can modify as needed. I have put in some comments that might be helpful.
<?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="wrap_content"
android:orientation="vertical"
android:background="#5981b2">
<!--This will always be top left of parent-->
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#android:drawable/alert_light_frame" />
<!--The following two views should be wrapped in a linear a layout
if you always want them to take up same horizontal space
regardless of which one has more text-->
<!--This will always be above subtitle and right of
image left-->
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="titleText"
android:textSize="22dp"/>
<!--This will always be below title and right of
image Left, if you were to wrap this and above view
in a linear layout then you can just set that linear
layout to be right of right image-->
<TextView
android:id="#+id/tvSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:layout_marginLeft="3dp"
android:textSize="22dp"
android:layout_toRightOf="#+id/imageLeft"
android:text="subtitleText"/>
<!--************************************-->
<!--Again you should wrap the following 2 views in
a linear layout if the icon and number always need
to take up same space-->
<!--As for now this image view will always
be to the right of subtitle-->
<ImageView
android:id="#+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tvSubtitle"
android:src="#android:drawable/ic_dialog_alert"/>
<!--This text view will always be to the left of
subtitle, wrapping the above view and this in a linear
layout will also allow you to center the num (text view)-->
<TextView
android:id="#+id/tvNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ivIcon"
android:layout_marginLeft="3dp"
android:textSize="22dp"
android:layout_toRightOf="#+id/tvSubtitle"
android:text="num"/>
<!--************************************-->
<!--This final view can just be centered vertically
and as of now will always be to the right of Icon
but once you wrap the icon and num in a linear layout
then you can just align in to the right of that layout.-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/ic_dialog_dialer"
android:layout_marginTop="5dp"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#id/ivIcon"/>
</RelativeLayout>
The two problems that I see are
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_alignParentRight="true"
android:layout_marginRight="3dp"
android:text="Subtitle" />
you have android:layout_alignParentRight="true" when I believe you want
android:layout_toRightOf="#id/imageLeft"
and
android:layout_below="#id/titleText"
Then for
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
android:text="14"
android:textSize="12dp" />
you have
android:layout_alignLeft="#+id/icon1"
android:layout_alignTop="#+id/icon1"
I think you want
android:layout_toRightOf="#id/subtitleText"
and
android:layout_below="#id/icon1"
you also might want to use android:layout_centerInParent="vertical" for android:id="#+id/icon2" if you change the height of the parent RelativeLayout to wrap_content but I don't know if that is an option for you. If not then you may need to add some top padding to it.
This should get you as close as I can without a screenshot of how it currently looks. Try making those changes and see how it looks. You may have to adjust a few things still but try that.
<ImageView
android:id="#+id/imageLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/facebook" />
<TextView
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageLeft"
android:layout_toRightOf="#id/imageLeft"
android:layout_marginLeft="3dp"
android:text="Titulo"
android:textSize="22dp"/>
<TextView
android:id="#+id/subtitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/titleText"
android:layout_toRightOf="#id/imageLeft" <!-- add this -->
<!-- android:layout_alignParentRight="true" remove this -->
android:layout_marginRight="3dp"
android:text="Subtitle" />
<ImageView
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/titleText"
android:layout_toRightOf="#id/titleText"
android:margin_top="10dp" <!-- add this, choose exact value -->
android:src="#drawable/valoracion" />
<TextView
android:id="#+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/icon1"
<!-- android:layout_alignTop="#+id/icon1" remove -->
android:layout_below="#id/icon1"
android:text="14"
android:textSize="12dp" />
<ImageView
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/icon1" <!-- change to icon1 -->
android:layout_toRightOf="#id/icon1" <!-- also -->
android:src="#drawable/flecha" />
eclipse shows me an error when I'm referring to a element that is declared later. How can I solve this or is there any kind of work around. Here is the part of my xml-layout file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:padding="5dp">
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#id/imageView1" <!-- error -->
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/imageView1" <!-- error -->
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/checkBox1"
android:src="#drawable/folder" />
I want the ImageView to be to the right of the checkbox, but I also want the checkBox to be as "high" as the ImageView (the checkbox should be still a square)
regards
#kalyan pvs....it is ok but you should not call each time with "#+id" which means you are creating new instance each time. This is wrong way of referring to an item in relative layout. In this, rendering errors will come when you are referring to a view which will be created after the present view. The right way of calling reference is #id only.
Just swap the CheckBox and the ImageView and remove android:layout_toRightOf="#+id/checkBox1" from the ImageView (in order to avoid a circular reference):
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="#drawable/folder"
/>
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/imageView1"
android:layout_centerVertical="true"
/>
Otherwise, the CheckBox can't refer the ImageView's id, since it hasn't been created yet
[EDIT]
An even better way to do that is incorporating the ImageView into the CheckBox, as a compound drawable:
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:drawableRight="#drawable/folder"
android:layout_drawablePadding="10dp"
/>
Note that now the image is on the right side of the checkbox.
This is a best practice.
Declaring a View later is not a problem, Try this, Reduced some lines of your code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:padding="5dp" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/checkBox1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Something like this works for me:
<?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="wrap_content"
android:background="#FFFFFF"
android:padding="5dp">
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageView1"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/checkBox1"
android:src="#drawable/folder" />
</RelativeLayout>
My application uses buttons and image buttons constructed via XML and drawable folder.
On some devices applications UI elements (buttons and image buttons) losses its position and overlaps on each other and on some devices last button in bottom of screen disappears.
Same is happening when orientation is changed.
I want all my elements to be on same position on all devices.
How can I make this using XML.
Is there any easy and simple way to do so?
Here is my XML.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:orientation="vertical" >
<ImageButton
android:id="#+id/main_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="55dp"
android:layout_marginTop="71dp"
android:background="#ffffff"
/>
<ImageButton
android:id="#+id/main_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/main_btn_1"
android:layout_marginRight="56dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_1"
android:layout_below="#+id/main_btn_1"
android:textColor="#00aeed"
android:textStyle="normal" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignLeft="#+id/main_btn_2"
android:textColor="#ea1d24"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="42dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_3"
android:layout_below="#+id/main_btn_3"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignTop="#+id/main_btn_3"
android:background="#000000"
/>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_4"
android:layout_below="#+id/main_btn_4"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/main_btn_5"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0065b3"
android:textStyle="normal" />
</RelativeLayout>
Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (i.e. LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.
I want to create the following layout -
http://postimg.org/image/56e9y0hrj/
But when I use the Relative layout and write the following code, I get something like this.
http://postimg.org/image/4gm0r15k1/
Here is mt xml file -
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#5c575c"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Top Stories"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView1"
android:layout_alignTop="#+id/textView1"
android:src="#drawable/one" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/two" />
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:text="A sample widget for multiple lines"
android:layout_alignRight="#id/imageView1"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:layout_alignLeft="#+id/imageView2"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView2"
android:text="World"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView4"
android:layout_alignTop="#+id/textView4"
android:src="#drawable/three" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/four" />
<TextView
android:id="#+id/textView5"
style="#style/format_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignRight="#+id/imageView3"
android:background="#ccc6ba"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView6"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView5"
android:layout_alignBottom="#+id/textView5"
android:layout_alignLeft="#+id/imageView4"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView7"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
style="#style/format"
android:background="#ccc6ba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:text="Cricket"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
I have gone through http://android-developers.blogspot.in/2009/02/android-layout-tricks-1.html and http://www.mkyong.com/android/android-relativelayout-example/ but could not find the solution. The images I use are of dimention 400by300 generated by http://dummyimage.com/
Please help me out !
Possible layout workaround, just from scratch, should show only my idea and is not testet: Do two LinearLayouts which specify layout_weight="1" inside one parent LinearLayout. This segments both LinearLayouts inside to the same size. Inside these two LinearLayouts, set the imageView and textView. But also, here You have to do different layout.xml for multiple screen usage.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/one"
/>
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/two"
/>
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines""/>
</LinearLayout>
</LinearLayout>
And then, You have define some new layout folders inside res-folder in your project. You need folders for different sizes. Inside these folder you have to define a layout file where the image views got different heights to match to the related screen size. But this is beyond the frame, so You have to learn a little bit about using multiple screen sizes:
http://developer.android.com/guide/practices/screens_support.html
using Fragments is even possible:
http://developer.android.com/guide/components/fragments.html
http://www.vogella.com/articles/AndroidFragments/article.html
EDIT
This behaviour of your textvies is because of the different screen sizes. That´s what I had talking about, to get all looking good, You have to do more than only one layout. Here are some examples how one layout looks on different screens:
HTC Desire S 3.7 inches
the imageViews and TextViews fill the whole width, so the textViews are completely as width as the imageViews. By default, the textView wraps automatically if the text is too long, but this could be device dependant. Usally define maxLines, that will cause wrap text inside the textView. But if the text is shorter than the width, it doesn´t wrap.
Device with 5.1 inches
here the text is shorter than the width, so it doesn´t wrap. You could fix this by set fixed sizes to textView.
But this is all just scratches the subject, I can´t complain the whole thing in here. You have to learn how to handle different layouts. You have to set fixed sizes to different layouts, different resources and so on.
I have problems getting some of my views aligned in a relative layout that I use inside a row of my listview.
Here is a screenshot from the layout builder in Eclipse, this is what I think it should look like:
(source: janusz.de)
The next image is from the emulator. Now the TestTestTest View is at the top and covers the name and distance Textviews.
(source: janusz.de)
This is my layout:
<?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:padding="4dip">
<ImageView android:id="#+id/logo" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:adjustViewBounds="true"
android:scaleType="centerInside" android:src="#drawable/icon"
android:layout_centerVertical="true" android:layout_alignParentLeft="true"
android:background="#color/green" />
<TextView android:id="#+id/distance" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Distance"
android:layout_alignParentRight="true" android:layout_alignParentTop="true"
android:paddingRight="4dip" android:background="#000000" />
<TextView android:id="#+id/name" android:layout_width="fill_parent"
style="#style/ListHeadText" android:layout_height="wrap_content"
android:text="Name"
android:layout_alignTop="#id/distance" android:layout_toRightOf="#id/logo"
android:layout_toLeftOf="#id/distance" android:gravity="clip_horizontal"
android:lines="1" android:paddingLeft="4dip" android:background="#color/red" />
<TextView android:id="#+id/number" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Number"
android:paddingRight="4dip" android:layout_alignRight="#id/distance"
android:background="#color/darkred" android:layout_below="#id/distance" />
<TextView android:id="#+id/subcategory" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Subcategory"
android:paddingLeft="4dip" android:layout_alignLeft="#id/name"
android:lines="1" android:gravity="clip_horizontal"
android:layout_below="#id/distance" android:background="#color/green" />
<TextView android:id="#+id/test" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="TestTestTest"
android:paddingLeft="4dip"
android:layout_alignParentBottom="true" android:gravity="bottom"
android:background="#color/red" />
Shouldnt align_parent_bottom put the view at the bottom of the cell in the list?
Try adding android:layout_alignParentLeft="true" as well; sometimes Views aren't displayed properly if it can't anchor the view with at least 2 points. Also, is this RelativeLayout used within a ListView? If so, you might find you have some difficulty getting it to look right. There was another question where someone was having a problem where the RelativeLayout looked right on its own, but not once it was included as part of a ListView. We didn't manage to figure out what went wrong so he had to use nested LinearLayouts instead.