Develop Reference

RelativeLayout View to right of TextView

I got following simple Layout. The problem can be reproduced in the android studio designer:
<?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/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/x"
android:layout_toEndOf="#+id/x"
android:layout_centerVertical="true" />
</RelativeLayout>
This layout works fine if the text length of the textview is short. The checkbox is placed on the right of the textview. But if the text gets long and even wraps maybe, then the checkbox is pushed out of the view. It is not visible anymore. I would like that the checkbox is always visible on the right of the textview even, if it fills the whole width of the screen.
I tried to rewrite the layout with a LinearLayout which doesn't work either.
<?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">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Do you know a trick to to achieve this with relative layout? I would somehow expect this behaviour from relative layout by default. Thanks ;)

This is working for me: make checkBox alignParentRight and make TextView toLeftOf it:
<?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/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="This is very-very-very looooooooooooong stringgggg, very-very, long-long"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Edit. You can include this Relative Layout into other (parent) layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/y"
android:text="this is veryyyyy yyyyyyyyyy yyyyyy yyy loooooo oooooooo ooon nnggggg gggg striiii iiiiin gggggg ggggg ggggggg ggg"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
It's also working. If you put android:gravity="left" into Relative layout, it will locate its content on the left side.

One way out would be to put the textview and checkbox in a linear layout with orientation horizontal. Set width of checkbox to be whatever you want (a constant) and the width of textbox to be 0dp and layout_weight of 1.

You should put the property layout_weight to make your views (TextView and Checkbox) have a deff space in the screen instead of use a hard value
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:layout_marginEnd="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_small"
android:text="#string/long_string"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<CheckBox
android:id="#+id/y"
android:layout_weight="0.1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

I guess the desired layout is not possible by default. I tried to do this using RelativeLayout, LinearLayout and TableLayout. It is technically understandable that the these layout do not support that behaviour. The relative layout would have to explicitly respect the case that an element on the left or right is minimal visible inside the parent even it is placed to left or right. Another solution would be if the table layout would allow a column to consume the rest of the space but respects min width of other columns as well.
For my case i wrote a workaround. I used the initial relative layout of my question but set a max width to the textview using following calculation:
DisplayMetrics displaymetrics = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int displayWidth = displaymetrics.widthPixels;
That guarantees the checkbox to be visible. I know the solution could be hardly possible in scenarios where the given layout is embedded in a more complex layout.

Aligning an image to the right of RelativeLayout without streatching

I have a relative layout that has a background image. I set the height and width to wrap_content. Everything works fine. I want to place an image at the topRight corner of the relative layout. So I use alignParentRight = true. The problem that the relative layout now stretches horizontally to fill the screen.
I have done so much reading and I came across this "circular dependency pitfall"
From the RelativeLayout doc:
Class Overview
A Layout where the positions of the children can be described in
relation to each other or to the parent.
Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM
Here is my XML sample
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>
And that's exactly what I am facing. Is there any recommendation or a way to achieve what I want? I want the the Relativelayout to be as big as the background image and the image at the top right corner of that.
Thank you so much

Have you tried setting gravity to right?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>

I have already faced these problem and i have been solved this way.
try this may help u.
<?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/backGroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/backGroundimage" >
</ImageView>
<ImageView
android:id="#+id/ibCloseDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/backGroundimage"
android:background="#drawable/ibCloseDialog" >
</ImageView>
</RelativeLayout>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
Try using this code.
Here I height and width of RelativeLayout is set to fill_parent.

How to vertically center content within a ListView footer?

I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>

After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.

How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.

trying to align an image to the right margin and text to the left margin (Android application)

This is the layout I am using:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent" >
<RelativeLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="fill_horizontal"
>
<TextView android:id="#+id/poi_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
/>
<ImageView android:id="#+id/internet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/internet"
android:adjustViewBounds="true"
android:maxHeight="20sp"
/>
</RelativeLayout>
...
</LinearLayout>
</ScrollView>
However, the text appears aligned to the left but the image appears at the same height than the text (as expected), but horizontally centered in the screen. Why is it not aligned to the right ?
I tried with different combinations of the android:gravity attribute at the RelativeLayout without success.
The maxHeight attribute of the image is set using 'sp' units because I want the image to be proportional to the text it is accompanying. Is that correct ?
Thanks for your feedback.
UPDATE:
Thanks to the answer of #danh32 I managed to solve this using a LinearLayout instead of a RelativeLayout. But just out of curiosity: if someone knows what was the problem with the RelativeLayout of my example, I will be grateful.

Have you tried using textview's drawableRight attribute to display the image, instead of a standalone imageview? You should be able to change the textview's width to fill parent and set the drawableRight as your internet drawable.
<TextView android:id="#+id/poi_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
android:drawableRight="#drawable/internet"
/>

Picture is too big to see all views

I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.

add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.

You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".

You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).