Develop Reference

How do I make my TextView positioning responsive?

In the image above, the black speech bubble and the red background behind it are a single ImageView that spans the width of a vertical phone screen. The "Hello" is a TextView and the layout is relative. Using margins, I was able to position the "Hello" inside the speech bubble in my Android emulator -- but the positioning is off when I emulate a different phone.
Is there a better way to position my TextView
is there a way to make it responsive (so that the Hello is always in
the speech bubble, no matter what the device)?
Here's my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainGraphic"
android:src="#drawable/finished2"
android:layout_marginBottom="97dp"
android:layout_above="#+id/enterValue"
android:layout_alignParentStart="true" />
<TextView
android:maxWidth="200dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/helloText"
android:textColor="#FFFFFF"
android:layout_marginEnd="29dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="45dp" />
</RelativeLayout>

I would use a FrameLayout instead of the RelativeLayout with same size like the image.
Then use the attributes android:layout_gravity="center" and android:gravity="center" for the TextView.

Try this:
...
<TextView
android:maxWidth="200dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/helloText"
android:textColor="#FFFFFF"
android:layout_alignTop="#+id/mainGraphic"
android:layout_alignBottom="#+id/mainGraphic"
android:layout_alignLeft="#+id/mainGraphic"
android:layout_alignRight="#+id/mainGraphic"
android:gravity="center" />
...

Best approach is to use 9-patch image & set it as the background of the Textview. If you use a normal png file, we can't guarantee that it will align correctly on all resolutions & it can become blurred when stretched.
9-Patch image automatically resize to accommodate the contents of the view and the size of the screen. Android SDK provides a tool for creating 9-patch images which is inside SDK sdk/tools directory. See https://developer.android.com/studio/write/draw9patch.html.

You should use a 9-patch for the message shape. What you can do is make the root view of your layout as a FrameLayout and then add a TextView to it. Set the message shape Nine-patch as the background of the TextView.
For creating the 9-patch visit https://romannurik.github.io/AndroidAssetStudio/nine-patches.html by Roman Nurik. There just upload a png file of the image asset and choose the xhdpi definition for best results. The Nine-patch has 3 main properties -
Stretch regions : Defines which areas of the asset can stretch for accommodating different screen densities.
Content Padding : Defines the padding area for the content (text) that is going to appear inside the image.
Optical Bounds : Defines how much area should be optically visible around the asset.
Pros of using Nine-patches :
Scalable
Easy to use
Lightweight
Any amount of content can be put in it.
Hope this helps.

Ideally, you should be using a complete red background to the RelativeLayout, and a black speech 9patch image for the TextView.
But if you really want the RelativeLayout to have background as red with speech bubble, you have to set it at run time.
Calculate the height and width of RelativeLayout at run time say 150px and 300px respectively.
Carefully look at the background image, and determine the edge points of bubble from top, right, bottom and left. For example, if image height is 100px by 200px, and bubble top starts at 30px and bottom ends at 70px, right edge starts at 150px and left ends at 250px. Also calculate the width and height of TextView.
At run time, change the position of TextView based on the above figures.

Android default button designers fixed size

This question might be trivial to some of you.
I am facing a dumb issue working with designers and developers.
According to the designers the android button from material design has a particular style, default button style (top button in the image).
Designer defines a fix height and width 50dp for instance. So they expect to have a button of those dimensions.
But developers when using a default android button, the default button contains margins.
So we use a custom drawable background, in this case the button has the expected dimensions (button a the bottom). But the style is not exactly the same (very few differences, but still). We could try to imitate the default style, but I am not sure it is worth.
So how do you do when working with designers that just use a default button from the material android patterns and expect to have the exact size?
You consider size with margins? You create a background style? You try to imitate as much as you can the default button? others?
and this is the simple code used
<Button
android:layout_width="50dp"
android:layout_height="50dp"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/my_button_shape"/>

