Develop Reference

How to show a background image resized into ImageButton size?

I have a multi level LinearLayout to show 4x6 ImageButtons for an advent calendar. But when I want to set the background of the ImageButton, it is too big. How can I set the image background to fit the ImageButton size? I want to show 24 pieces of present boxes in a nice grid.
<ImageButton
android:id="#+id/buttonOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="25"
android:background="#drawable/present"
android:fontFamily="#font/christmas"
android:onClick="playOne"
android:text="1"
android:textColor="#android:color/white"
android:textSize="#dimen/button_text_size" />

I think that what you want to do can be done changing/adding 2 things:
Its an ImageButton, so dont use the android:background property, but the android:src with the same drawable
Then add the property android:adjustViewBounds="true" which basically adjusts the image to fit the view while maintaining aspect ratio
I think that should do the trick, else you can also try
Use the android:scaleType property, I would try using fitXY but here are all the possible scale types: https://developer.android.com/reference/android/widget/ImageView.ScaleType
EDIT: Also, you might need to change your width and height properties, either specify a size in dp, use constraints, or wrap your ImageButtons in a GridLayout

How to put an ImageView relative to a background image in Android Studio

For my GUI i use the RelativeLayout and want to keep it as it is the best for different screeen resolutions.
For example i have this Background, where i want to put an ImageView exactly over the TV-screen (to show some pictures on the TV).
I want this to work in different screen resolutions.
How can i achieve this? Or is this even possible? Examples are welcome :)
My Background Image:

If I were you, I would separate the TV image from the background and make it a new ImageView. Then you can set the position of TV-Screen ImageView regarding to the TV ImageView.

Well i think you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_launcher"></RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:src="#drawable/ic_launcher"
android:layout_alignTop="#+id/back"
android:layout_alignRight="#+id/back"/>
</RelativeLayout>
But i think there could be an issue with different resolution try this and let me know if it worked.

You can have your TV as a PNG. Carve out the screen from this image. This will make the TV image TRANSPARENT for the screen(red outlined portion)
Next, your images/screen-slides must be exactly same as the TV image in terms of width and height. However, the actual content of the image/screen-slides must only be in the hollow portion.

I think i figured out how to do this.
At first i changed the background-picture from a Layout-Background to an ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:src="#drawable/background1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="fitXY" />
Then i can set the TV-image relative to the Background-ImageView's f.e. top and right margin. (looks hardcoded like this)
<ImageView
android:layout_width="125dp"
android:layout_height="85dp"
android:id="#+id/imageView1"
android:src="#drawable/tvImage"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="44dp"
android:layout_marginRight="169dp"
android:layout_marginEnd="169dp"
android:scaleType="fitXY" />
Basically there are now two things i have handle, to make the TV-image fit when changing the screen resolution:
1) the width and height of the picture.
2) the position of the picture.
To find out 1):
My Background is f.e. 500x250dp.
In an Image program i measured the size i need for the TV-image: 125x85dp.
Now i can calculate the width and height back depending on the background size.
500/125 = 4 for width calculation
250/85 = 2,9 for height calculation
So if the Screen changes for example to 800x400dp the width and height for the TV-image an be calculated like this:
800 / 4 = 200dp
400 / 2,9 = 137dp
So my TV-image should have a size of 200x137
To find out 2)
Again i have to calculate like in Point 1). Find out the position of the TV-screen and then set the layout margins according to the calcualtions. I havent implemented this point yet, so i can't explain more, but i think you get what i want to say. If not feel free to ask :)
And in the end, i can setup the TV-image with this code (hardcoded values should be the calculated variables!)
RelativeLayout.LayoutParams layoutPar = (RelativeLayout.LayoutParams) tvImage.getLayoutParams();
layoutPar.setMargins(0,88,210,0); // or whatever
layoutPar.height = 137;
layoutPar.width = 250;
tvImage.setLayoutParams(layoutPar);

Android: How do I align textview on a image background that dos not strech in xml

Ok here is the problem...
I have a image background that need some text and additional graphics on it. The background image needs to be in the center of the screen and may not stretch. Here is what i need to do:
The problem is that i need to align the text to the background image.
I've tried to wrap it all into a relative layout - something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bg_image"
android:layout_centerInParent="true"
android:src="#drawable/member_card"/>
<TextView
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:text="#string/membercard_info"
android:layout_marginTop="40dp"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:layout_marginTop="200dp"
/>
</RelativeLayout>
This will not work since android adds additional padding to the image to avoid it from stretching.
Here is what happens in two different cases:
So how do I align the text to the background image?
I've solved this problem in the past in code by baking it all into one image,- but would like to do this in xml.

