Scale Imageview nicely - android

The idea is to either display a photo or - if none is defined - a small icon symbolizing it.
I have defined the following ImageView in the layout:
<ImageView
android:id="#+id/imgPic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#+string/strImgPic"
android:paddingRight="10dip"
android:paddingTop="10dip"
android:saveEnabled="false"
android:src="#drawable/pic_icon" />
So the ImageView is pre-initialized with the 'icon' PNG.
The code to load it:
try {
imgURL = vinfo.getString("mainpic_url");
if (imgURL.length() > 1) {
imgURL = getString(R.string.urlPicsFull) + imgURL;
ImageView imgPic = (ImageView) findViewById(R.id.imgPic);
ImageDownloader img = new ImageDownloader();
img.download(imgURL, imgPic);
}
} catch (..) {
(..)
ImageDownloader() basically does nothing else than retrieving the image asynchronously. The problem however is that if there is NO image ( imgURL.length()==0 ) , the icon is displayed with a very large 'border' in the middle of an empty square in the layout.
I would like the image to be scaled down (or up) to the width of the parent view, but the icon to display as it is (about 90 dip wide and high).
Any suggestion on how to realize that?

Check out the android:scaleType tag of the ImageView. For your case if you add
android:scaleType="fitXY"
in your ImageView definition in the layout, and the image will be adjusted to your ImageView size. Something like this:
<ImageView
android:id="#+id/imgPic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#+string/strImgPic"
android:paddingRight="10dip"
android:scaleType="fitXY"
android:paddingTop="10dip"
android:saveEnabled="false"
android:src="#drawable/pic_icon" />
However this will not maintain the aspect ratio so the image may be distorted. If you do not want that, check the other values that the android:scaleType tag can take in the link provided.

Related

Resize the image user inputted into the ImageView

So I have an ImageView which will retrieve the image from the database to show it on the program. However, I want the image retrieved to be resized to a specific height and width (thus it shall not fill the whole screen)
I want it's width to be 150dp, whereas its height to be 230dp.
However, the image that is in the database may be null, and as such, we can not set the ImageView's height and width, else there will be empty space on the layout.
So, how can I resize the image?
Following are my current codes:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center"
android:id="#+id/Img" />
use scale type fitXY
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:scaleType="fitXY"
android:layout_gravity="center"
android:id="#+id/Img" />
If you're open to use Picasso, you can easily resize your image like this:
Picasso
.with(context)
.load(image)
.resize(150, 230)
.into(imageView);
There are many other possibilities, you can check it here:
https://futurestud.io/tutorials/picasso-image-resizing-scaling-and-fit
First create values in your dimens.xml file:
<dimen name="imageview_width">150dp</dimen>
<dimen name="imageview_height">230dp</dimen>
Then, in your code where you handle the images received from the db:
if(image != null){
imageview.getLayoutParams().height = (int) getResources().getDimension(R.dimen.imageview_height);
imageview.getLayoutParams().width = (int) getResources().getDimension(R.dimen.imageview_width);
imageview.setimagedrawable(img); // or any way that suits you.
}
This way you can translate the dp values to pixel values and can change the imageview size programmatically after it was inflated from xml.
Im not sure to understand your needs. But if you want a view to resize to 150x230 you need to use rajahsekar's answers. But if you also want your Imaview to take no place if the Image is null in DB you can set programatically :
imageView.setVisibility(View.GONE)

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>

Is it possible to display original image in android without fit to device views?

I have an Image of size 1000px*1200px and i want it to be displayed without being scaled!.
I have searched in stackover flow and google i am not getting good one.
I want full image without scaled,
I have tried like this
Step1:-
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image"
/>
Step2:-
I have tried with scaleType also
add a scaleType to your ImageView
<ImageView
android:scaleType="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image" />
But this is also not working,
In sclate type i have tried with all possible properties (matrix,fitXY like this).
is there any possibility there for doing to dispaly original image in android?
Plz help me on this
You can try this approach,first get image from drawable and create a bitmap of it.Then get width and height of bitmap, resize your image view and then display image in it.It will create imageview with your original image size.
See below code -
BitmapDrawable bitmap = (BitmapDrawable) this.getResources().getDrawable(R.drawable.icon);
int bitmapHeight= bitmap .getBitmap().getHeight();
int bitmapWidth = bitmap .getBitmap().getWidth();
Now you have dimension of your original image.
Re-size image view -
ImageView imageView = (ImageView) findViewById(R.id.my_image_view);
imageView.getLayoutParams().height = bitmapHeight;
imageView.getLayoutParams().width = bitmapWidth;
and in last step set bitmap to your image view -
imageView.setImageBitmap(bitmap);
Hope it will help you.
EDITED
Use below code after resize image view -
replace - `imageView.setImageBitmap(bitmap);`
by
imageView.setImageResource(R.drawable.icon);
By your comments, I think what you need is a library like PhotoView.Hope it can help you
Although I would highly condemn such UX but whatever works for you.
1) Use the following link to make a two dimensional scroll.
Two dimensional scrolling... a suggestion that needs feedback
2) Add an imageview to the same and set your image dimensions for the imageview in px at runtime.
as far as i understand your question is that u want natural size of image without ImageView tag modifying it. This worked for me
<LinearLayout
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/image_here"
android:orientation="horizontal|vertical"/>
let me know in the comments.
Make your image layout width and height to wrap content. Make scaleType centre. Check your device width and height through device manager then give image height and width in %
After many trails i have find a solution for above question.
Here is the code:
MainActivity:-
public class MainActivity extends ActionBarActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = (ImageView) this.findViewById(R.id.imageview);
}
}
activity_main.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="#+id/ScrollView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none"
xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView android:id="#+id/HorizontalScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/imageview"
android:src="#drawable/desert"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:adjustViewBounds="true">
</ImageView>
</HorizontalScrollView>
</ScrollView>
This is working perfectly for my requirement.
Hope this helps to others.

