Develop Reference

Text width on imageview widget

I have a problem regarding Textview on my battery widget.
The has a picture and on it textview showing the % the problem is that there seems to be something wrong with my code regarding the text width because it allows only 2 characters per verse so it shows for ex. 50 in the first verse and % in the second. How do i set it right? Also side question: can i somehow make the text to always be on the bottom and center? I can do it with padding but it shows differently on each screen size. So anyway here's the code regarding text EDIT: Here is entire xml file-:
<?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/imageView1_widget"
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/bateria50_1" />
<TextView
android:id="#+id/textView1_widget"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1_widget"
android:singleLine="true"
android:layout_gravity="bottom|center_horizontal"
android:shadowColor="#000000"
android:shadowDx="2"
android:shadowDy="2"
android:shadowRadius="1"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:textStyle="bold" />
</RelativeLayout>

For LinearLayout:
android:singleLine="true" and android:layout_gravity="bottom|center_horizontal"
For RelativeLayout:
android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"

How to achieve ellipsize(Three dots) in List item of Android List Item

Hi my ListView's list items layout is as below: Also attaching Image that shows the output of this layout . In the above output image we can see the text present in 2nd line over laps with right aligned TextView. I want 3 dots to be placed at the end of Text with out overlap.
<?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/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="16dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/sname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/name"
android:layout_below="#+id/name"
android:layout_marginTop="15dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/abbr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sname"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
Can anyone help me in solving this issue ?
Thanks in Adavnce

Just add these layout attributes for your TextView
android:ellipsize="end"
android:maxLines="1"
This tells android you want your textview to be ellipsized at the end (add the 3 dots to the end of the text) and that you don't want your text to wrap to the next line (by setting the max lines).
The only thing you would need to then is make sure your TextViews don't overlap (the cri... portion). There are a number of ways to do this.
Move your abbr TextView to above your other TextViews and add android:layout_toLeftOf="#id/abbr" to your non-abbr TextViews
Redo your layout in general to make sure there is no overlap, using LinearLayouts would help achieve this with the benefit of things like weight.
Dynamically setting your widths once you know your window size.

TextView text aligment is horrible! How to work around it?

I always seem to have the biggest issues with aligning a text on a layout. Seems like the TextView doesn't measure its text properly. The reported TextView width and height are a lot bigger than the actual text. One would expect the TextView width and height to be tightly wrapped around the text.
The image below shows how the number 18 and the text "SEC" are not aligning on the same bottom baseline. This is due to the larger text height being a lot bigger than the text is. My xml layout can be seen below.
How to achieve better text alignment accuracy?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/scan_block_1_bg" >
<LinearLayout
android:id="#+id/staticCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/tvStaticScanning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SCANNING"
android:textColor="#878787"
android:textSize="20sp" />
<TextView
android:id="#+id/tvCountDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#66000000"
android:shadowDy="-1.0"
android:shadowRadius="0.01"
android:text="03"
android:textColor="#b6b6b6"
android:textSize="81sp" />
</LinearLayout>
<TextView
android:id="#+id/tvStaticSeconds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/staticCountDown"
android:layout_toRightOf="#id/staticCountDown"
android:gravity="left"
android:shadowColor="#ffffff"
android:shadowDy="1.0"
android:shadowRadius="0.01"
android:text="SEC"
android:textColor="#878787"
android:textSize="12sp" />
</RelativeLayout>

//use this attribute in your TextView
android:layout_alignBaseline="#id/staticCountDown"
and android:layout_marginBottom="-10dp"

As strange as it may sound if you look at the screen shot provided Both the textviews have the same bottom base alignment. Try putting letters "gj" in tv countdown. You can actually see both will come to have same bottom base alignment. Its better go with padma Kumar's answer.

Android layout space-filling problem

I'm having real difficulty coming up with a layout which works. I have a view which fills the width of the screen. It contains three sub-views:
Some text
A number in parentheses after the main text
A button
The button is right-aligned, and the text items are left-aligned one after the other, as shown:
| Some heading text (n) [button] |
The problem is controlling what happens when the text is too long. I want it like this, so that the number is always visible just to the right of the main text. The main text should be truncated if needed so the other two views remain visible.
| Some very very long headin... (n) [button] |
The closest I've got which succesfully truncates the main text results in the (n) always being right-aligned next to the button even when the main text is short enough to fit. That's not what I want.
How would you approach this?
I'm not posting any of my current XML yet, lest it prejudice anyone's suggestions.

I do not believe there's any xml layout for that. My guess is that you will need to extend TextView and measure the text length inside onDraw(...), adjusting the text accordingly through some iteration (i.e., removing one character at a time until the text fits the canvas)
I just found another question that is quite similar to yours: Ellipsize only a section in a TextView . No other answer than ellipsize in the middle.
Another thoughts:
I'm wondering if it would work to have one textview with the main text (ellipsize left, wrap_content) and another with the number in the parenthesis (wrap_content), both inside an horizontal linear layout. That layout would be inside a relative layout and layout_toLeftOf the button, which would be wrap_content, layout_alignParentRight.
Does it make any sense? I don't have Eclipse now to test it myself. Not sure if the (n) textview would be lost behind the button or not with a long text.
Alternatively (and less interesting), you can setup one single relative layout with the two textviews all layout_toRightOf and the button aligned to the right (layout_alignParentRight) and set the max witdth ot the first textview (android:maxWidth). You would need to set up different layouts for different screens, though.
An example with a fixed max width that will work as required:
<?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"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short text"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t1"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n1"
android:layout_toRightOf="#id/t1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt2"
android:layout_below="#id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="very long text that will not fit in any layout, regardless of the size of the screen"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t2"
android:layout_below="#id/bt1"
android:layout_alignParentLeft="true"
android:maxWidth="220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n2"
android:layout_below="#id/bt1"
android:layout_toRightOf="#id/t2"
/>
</RelativeLayout>

Try a linearlayout, set the weight of the text view as 1,, and set ellipsis as TruncateAt.MIDDLE. Check this layout
<?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">
<TextView android:id="#+id/text" android:layout_width="0dp"
android:layout_height="wrap_content" android:lines="1"
android:ellipsize="middle" android:gravity="left"
android:layout_weight="1" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

The key is the ordering of the items as this is the order they are measured, in order to ensure your button and (n) text get enough space in the overall layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_toLeftOf="#id/button"
android:text="(n)"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/middle"
android:layout_alignParentLeft="true"
android:gravity="left"
android:ellipsize="end"
android:text="Some really long to text to make this flow over"
android:lines="1"
android:maxLines="1"
/>
</RelativeLayout>

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>