Develop Reference

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.

Using RelativeLayout, LinearLayout and layout_weight at the same time - weird behaviour

I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.xml:
<?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="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).

How to create a button on top of ImageView and align it to the bottom of the screen?

I want to have a button on top of ImageView using my xml file. When I run this code, the button appears to the left hand side of the screen on top of other buttons.
Does anyone have any idea on what to do to have a button on TOP of ImageView but at the bottom of the screen.
So far I have the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
......
<ImageView
android:id="#+id/filter_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/filter_linear_layout" />
//this is the button I want to have on top of the ImageView
<Button
android:id="#+id/display_RGB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_blue_red_transluscent"
android:text="#string/display_RGB"
android:textColor="#android:color/white" />
</RelativeLayout>
Not too fussy as long as its somewhere at the bottom of the screen but in the center.

You can put them in their own RelativeLayout, then you can manipulate the location of the button relative to the ImageView quite easily.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/filter_linear_layout" >
<ImageView
android:id="#+id/filter_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<Button
android:id="#+id/display_RGB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_blue_red_transluscent"
android:text="#string/display_RGB"
android:textColor="#android:color/white"
android:layout_centerHorizontal="true"
android:layout_below="#id/filter_image_view"
/>
</RelativeLayout>
If this is not what you are looking, you'll need to post a sample image of how it currently looks and how you wants it to look.
[Edit]
Edited the XML layout. If you want the ImageView to center horizontally, add this to ImageView:
android:layout_centerHorizontal="true"
And you'll probably want to add some spacing between ImageView and Button by adding this to Button:
android:layout_marginTop="8dp"

Try this.
<Button
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dip"
android:text="hi"
android:textColor="#color/black"
/>

using Framelayout for making panel

Hello i am using following xml to create some sort of Transparent panel . The problem i am facing is that the background image ac zoom up , i mean its height get increase , the other thing i would like to know how can i bring this frame in the middle and adjust its width . I have followed this example
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/ac" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="test test test" />
</FrameLayout>

For your ImageView have a look at ScaleType
Try:
android:scaleType="fitXY"
If you want to center your Views have a look at Layout Gravity

Android - Two ImageViews side-by-side

I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="15dip" android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:scaleType="fitStart"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
The first image will be a square (lets say 100x100) and the second image will be rectangular (300x100) - and I want them to be aligned next to each other but always be scaled to fit within the width of the device - is this possible just with layout config?
The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).
Thanks
UPDATED AGAIN:
I have updated my layout to look like this now including the ScrollView as recommended but no joy:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="top"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="#+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right"
android:background="#drawable/dark_bg" android:orientation="horizontal">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/daysText"/>
</LinearLayout>
</ScrollView>
<!-- main body for the rest of the info -->
<LinearLayout android:orientation="horizontal" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/light_bg">
</LinearLayout>
</LinearLayout>
Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.
Below is a screenshot of the Eclipse display:

try using layout_weight for both of the ImageView components. So something like:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it's very useful!

You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.