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.

How to remove paddings in a 9-patch background for textview

I have a textview which has to use a 9-patch drawable as the background. But the 9-patch drawable has left and right paddings which make the background image not stretch properly to cover the whole text. I tried resetting the paddings for the textview itself but it doesn't fix the problem.
Would anyone have any idea how to make it work?
Thanks.

The black lines on the left and top defines the stretchable are, and those on the right and bottom marks the "content" area in a 9-patch image.
So, if you don't want padding means you want a full-length content area. You should mark full-width content area by drawing a full-length line at the bottom and right of the 9patch image.
In this image, the black lines on the right and bottom represent the content area. You can see the preview on the right side, and notice the content area in light blue color. You can fill the content area by extending the bottom and right lines.

Editing 9-patch file is not a good idea, because this method may deform the background image.
I used a trick to handle this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView"
android:layout_alignTop="#+id/textView"
android:background="#drawable/your_9_patch_image"/>
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="a custom text!"/>
</RelativeLayout>
I have set the 9-patch background drawable for a View behind my TextView in a RelativeLayout. So the there is no unwanted padding :)

Theoretically you cant really change the padding of 9 patch image programatically.
So you have two options:
1) Have several 9 patch images in your drawable folder for each resolution: drawable-hdpi, drawable-xhdpi etc
2) Embed a inner layout:
<RelativeLayout
android:background="#drawable/nine_patch_image_without_padding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_margin="10dp" // Your padding goes here
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="How you doing"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
It worked for me. I use the second options as it is simpler and quicker to use :)

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.

PopupWindow padding - too large

I have a PopupWindow that I am using in my Activity, and everything works fine except for the padding of the elements contained within the PopupWindow - it's much too large - literally taking up most of the small PopupWindows space. Here is the XML I use to define the PopupWindow:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/homescreen_popup_bg_levels">
<TextView
android:id="#+id/x"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#FF000000"
android:textSize="12dp">
</TextView>
<TextView
android:id="#+id/y"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12dp"
android:textColor="#FF000000">
</TextView>
</LinearLayout>
Here is a screenshot of the PopupWindow:
Any idea why the text is being padded down and to the right so much? I've tried adjusting the XML padding, etc but no luck.

Figured it out. The issue was indeed the padding of the 9-patch image - not including any meant the OS was guessing as to where to allow text, and pushing that text towards the center. Setting the padding element of the 9-patch images used for the background solved the issue.
Oh, and something else to note... when using a level list, it appears that Android is only looking at the padding of the first image that is loaded, then applying that to each and every image. As I am (was) using the levels to contain four asymmetric images (call-outs to the top left, right, bottom left, right), all of the images are getting the same padding, pixel for pixel, as the first one that gets loaded.
To solve this issue, I'm now simply setting the background image dynamically, rather than changing the level.

I would guess that your issue is the homescreen_popup_bg_levels drawable.
Try removing it and see what happens. If that's the issue, create a correct 9-patch.

Alignment weirdness in relativelayout with a background image

I have a 9 patch png in a RelativeLayout and everything looks great! However, when i create a textView in the RL, the textView is not at the top of the parent... I also tested this on the phone, same result... why does it do this?
Thanks for your assistance!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testLL"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/backrepeat"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="15dp"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#drawable/contentbox">
<TextView
android:text="Test"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
</RelativeLayout>
</LinearLayout>

In looking up how 9patches are rendered, it basically turns the non-stretchable areas into default layout padding. This is to facilitate easy entry of stuff into the target (stretchable) area, without having to go in and define paddings manually. By assigning a 9patch, you are using it's padding. It assigns paddings to top left right and bottom based on how many px the 9patch has until it reaches the stretchable center.
You may try doing something like android:paddingTop="-50px" in your textView and see what happens. I haven't tested this, so I'd be interested to see how it turns out.
Edit to your comment with pic: Since your 9patch's top stretchy region doesnt start for about 90 px, its automatically going to pad the first element 90 px down, to place it within the "stretchy target" region. Try my above suggestion to see how it works, I'm pretty interested to see how it turns out. I don't have my IDE accessible from my Mobile, otherwise I'd test it for you ;)
Edit: I apologize, I've been saying "padding" instead of margin. But the theory is the same. Not modifying the above for permanent documentation of my idiocy.