Develop Reference

How to achieve the following layout on Android

I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>

RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.

Relative Layout giving a lot of trouble

Here's the code:
<RelativeLayout
android:id="#+id/tc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tc"
android:layout_marginLeft="185dip"
android:layout_marginTop="25dip"
>
<ImageView
android:id="#+id/tc_icon"
android:background="#drawable/count_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tc"
android:layout_mar
/>
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
/>
</RelativeLayout>
I have somehow managed to make the image and the text views overlap each other (which I wanted). Now, I want them to be placed to the bottom left corner of their parent RelativeLayout (with id 'tc').... However, they just wouldn't move.
If I used alignParentBottom.... the entire relative layout stretches across the screen and aligns to its parent relativeLayout.
Please help. Thanks! :)

If you wanna overlap an image and a textview, simplw use a android:drawableleft or ony position where you want.
For example:
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
android:drawableleft="#drawable/yourimage.jpg"/>
This will give you an image on the left of your textview. Check it out

Right-align button with dynamic text

In my user interface, I have a fragment with a RelativeLayout. At the bottom of this RelativeLayout, I have two buttons: one should be on the left, the other on the right, with empty space between them. The left one has static text (but because the app will be translated, I don't know what width it will be). The text in the right one can change arbitrarily.
Since I already have a RelativeLayout, I started out trying to lay them out inside the RelativeLayout like this:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/right" />
But this has the problem that if the text in the right-hand button is too long, it will overlap the left-hand button.
I next tried to constrain the left-hand edge of the right-hand button by adding android:layout_toRightOf="#+id/button_left", but with this, the right-hand button would always fill the available width. When the text in the right-hand button is short, I want it to shrink to leave a gap between it and the left-hand button.
I next tried to use a LinearLayout, so I could set layout_gravity on the buttons, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:drawableLeft="#drawable/pass"
android:text="#string/right" />
</LinearLayout>
Still no joy. I expected this to work, but the right-hand button stays just to the right of the left-hand button, instead of sticking to the right edge of the screen. I can see in the layout editor that the LinearLayout correctly fills the width of the screen, but the button stubbornly stays next to its friend.
I tried adding android:layout_weight="1" to the right-hand button too, but again, that made it always expand to fill the available space.
Next, I tried to add an empty View between the buttons, to expand and force the right button to the right, like this:
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/left" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</LinearLayout>
This works fine when the text is short, just like my original RelativeLayout did, but now when the text on the right-hand button is long, its width is limited by the width of the screen, not the available space, so it extends off the right-hand edge of the screen. Again, I can see in the layout editor that the LinearLayout has the correct width, but the button is extending ourside its parent's bounds. This happens even if the button has android:layout_width="match_parent". Oddly enough, increasing the layout_gravity on the right-hand button makes it smaller until it fits inside the available space, but of course that also makes it fill the space when the text is small.
I can't believe it's this hard to get this right. I've seen half a dozen similar questions on SO, but they all have easy workarounds. If the button text is fixed, you can set the margin to a fixed width by hand. If the expanding widget is a TextView instead of a Button, you can just let it expand and use android:gravity to move the text inside the widget, but you can't do that with a button because the background and borders are visible on the screen.

It turns out that adding the LinearLayout was the wrong approach. Using android:layout_toRightOf="#+id/button_left" android:layout_alignParentRight="true" works fine with a TextView, because that can soak up the available space without changing its appearance. Instead of trying to change the layout, I just need to use something that can expand to fill the available space and contain the Button: a FrameLayout. Here's the working code, which still goes inside my root RelativeLayout:
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/button_left" >
<Button
android:id="#+id/Turn_button_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/right" />
</FrameLayout>
Now, the FrameLayout always takes up all the space to the right of the left-hand button, and lays out the right-hand button inside that space using android:layout_gravity="right".
This answer only adds one extra layout, but if someone has a way to do it only using the existing RelativeLayout, to minimise the number of ViewGroups in the layout, I'll accept that as a solution.

IF you can live with the constraint, that the right button only can take up to up half of the available space, this could be a solution for you:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A short text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="A very long text which is limited to one half of the available space" />
</RelativeLayout>
</LinearLayout>

You could just use a TextView and make it look like a button. Create a dummy button, extract the background and set that background to the textfield programmatically.
(Not tested but should give it the apperance of a button)
Drawable d = button1.getBackground();
textView1.setBackground(d);
then you just set the onClickListener and that should yield what you're looking for. The TextView would take the place of the "button_right" in your first layout.
**Edit
Your xml would look something like this
<Button
android:id="#+id/button_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/left" />
<TextView
android:id="#+id/button_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:maxEms="10"
android:text="TextView" />

Placing text view over an image view using FrameLayout

Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.
Here is my layout,
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:visibility="visible" android:layout_marginTop="60dip"
android:layout_gravity="center" android:id="#+id/xxx">
<ImageView android:id="#+id/calloutquizImage"
android:background="#drawable/callout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scaleType="fitCenter" />
<ImageView android:id="#+id/triviaImage"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/calloutquizImage" android:layout_gravity="left"
android:src="#drawable/trivia" android:background="#drawable/trivia"
android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>
<TextView android:text="TextView" android:id="#+id/triviAnswerText"
android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
android:layout_gravity="left" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans"></TextView>
<ImageButton android:id="#+id/triviaanswercloseButton"
android:src="#drawable/closebtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="#drawable/closebtn"
android:layout_marginRight="8dip" android:layout_marginTop="43dip"
android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
<ImageView android:id="#+id/buttontoclose"
android:layout_gravity="left"
android:visibility="visible" android:onClick="triviaanswerClose"
android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>
Because of this the text view looks in different positions in various handsets.
Any guesses what can be done for this instead?
Below is my image :

I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.
Please have a look what is NinePatch image in Android:
http://developer.android.com/reference/android/graphics/NinePatch.html
http://developer.android.com/tools/help/draw9patch.html - drawing tools
So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border).
No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.
UPD:
Please find the resulting screenshot:
As you can see, textView not handles
WhiteBox" itself, filling it with text and resizing the box if necessary.
Here is how to make it work:
<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">
<TextView
android:id="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text
Manymanymany text" />
<TextView
android:layout_below="#+id/first"
android:background="#drawable/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Not so many text" />
</RelativeLayout>
And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.
For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.
Hope it helps, good luck