tha parameter margin is deferent then hight and width. margin determines the distance from point A to the button.
to et the height and width you can use in your xml file the following code:
example:
<Button
android:id = "#id/myButton"
android:layout_width = "50dp"
android:layout_hight = "50dp"
android:text = "test"
android:layout_marginTop = "100dp"
/>
the margin top 100dp determines that my button is 100dp from the top of my layout but the width and height determines the button size

The problem is 9-patch for the default button already includes a margin, so visually the button looks smaller than expected. Possible solutions include negative margins or duplicating the default 9-patch and removing the margin, but each option has its own drawbacks.
As #egonzal says, it would be interesting to know other developers solutions when facing the problem.

Increasing TextSize of TextView and then Decreasing It Doesn't return to normal height of view element

I'm fairly new to Android and would never have gotten as far as I am without this forum.
Here's my problem:
Am using a simple LinearLayout with an ImageView vertically positioned above a TextView. My goal is to display a series of screens with a images on the top and a short text caption on the bottom. The text is wrappable and the image should be scaled to fill the remaining available vertical space.
Everything works fine if I keep the text font size constant (I use .setTextSize(35) normally). The problem is that when I display an empty image, I choose to enlarge the text (.setTextSize(120)). That works OK..but then when I next display a subsequent image and revert to the text size to 35, there's a large unfilled gap between the bottom of the image and the top of the now smaller text area.
What appears to be happening is that using the larger text size once has somehow permanently increased the minimum height of the TextView. I've tried clearing the TextView (.setText("")..changing the size to very small (.setTextSize(12)...and endlessly fiddling with the LinearLayout parameters (weight, gravity)...to no avail. Any thoughts on how to fix this would be most welcome.
<ImageView android:id="#+id/img" android:layout_width="match_parent"
android:layout_height="0dp" android:layout_weight="1.0" android:layout_gravity="fill_vertical" android:contentDescription="#string/desc" />
<TextView android:id="#+id/caption" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_weight="0" android:layout_gravity="bottom"
android:gravity="center"/>

***Solution discovered after posting: Turns out that this is a known bug since Android 3.1. See Android:TextView height doesn't change after shrinking the font size.
Of the recommended solutions/workarounds listed there, the one that I'm liking is that every time you set text do:
setText("I am a Text",TextView.BufferType.SPANNABLE);
Or after resizing your text just do: setText(getText(),TextView.BufferType.SPANNABLE);

Whether this answer helps much or not, I think android:layout_weight="0" is redundant. A weight statement (say android:layout_weight="1") is also more usually accompanied by a android:layout_height="0dp" or android:layout_width="0dp", depending on the orientation of the containing LinearLayout.

Is there a way to perfectly center text?

I wanted to know if it was possible to create a custom TextView that centers text perfectly, no matter what the font is. That's my major issue right now, but I'm also wondering if it's possible to set the specific height using pixels so that the height would also be consistent.
This picture shows how different fonts are sized and centered. The longest black line in the picture is the middle of the white space. Letters in the picture are the same in every way except for the fonts. The text size is the same (text.setTextSize(TypedValue.COMPLEX_UNIT_PX, 450);), and they're all centered. I hope someone knows the answer to these questions! If you need any code from my app, just ask. Thanks!
EDIT: I am aware of android:gravity="veritcal_center", but that only works to an extent. What you see above is that implemented in the textview, but each font has a different center of gravity, so android:gravity="veritcal_center" wouldn't really make all of these center perfectly along the screen. I'm looking for a way to create a custom textView that somehow measures the height of text and centers it with those parameters. A suggestion by #vmironov in the comments works, but only if the textview has one character. I have not been able to mess around with his code, but I will when I get a chance and I'll post here if I find anything. Thanks!

A simple way to achieve what you want is to use following code:
<LinearLayout
android:layout_width="100dp"
android:layout_height="20dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/your_text" />
</LinearLayout>
set the height and width values of LinearLayout fixed if you want to set the text to be alligned in center within constant height and width

