Develop Reference

Image scaling and positioning in ImageView inside AppWidget layout

NOTE problem solved... it was an issue in the bitmap itself and not the XML layout used to display it... see this comment. No need to read on unless you're curious!
When I set the content of an ImageView (N.B. inside an AppWidget layout) to a bitmap that is smaller than the physical pixel size of the ImageView, I'm sure that in the past (not sure how long ago) the bitmap would just get scaled up to fit... in my case the smaller image is exactly the same aspect ratio as the ImageView so this is exactly the effect I want.
But recently I noticed that this is no longer happening... the bitmap sits in the top left corner. I've tried setting various attributes in the XML layout, but nothing has any effect.
E.g. I've tried:
android:scaleType="fitCenter"
android:scaleType="centerInside"
android:layout_gravity="center"
But still the image sits in the ImageView flush with the top left corner, with gaps to right and bottom.
XML (ImageView part):
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView_port"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
The ImageView sits within a parent defined in the XML as:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/widget_margin"
android:id="#+id/widget" >
Code to put image content URI in appwidget:
remoteViews.setImageViewUri(imageViewId, uri);
appWidgetManager.partiallyUpdateAppWidget(appWidgetId, remoteViews);
How it looks for image with size that matches the widget imageview:
How it looks for an image that is smaller than the widget imageview:
I want the smaller image to be scaled up to fit the ImageView (it's the same aspect ratio, so it will fit perfectly).

try
android:scaleType="centerCrop"
OR
android:scaleType="fitXY"

How to put views on top of an ImageView, in relation to the ImageView's content size?

Background
Suppose I want to show an image of the something using an ImageView, and I want to put new views on top of it (animated ImageViews that show pins on a world map image, for example, or a Switch view on top of a smartphone image).
This means that no matter how the ImageView shows the image, the views should be in it, inside correct spot, with the same size as specified, or in a size related to the imageView itself
The problem
As opposed to other views, the ImageView can have a certain size, but its content is something else (to keep aspect ratio).
What I tried
I tried to use ConstraintLayout, but this can't really help, because the ImageView can change its size (for example when changing orientation), and thus ruining the position I've given the views compared to the ImageView.
I've found some libraries that can handle a similar thing (like here) and I even asked a similar question before (here), but all those solutions are for a static image within the ImageView, yet what I search for is adding a view on top of an ImageView.
The question
How do I put the views on top of the ImageView's content correctly?
How do I also scale the views down/up compared to the size of the ImageView's content ?
Can ConstraintLayout be used to change the scale of the views according to the ImageView's size ?

Make FrameLayout with wrap_content around ImageView. Then you could set SwitchView on top of ImageView. You could align it to center, side or corners and using margins to get some fine position.
It still won't scale with image, but you can get pretty good results. If that doesn't fit you, you can programatically get width/height of ImageView and alter position (or margins) of SwitchView accordingly.

With below you can manage width of switch or any other view as per image view width
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView"
<Switch
android:id="#+id/swi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/swi"
android:src="#drawable/download" />

In Java,
ImageView imgView = (ImageView) findViewById(R.id.imageView);
imageView.setBackgroundResource(R.drawable.yourDrawable);
int width = imgView.getDrawable().getIntrinsicWidth();
Switch switchKey = (Switch) findViewById(R.id.switchKey);
switchKey.setMinimumWidth(width);
And in XML, align it with alignLeft and alignRight with ImageView.

As far as i get it, you need the image size displayed inside the image view and set that as the max width of your switch view right?
You need both Java and XML for this,
The XML file is basically as RelativeLayout with the view stacked as needed.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/nonet_icon"
android:id="#+id/iconView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:id="#+id/switchView"/>
</RelativeLayout>
And the Java Code gets the imageWidth and sets it to the SwitchView.
mSwitchCompat.setVisibility(View.VISIBLE);
// 20% x 25% of Content in ImageView
final float x = mImageView.getDrawable().getIntrinsicWidth()*.2f;
final float y = mImageView.getDrawable().getIntrinsicHeight()*.25f;
// waiting for the view to be drawn
mSwitchCompat.post(new Runnable() {
#Override
public void run() {
// scale current view W.r.t. x and y values
mSwitchCompat.setScaleX((float)mSwitchCompat.getWidth()/x);
mSwitchCompat.setScaleY((float)mSwitchCompat.getHeight()/y);
}
});
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT);
// 30% x 35% of content, for location
int xMargin = Math.round(mImageView.getDrawable().getIntrinsicWidth()*.3f);
int yMargin = Math.round(mImageView.getDrawable().getIntrinsicHeight()*.35f);
// set margin values, can optionally add for top and bottom
layoutParams.setMargins(xMargin,0,yMargin,0);
mSwitchCompat.setLayoutParams(layoutParams);
Ref: Getting Displayed image size of an ImageView
Trying to get the display size of an image in an ImageView
Ref: Dynamic size values
Do comment if you need a detailed explaination.
Example: Check this image!
Scaled View on Image: Scaled View on Image!

