Develop Reference

ImageButton resizes automatically in gridlayout

I'm asking this (propably) pretty easy question since I can't figure it out by myself and googling in for more then an Hour doesn't give me proper results.
So the question is: How can I make my items(generally those are only 16 image buttons) so they can stay in scale (comparing to gridlayout) when my picture is really large (So in short way: I load 16xImages as src on buttonImages, each Image is 640x640, and I want to have those 16 buttons in grid layout scaled comparing to grid layout width/height and column/row count). I hope this is possible to write in XML since I don't want to refactor my java code :/
Ps. I'm newbie to Android programmig
Ps2.Here is my GridLayout with button example , but it's completly wrong :/
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="4"
tools:context=".GridXMLActivity"
android:layout_below="#+id/Tx1"
android:layout_above="#+id/restart"
android:layout_marginBottom="50sp"
android:layout_marginTop="50sp"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/clear"
android:id="#+id/But1"
android:scaleType="fitXY"
android:onClick="but1"
/>
[EDIT]
I've even made such layout , but there are some problems. 1st is that my grid layout doesn't scale at all!(So when I take screen with lower or higher resolution it won't fit). That's why I wanted to make this button some kind of resizeable (in this screen each button has width and height at 60sp which I know it shouldn't)
Another problem is that I'm working on button backgrounds and I wanted to make it src.
Genereally I want to achive same thing like on the screen , but making it other/more flexible way (So the resolution and orientation won't affect my gui and sizes of it's element). If you need whole XML file I'll post it here but it's a bit mess since I've copy-paste 16 times Image Button

If you want something to scale, keeping aspect ratio and you have one dimension set to match_parent, the other must be wrap_content.
So, presuming you want the button to always fit the width but stay at the correct aspect:
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
To make all items fit in grid rather than all items fit their images, you should use weight. Weight with grid layout requires the support library before API21
<GridLayout ...
android:columnCount="2">
<ImageButton
app:layout_gravity="fill"
app:layout_columnWeight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
... />
...

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.

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.

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.

Apply scale to layout in android

I have a RelativeLayout which currently has a fixed size. Widths, heights, margins, font heights of child views are specified so everything looks just right.
I now want to scale the layout (to fit screen size). The layout should scale as if it was a flat image, so everything gets smaller in proportion (fonts, margins etc.)
I made a simplified example, below. Scaled to 0.5, this would display the text "ONE QUARTER" with margin left 200dip and margin top 120dip.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="1600dip"
android:layout_height="960dip"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:text="ONE QUARTER"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dip"
android:layout_marginTop="240dip"
></TextView>
</RelativeLayout>
Of course, I'm not asking anyone to help me hand code an algorithm to scale all these values: just wondering if there's some simple way to achieve this...
Thanks!

If you just want your app to look ok on another device then specifying things in dip and sp should do the trick.
If you actually want to shrink or expand the scale of your app on the same device then you would have to do it manually, perhaps using themes or styles.