Develop Reference

Button size and padding within RelativeLayout

I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?

RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.

To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>

Android - Make a background image not stretch it's assigned view out

Hooray for pictures! Here's what it looks like when assigning the picture to the background, and when not.
I'd very much like for it to not stretch out the top TableView if the image is larger than the table. I've included an empty "view" to give a little bit of extra space for the table's background already as well, as you can see in the XML to follow. Tried to mess around with ScaleType, but that was a wash.
How can I get the BG to stretch to fit the layout? I'm trying to handle the "user xxx has a smaller screen than WVGA" gracefully. I lack grace, apparently.
<TableLayout
android:id="#+id/widget29"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scaleType="fitXY"
android:background="#drawable/minetownx480"
>
<View
android:id="#+id/blankSpace"
android:layout_width="fill_parent"
android:layout_height="60dip" />
<TableRow android:id="#+id/widget40" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal">
<TextView android:id="#+id/moneyText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Money: $$$$$$$$$" />
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/savingsText" android:gravity="right" android:text="Savings: $$$$$$$" android:layout_weight="3" android:textSize="12sp"/>
</TableRow>
<TableRow android:id="#+id/widget41" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal">
<TextView android:id="#+id/wagonText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Wagon Space: XXX/XXX" />
<TextView android:id="#+id/loanText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Loans: $$$$$$$$" android:gravity="right" android:layout_weight="3" android:textSize="12sp"/>
</TableRow>
<TableRow android:id="#+id/widget42" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" >
<TextView android:id="#+id/daysText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Days Left: XX/XX" />
<TextView android:id="#+id/armedText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Unarmed!" android:gravity="right" android:layout_weight="3" />
</TableRow>
</TableLayout>
The tablelayout is the first element of the root linearLayout, if that matters at all.
Edit: Alternatively, if you know how I could measure the tableLayout's X and Y space before assigning the image, I could scale it programmatically before assigning it.... Either solution would be good if anyone knows!

I would use FrameLayout and create two layers (i.e. add two views inside). First would be an ImageView and the second, therefore the top one, would be your table. In this way I would not rely on the table to control my image scaling but it would be independent from the ImageView which one can then hopefully more easily manipulate as it is not showing the image as 'background' but as the source.

How to guarantee space for an ImageView, keep it from shrinking?

I need to create an XML with the following content:
* Two TextViews with varying text (1- 3 rows), one TextView below the other.
* One ImageView to the right of the 2 TextViews, centered vertically, 30x30 px.
One major limitation is that it can't take the whole screen when inflated into a PopupWindow, which means that I cannot use the attributes fill_parent in many places.
I tried a lot of different layouts, but the ImageView keeps getting pushed away by the TextViews when the text is long. When the text is "half long" the image gets tiny but is still visible. I want it to always be 30x30 px, the text can wrap and use another line instead.
I tried to specify values for width and minWidth. Also tried layout_weight="1" for the ImageView. Also tried wrapping the ImageView into a LinearLayout and give that the layout_weight="1" parameter. Nothing works.
Here's an example of what is not working:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</LinearLayout>

I've had a similar problem and i found that the TableView layout worked for me. It took a while but you can play with the stretch and strink columns proeprties to change the behaviour of how the columns expand to match there content.
Note that you should be able to set the linearLayout of your text to fill_parent (to fill the column space).
Read this on how TableRow works http://developer.android.com/resources/tutorials/views/hello-tablelayout.html
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img_30x30_px" />
</TableRow>
(Afraid i'm not on a machine with Android so i couldn't test the above code).