How to set bitmap according to the image size?

I am trying to set bitmap to imagebutton but image size change
My Image xml is
<ImageButton
android:id="#+id/button_ChoosePicFIrst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/choose_pic"
android:tag="PIC1" />
i want to set image size accoring to the "#drawable/choose_pic" size
after choosing image from gallery i am convertin it to bitmap and it change the imagebutton size please give me some solution ?
//for that use ImageView with src
<ImageView
android:id="#+id/button_ChoosePicFIrst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="#drawable/choose_pic"
android:tag="PIC1" />
As you are using ImageButton you need to set your image in property android:src="" not as background of your ImageButton.
So set your image in src property and remove background as below:
<ImageView
android:id="#+id/button_ChoosePicFIrst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="#drawable/choose_pic"
android:tag="PIC1" />
EDITED:
Difference between android:background" and android:src"
android:background exists for all the view. As the name suggests this is what is going to be there in the background.
android:src exists for ImageViews and its subclasses. You can think of this as the foreground. Because ImageView is a subclass of View you even have android:background for that.
If you set an image to be the background of your ImageView, then the image will scale to whatever size the ImageView is. Other than that, src is a foreground image and background is a background image.
The src to an ImageView has additional features:
different scaling types
adjustViewBounds for setting bounds to match image dimensions
some transformations such as alpha-setting
And more that you may find in the docs.

ImageView re-size while setting Image after Cropping

I follow this http://www.androidhub4you.com/2012/07/how-to-crop-image-from-camera-and.html to crop image.
I have 4-5 ImageView in a collage frame.In All Imageview i have set a default image.On click on particular imageview, I am selecting Image from gallery then crop the Image. Now I have to set the cropped Image in my ImageView. So after setting the cropped Image my ImageView get re-size, and because of it other ImageView's size also differ. I want while i am setting the cropped image in Imageview my ImageView must not re-size.
The size of resulted cropped Image may different so I took the ImageView Size before cropping, And after cropping I am scaling result bitmap as the same size of my Image view.
Coding sample is given blow.
I am getting height and width of my Imageview like this
viewhight = tempView.getMeasuredHeight();
viewWidth = tempView.getMeasuredWidth();
After cropping Image I scaled Image according to height and width of my view like this
Bitmap photobitmap1 = Bitmap.createScaledBitmap(photobitmap, viewWidth,viewhight, true);
After this i changed it into drawable like this and set it on my Imageview.
Drawable drawble = new BitmapDrawable(getResources(),photobitmap1);
tempView.setBackground(drawble);
but on setting the hight and width of my view get resized and because of this near Image view also get resized why I don't know.because i converted my imageview in the same size of view.
I also tried this to scale bitmap :
Bitmap photobitmap1 = Bitmap.createScaledBitmap(photobitmap, (viewWidth-30), (viewhight-30), true);
and this to set bitmap :
tempView.setImageBitmap(photobitmap1);
tempView.setBackgroundColor(Color.TRANSPARENT);
but nothing worked.
my xml code is like this:
<LinearLayout
android:id="#+id/fst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/frame"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="85dp"
android:paddingRight="85dp"
android:paddingTop="10dp"
>
<ImageView
android:id="#+id/viw_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="2.5dp"
android:layout_weight="1"
android:background="#drawable/rec"
/>
<ImageView
android:id="#+id/viw_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="2.5dp"
android:background="#drawable/rec"
/>
</LinearLayout>
can any one help me please .....
Are you setting a fixed height and width for the imageview in the XML ?
Example:
<ImageView
android:layoutWidth="60dp"
android:layoutHeight="60dp" />

Categories

Resources