If you want to remove padding, you can use manually set it. However, if you want overlapping elements, you generally want to use FrameLayout. Look here: http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
Set a gravity inside the frame layout to align it.

if you want an ImageView with additional layers drawn on top of that, see this thread: How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?

There a padding around the image because you set the imageView size to fill its parent ( using match_parent )
You should try to set it to wrap its content :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
EDIT : If your picture is bigger that the screen size, you need to have it scaled keeping the aspect ratio.
To do this, use match_parent in vertical with a scaleType to FIT_CENTER
and keep the wrap_content setting for the width ( since we want the image view left/right bounds stuck to the image content )
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
.../>
Is this better ?

standard text and image size in android listview

Hi
I am reading XML from web and displaying them in a listview. The xml contain an image location so I am displaying the image as well along with text.
The image size is 48*48 px as suggested here. But when I see the list view in actual device, the image looks very small. Any idea about how to make that image a little bit big?? is there any standard image and text size??
This is my layout:-
<ImageView
android:id="#+id/logo"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/name"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#2B2B2B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:layout_toRightOf="#id/logo"
/>

use dip instead of px. when you use dip, it appears more adjustable and good on different screens.

Use an ImageView like this:
Modify the width and height values to your liking, but use the dip measurement. With the scaleType property you can tell the framework to stretch your image.

Try adding
android:scaleType="center"
to your ImageView XML. This will not scale your image, but center it in your view.

It's bad practice on Android to declare layout size by pixels. This page is straight from Google on the subject: http://developer.android.com/guide/practices/screens_support.html I would do something like this
android:layout_height="wrap_content"
android:layout_width="fill_parent"
and see how that looks. Don't forget to test on multiple screen sizes before you finish. You can do that by creating different AVDs for the emulator.
You can use pixels if you really want to, but remember that its going to look different on different devices.
android:layout_height="96dip"
android:layout_width="fill_parent"

Expand clickable area of an ImageView by using padding?

I have an ImageView, and I want it to be clickable. The image itself is only 32x32 pixels, but I want the clickable region to be larger so it's easier to hit. I was hoping I could set the layout margin values to increase the size of the imageview's clickable area:
<ImageView
layout_width="32dip"
layout_height="32dip"
layout_margin="20dip" />
That doesn't work, what I could do is just recreate the image resource to have a larger transparent region around it. That's a bit annoying because it's hard to tweak if I ever need to change the clickable region. It's not just a single png either, it's a statelistdrawable so I have to resize 3 different pngs if I ever need to tweak the clickable area.
Anything else I can do?
Thanks

Use padding. layout margins are used if for inserting space outside the boundary of the view.
for equal padding on all sides
<ImageView
android:padding="20dip" />
or to set the padding on each side
<ImageView
android:paddingLeft="10dip"
android:paddingRight="15dip"
android:paddingTop="23dip"
android:paddingBottom="12dip" />
Hope that helps !

Instead of resizing the image (Peter Knego's answer) or increasing padding (Saimon's answer) I suggest to set the minWidth and minHeight attributes in combination with scaleType="center":
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="40dp"
android:minHeight="40dp"
android:scaleType="center"
android:src="#drawable/your_image" />
That makes sure that small images have at least a size of 40x40dp while the image is not up-scaled if it's smaller. If one day the image is going to be replaced with another image larger than minWidth and minHeight it will not grow larger than 40x40dp as it gets downscaled. Thus a minimum clickable dimension of 40x40dp is always guaranted and the image is always displayed nicely.

Suggestions (never tried it myself):
Create ImageView as large as you want than put image into it without scaling
ImageView.setScaleType(ImageView.ScaleType.CENTER).
Brute force approach: create new larger png that has original image centered and the rest of it is transparent.

Use like below; where width/height is your touch radius
<ImageView
android:id="#+id/editProfile"
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="8dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_edit"
android:scaleType="fitCenter"
/>
In the above code, I wanted my src size to be viewed as 24dp width/height. And touch radius of 32dp. so I had used padding of 8dp.