Thank you so much Emile! It works! You made my weekend! :)
I had to try it right away (althought it's friday evening), and here's what my xml now looks like:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow>
<!-- Column 1 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/popupTitle"
android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/popupContent"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<!-- Column 2 -->
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:src="#drawable/img_30x30_px" />
</TableRow>
</TableLayout>

Indent bullet list in TextView

I have a TextView which I fill with text from a string resources in strings.xml. The string resource contains < li > elements to create a bullet list inside the TextView. My problem is that I want to control the indention of lines in the bullet list that span over more than one line. Default the text isn't indented past the bullet so it looks kind of ugly. Is it possible to do this with style parameters or to create bullets in some other way?
Thanks in advance.
edit:
Is it really answered? I don't have any problems producing the bullet list, as described in those links but I'm having problems getting the layout correct. The indentation is like this:
text that go beyond the width
of the line.
And I want the "of the line" to at least start indented as far as the text after the bullet. That's what I try to achieve.

I'm suprised that there seems to be noone with this problem. I mean, bullet list can't be that uncommon in about-dialogs, FAQ etc and a bullet doesn't have to contain too much text to span more than one row and run into this problem.
Anyway, I got to solve it like this for now:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/ScrollViewTipsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TipsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_height="wrap_content"
android:id="#+id/TableLayout01"
android:layout_width="wrap_content"
>
<TableRow>
<TextView android:id="#+id/tvIngress"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#+string/tv_picking_content_ingress"
android:layout_span="2"
android:singleLine="false"
android:layout_weight="1"
/>
</TableRow>
<TableRow>
<TextView android:id="#+id/tvCleaningDot1"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningFirst"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_first"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
<TextView android:id="#+id/tvCleaningDot2"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningSecond"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_second"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
I use it to present static text in a bullet list so I don't bother to create the bullet + text dynamically in code. If anyone have any suggestion how to accomplish the same thing in a better way, please enlight me.
Btw, if going with the solution suggested in second link above:
android:text="<ol><li>item 1\n</li><li>item 2\n</li></ol>
The second, third etc. row in a bullet that span over more than one row won't get same indention as first line, which is quite ugly.

Thank you #Bjorn
You can also do something like bellow.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/point"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text Here"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14sp" />
</LinearLayout>

The way I solved this problem was by using a RelativeLayout and marginLeft. The marginLeft will put a blank margin between it and the previous item.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarTrackVertical="#drawable/scrollbar_vertical_track"
android:scrollbarThumbVertical="#drawable/scrollbar_vertical_thumb"
android:scrollbarSize="12dip">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10sp">
<TextView
android:id="#+id/body_text3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="Main paragraph of text, before the bulleted list"
android:textSize="15sp" />
<TextView
android:id="#+id/type1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• First bullet"
android:textSize="15sp"
android:layout_below="#+id/body_text3"
android:layout_marginLeft="25dp" />
<TextView
android:id="#+id/type2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• Second bullet"
android:textSize="15sp"
android:layout_below="#+id/type1"
android:layout_marginLeft="25dp" />
</RelativeLayout>
</ScrollView>

Just trying to point out the key answer of the question:
to create an bullet list, use TableLayout with two columns for each row. One column for TextView of a bullet and the other one for the text
to make text TextView fill the rest empty TableRow and indented at new line, set the weight to 1. You can set the bullet weight to zero or just simply not set the bullet weight and let it empty
based on my experience, changing width parameter do not affect the text and the bullet. So you can leave it empty or set it to anything you want.
Example:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/bullet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/bullet"/>
<TextView
android:id="#+id/TextView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="this is the text of a bullet list"/>
</TableRow>
</TableLayout>

Button text appears vertical

My project was working fine, when suddenly the text on my buttons was being displayed vertically. By which I mean instead of map_infobutton displaying
Info
it was displaying
I
n
with the f and o beyond the bounds of the button, even though I have specified height=wrap_content in the TableLayout containing the buttons.
It appears fine in the Layout tab in eclipse, and only appears vertical in the emulator (not tried on target hardware)
getPaddingLeft for one of the buttons returns 11 at various points in the code. Not sure where it gets that from, but the spacing looks bigger than that anyway. I did have three buttons and took one away, but the problem existed with both two and three buttons.
My layout is:
<?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">
<TextView
android:id="#+id/map_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="8px"
android:paddingBottom="8px"
android:gravity="center"
android:textColor="#color/header_foreground"
android:background="#color/header_background"
android:text="#string/map_header"/>
<TableLayout
android:id="#+id/map_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingTop="4px"
android:paddingLeft="2px"
android:paddingRight="2px"
android:stretchColumns="*"
android:textColor="#color/footer_foreground"
android:background="#color/footer_background">
<TableRow>
<Button
android:id="#+id/map_infobutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_infobutton" />
<Button
android:id="#+id/map_selectbutton"
android:layout_width="0px"
android:layout_weight="1"
android:text="#string/map_selectbutton" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/map_selectiondetails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/map_footer"
android:orientation="horizontal"
android:gravity="center"
android:textColor="#color/main_foreground"
android:background="#color/main_background" >
<TextView
android:id="#+id/map_selectionname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectiondistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:paddingRight="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
<TextView
android:id="#+id/map_selectionvar3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="4px"
android:textColor="#color/main_foreground"
android:background="#color/main_background"/>
</LinearLayout>
<SurfaceView
android:id="#+id/map_map"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_above="#id/map_selectiondetails"
android:layout_below="#id/map_header"
android:clickable="true"/>
</RelativeLayout>
Any ideas? Also if you have any comments on how I'm creating the layout, as I'm new to this and it seems like there are a lot of options available, but I'm trying to make it as simple as possible.

I had a similar problem.
I see that you have multiple buttons that you want to have the same width, so you specify the button's width as "0px" and the weight as "1". This is exactly what I did.
When I set the button text within the XML file, things look fine. However, I have one button that changes is text depending on whether a process is running or not. In my case, it is similar to the situation where a button toggles from "Start..." to "Stop..." After the text changes, it prints vertically and only the top one or two letters of each button are shown.
After reading your post, it occurred to me that, perhaps, the text was being set before the button width had been determined, and then not updated once the button width changes according to the "weight".
I modified it such that in each button, it now reads:
android:layout_width="fill_parent" instead of "0px"
In theory, this should have the same effect. However, in practice, the button width is adjusted before the text is updated. The behaviour is now correct.
Rob