Develop Reference

Android resize ImageView with gravity=Left

I've an imageview with an icon on background, instead of generating all diferent sizes of icons for diferent sizes of screen i'm using only a big one and resizing it to fit the size I want.
If I set the layout_height to any value android automatically resize the width to keep aspect ratio (what is good) but the placeholder keeps the original width and the new resized icon is centered in the space it was supposed to fit
To demonstrate the situation i took this print
both left and right icons have the same dimension in original file
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:foregroundGravity="left"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
setting only the imageview height and is it possible to make it resizes keeping gravity on left? (as in the print bellow)

It is quite simple.
Set your parent layout height as desired and its children height to "match_parent"
You can use "dimen.xml" files to control different sized screen dimensions, for now i have put a static value of "64dp" android:layout_height="64dp"
<RelativeLayout
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_left_thumb" />
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/ic_right_thumb" />
</RelativeLayout>

The answer was pretty easy... there is an property on ImageView that tells android how to deal when it needs to scale the image:
android:scaleType
so setting it properly i've
<ImageView
android:id="#+id/leftThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/ic_left_thumb"
/>
<ImageView
android:id="#+id/rightThumb"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitEnd"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_right_thumb" />
In this way, instead of fitting the icon at the center of the spaceholder, it's is going to adjust to the edges

android ImageButton do not stretch image

How can I prevent the ImageButton from stretching the image?
Using this snippet:
<ImageButton
android:src="#drawable/prediction"
android:background="?android:attr/selectableItemBackground"
android:gravity="center_horizontal"
android:scaleType="centerInside"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:contentDescription="some description"
android:text="#string/predict"
local:MvxBind="Click ExecuteQueryCmd" />
I get the following effect:
Image is 64x64 png.
All I want is for the ImageButton to respect native width and length, hence resolution, of the image it is being assigned. Recommendations based on a similar post is to use a Button, set its background to an image then use custom selectors but this sounds like a hack. Or is this the proper way to do this?

It work for me with
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="some description"
android:scaleType="centerInside"
android:src="#drawable/ci_icon"
android:text="#string/predict"
local:MvxBind="Click ExecuteQueryCmd" />
Put your image in android:src attribute

Set the width of the ImageButtons to fill_parent and use scaletype fitStart for the images that hug the left margin, and fitEnd for the ones on the right. Should do the trick, at least as far as your example image goes. You may have some spacing issues if the proportional width of the images exceed the screen width, but it should work for you.

Do this:
<ImageButton
android:src="#drawable/prediction"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:contentDescription="some description"
android:text="#string/predict"
local:MvxBind="Click ExecuteQueryCmd" />

Remove white border around an ImageView

My designer keeps adding a little padding around my image.
I want the image the stick on the top and to fill out the width of the screen.
Here's a screenshot from the designer:
This is my XML code:
<ImageView
android:id="#+id/markertap_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/header_bootsverleih_xhdpi" />

It looks like the image is larger than the screen width, so it's getting scaled down after sizing. Try adding android:adjustViewBounds="true" to your ImageView.

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:cropToPadding="false"
android:scaleType="fitXY" />
Experienced the same when I used an ImageView for Splashscreen, this^ worked for me.

you might want to add it your image view only this.
It fixed my problem.
android:paddingVertical="0dp"
android:paddingHorizontal="0dp"

How to correctly position android layout without using Absolute Layout?

im sorry this is a noob question but i suck at layouting. How would i make a layout that positions the flashlight_button so it would preserve the ratio between imageviews on top and bottom.
It looks okay on nexus s (800x480), thats what i want
...image ...
but obviously when i switch to galaxy nexus (1280 x 720), it moves the middle button a bit to the top, like this (so it doesnt preserve the ratio between top and bottom margins as designed on nexus s)
...image...
The layout is here:
<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"
android:background="#drawable/background"
android:padding="20dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/ad_button"
android:layout_centerHorizontal="true"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
so it just anchors the top and bottom imageviews to parent edges, and the middle button is just pushed down using layout_maginBottom. I am providing scaled images for different densities and obviously density pixels to express size, so as it seems it just not enough on a bigger screen.
Whats the correct way to do this? Different .xml files or .. ?
//Sorry i cant still post images, hope you can imagine it.

Have you considered placing your flashlight image according to the parent's center?
So for now you are pushing flashlight image down (according to the top image position). Would it be more accurate to make flashlight image center-aligned and give it some bottom margin (to push it a bit higher according to your design).

Android layout and scaling ImageView issue

I am trying to achieve something that on the face of it I thought would be easy but have researched loads and still struggling.
I am setting an ImageView that will act as a background where parts of the image are areas that buttons should sit on top. For example the background looks a bit like this:
This is set to fitCenter so that it scales with the correct aspect ratio on all screen types like this:
Now I am trying to place ImageButtons over the white areas like so:
I am trying this by aligning each Imagebutton to the top left of the background imageView and then setting margins to aset it in the right place. This works for some screen types, but when the background gets resized because the device is smaller than the background image for example I am finding that the buttons on top dont resize with it so I get the effect like the following:
Here is the type of layout I am trying (with just one button here):
<RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/outer" xmlns:tools="http://schemas.android.com/tools">
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageView1" android:src="#drawable/no_pills_pane" android:scaleType="fitCenter" android:adjustViewBounds="true" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/imageButton1" android:src="#drawable/pill_pink" android:scaleType="fitXY" android:background="#null" android:layout_marginTop="50dp" android:layout_marginLeft="44dp" android:layout_alignTop="#id/imageView1" android:layout_alignLeft="#id/imageView1"/>
</RelativeLayout>
I'm sure there must be an easier way to go about this, any help would be greatly appreciated.
Thanks
Simon

If all you need is to center ImageButton within ImageView, simply set alignBottom, alignLeft, alignRight, alignTop to ImageView
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"