You can use MarginLayoutParams with Relative Layout to set left and top position in ImageView.
image = (ImageView) findViewById(R.id.imageID);
MarginLayoutParams marginParams = new MarginLayoutParams(image.getLayoutParams());
marginParams.setMargins(left_margin, top_margin, right_margin, bottom_margin);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
image.setLayoutParams(layoutParams);
find complete information for this in below link :
MarginLayoutParams

Try this, may be it will help you.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/semi_transparent"
android:layout_margin="#dimen/spacing_small"
android:layout_alignTop="#+id/img_background"
android:layout_alignBottom="#id/img_background">
//this layout will expand according to your image size
</RelativeLayout>
</RelativeLayout>

Do you want to show switch that lay on imageview ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_download"
android:layout_width="100dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:orientation="vertical">
<ImageView
android:src="#android:drawable/btn_star_big_on"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Switch
android:id="#+id/mySwitch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Switch" />
</RelativeLayout>

Android ImageView scaling conflict

I am creating ImageView in code:
ImageView vlogo = new ImageView(v.getContext());
RelativeLayout.LayoutParams vlogoParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
vlogoParams.addRule(RelativeLayout.ALIGN_TOP,tv_visitor.getId());
vlogoParams.addRule(RelativeLayout.ALIGN_LEFT, tv_visitor.getId());
vlogoParams.addRule(RelativeLayout.ALIGN_BOTTOM, tv_visitor.getId());
vlogo.setLayoutParams(vlogoParams);
vlogo.setImageResource(R.drawable.star);
rl.addView(vlogo);
The image is "scaled" by aligning it to TOP and BOTTOM of previously created tv_visitor view (that has been added to relative layout). But I asume that it isn't layedout yet(?). .requestLayout just before this code doesn't change a thing.
By doing that I'm setting ImageView's height to the height of tv_visitor view. Which is OK. However the width seems to stay original.
And here comes the problem. The width stays not scaled. The way I do that is making .setAdjustViewBounds(true); not working. How should I proceed then?
As requested in comments I provide more info:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/news_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000"
android:scrollbars="none">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragment_news2">
<View
android:id="#+id/anchor_n"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffbb00"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
</ScrollView>
The View is passed as an parameter and layout is gotten by:
RelativeLayout rl = (RelativeLayout) v.findViewById(R.id.fragment_news2);

The problem is due to the scaling of Imageview, since by default imageview is using ImageView.ScaleType.FIT_CENTER. As per the documentation FIT_CENTER performs the following operation:
Compute a scale that will maintain the original src aspect ratio, but
will also ensure that src fits entirely inside dst. At least one axis
(X or Y) will fit exactly. The result is centered inside dst.
Since the Image is resized and centered, you are seeing extra spaces on both left and right side. To avoid that set ScaleType to ImageView.ScaleType.FIT_END which in turn aligns the result to the right will solve the problem.
vlogo.setScaleType(ImageView.ScaleType.FIT_END);

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);

align view to a scaled ImageView

i have this problem frequently, and I refuse to believe that it can't be solved without creating a custom layout:
How do you align a view with an ImageView that get scaled to match it's parent bounds but keeps the aspect ratio ( scale type is anything but fitXY ). I was under the assumption that f you set adjustViewBounds to true, the view bounds get adjusted to match the actual size of the image ("Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable."). But that is not the case. And it doesn't make and difference if the image has to get scaled up or down to fit its bounds.
Take a look at this layout:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/square" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:text="#string/hello_world" />
</RelativeLayout>
This layout looks like this:
As you can see the bounds do not get adjusted and the TextView is aligned to the incorrect bounds. I created a custom Layout to creates the proper bounds, but maybe I'm missing something and it should be possible using the standard layout features...
EDIT: to clarify: i'm looking for a way to align the TextView with the actual image. that is with the red square in the given example.

Ok, so it's been three years and you probably figured this out long ago. But you were halfway there when you specified adjustviewBounds=true. You just needed to change the ImageView layout width and height to wrap_content at the same time.
Your TextView IS aligning to your ImageView just as you requested. If you were to give your ImageView a background color you would see that it occupies the same area as your TextView. It's just that the actual image is centered within the view as you requested.
And you can continue to use scaleType=fitCenter or centerInside depending upon what you want. Neither will crop or stretch the image and your TextView will remain aligned.

What if you use - android:scaleType="centerCrop" on the ImageView?
The image will be cropped to cover the entire layout, but the aspect ratio will be maintained.