I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.
for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/xxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="0dp"
android:visibility="visible" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margintop="0dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/user2" />
<TextView
android:id="#+id/Textviewtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_below="#+id/imageView1"
android:layout_marginTop="-10dp"
app:context=".TestActivity" />
</RelativeLayout>
</FrameLayout>
Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position.
Please reply if this helped.
Use your images and values for the height and width. I just tried for testing.

How to center image and text in a RadioButton?

I have two custom RadioButtons side by side that fill the width of the screen. I want to have text and an image to the right of the text, centered in the button.
drawableRight draws the image way off to the right of the button, not near the text. I can't use drawableEnd because I don't have Android 4.0
I've tried using a Spannable, but the problem with that is that the image is bigger than the text. I don't want it aligned with the bottom or baseline of the text; I want it to be centered in the button on its own.
The best solution I've found is making a clickable RelativeLayout with a TextView and ImageView centered in it. This makes the button look the way I want it to, but it seems like a lot of work to do that, and to program each RelativeLayout to act like a RadioButton in a RadioGroup.
Is there an easier way, or something that I'm missing? Or should I keep my RelativeLayout idea? Here's my xml for this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/first_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/first_textview"
android:text="#string/first_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/first_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/first_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/second_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/second_textview"
android:text="#string/second_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/second_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/second_textview">
</ImageView>
</RelativeLayout>
</LinearLayout>

I kept going with the RelativeLayout solution. It takes more work than it seems should be worth it, but it works perfectly.