Set the gravity of the view to "center_vertical". Something like :
android:gravity="center_vertical"

You should be able to center your text by applying a gravity attribute to the containing TextView.
In XML you would assign an attribute to your TextView, which would look like this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="18sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/some_text" />
If you do want to specify a particular size for your text, it is strongly suggested you use SP (Scaled Pixels) as your unit of measurement, and not Pixels. You could also set an Appearance Attribute for your TextView to control the size, which is also shown in the code example.

ImageButtons Size and Placement not working in Eclipse

THE ISSUE:
I cannot seem to get my ImageButtons to appear in the right place or be the right size.
THE PLATFORM:
Eclipse with Android API 16
THE PROBLEM:
My RelativeLayout is 600x800 and my ImageButtons are 194x64, yet when I put them in the editor they are twice as big as they should be. See link to image.
My XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/main_portal_bg" >
<RelativeLayout
android1:layout_width="353dp"
android1:layout_height="758dp"
android1:layout_marginLeft="115dp"
android1:layout_marginTop="29dp"
android1:background="#000000" >
</RelativeLayout>
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_marginTop="89dp"
android1:contentDescription="#string/back_button_desc"
android1:background="#drawable/new_customer_button_selector" />
<ImageButton
android1:id="#+id/returning_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/returning_customer_button_selector" />
<ImageButton
android1:id="#+id/redeem_coupon_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/returning_customer_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/redeem_coupon_button_selector" />
<ImageButton
android1:id="#+id/info_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentLeft="true"
android1:layout_below="#+id/redeem_coupon_button_selector"
android1:contentDescription="#string/back_button_desc"
android1:src="#drawable/info_button_selector" />
</RelativeLayout>
THE RESEARCH:
I have tried to use ScaleType of FitXY, setting MaxHeight and MinHeight, and using android:background instead of android:src. The only way I have been able to make them smaller is by using the Graphical Editor to resize them by holding down SHIFT and dragging the bottom-right corner. That also unfortunately forces them to be automatically aligned to the bottom of the layout and when I try to move them they snap back to their original size and all the other buttons get shuffled around the layout. Editing the XML only gets me part of the way there.
THE QUESTIONS:
Every time I try to move a button in the Graphical Editor, all the other buttons get shuffled in a seemingly random pattern around the screen. Why does this happen?
I set a width of 194dp and a height of 64dp. Changing these values does nothing. Why doesm't this affect the actual width and height of my ImageButton?
When using the Graphical Editor to resize the button by holding SHIFT and dragging the corner, this doesn't change the width and height values in the XML, but just adds margins. See resulting XML below:
<ImageButton
android1:id="#+id/new_customer_button_selector"
android1:layout_width="194dp"
android1:layout_height="64dp"
android1:layout_alignParentBottom="true"
android1:layout_alignRight="#+id/returning_customer_button_selector"
android1:layout_marginBottom="408dp"
android1:layout_marginRight="86dp"
android1:layout_marginTop="89dp"
android1:background="#drawable/new_customer_button_selector"
android1:contentDescription="#string/back_button_desc" />
HERE IS MY FINAL GOAL:
Please tell me how I can get there. This simple thing should be easier.

After reading the information supplied at developer.android.com/guide/practices/screens_support.html, I now understand the 4 different types of screen density. Thanks CaseyB for that link.
I calculated my screen density at roughly 160, after using the utility I found at http://members.ping.de/~sven/dpi.html.
My problem was that the default AVD created by the AVD Manager has the LCD density set to 240 (high).
After setting it to 160, my project rendered with the buttons the correct size.
I left all my drawables in the drawables folder, since I am developing for 1 screen resolution and density. If I decided to use another tablet, then I might make use of the other folders.
TIP: Don't depend on the Eclipse Graphical Editor for asset alignment or sizing. I'm not sure its entirely accurate. I use the old edit the XML and run the project method when trying to adjust size and spacing.