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)
Related
I have a standard image in my app for every song that doesnt have an album cover. Now, for the few that do have in there metas saved an album cover I want to replace the "standart" image.
The problem however is, that the new image changes the size of my layout. It basically now adjusts to the new images' dimensions. I wish that would not be the case. I simply want to replace my old image with a new one ( both are circles ) without altering the size at all.
This didnt work for me:
vh.CoverArt.SetImageBitmap(output);
Thanks for your help! :)
Sure:
<ImageView
android:paddingTop="5dp"
android:src="#drawable/btn_musicalnote"
android:id="#+id/musical_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp" />
When you use wrap content then your view will expand according to the size of resource dimensions you use. In your case ( Imageview size will increase or decrease according to the size of image you use in it.)
To set a fix size of your imageview define height and width attributes manually. For example below code will produce an imageview of size 40X40 dp.
<ImageView
android:paddingTop="5dp"
android:src="#drawable/btn_musicalnote"
android:id="#+id/musical_note"
android:layout_width="40dp"
android:layout_height="40dp"
android:paddingBottom="5dp" />
You can change height and width attributes according to your need.
I have an ImageView in my xml -
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
I am using Glide library to fetch image from an url and set that into the ImageView.
All i want is to match the width of image with parent width and then adjust the height of image without affecting the aspect ratio.
if the image dimension is very less, it should be expanded to match parent width and if image dimension are more than screen size it should be shrinked to match parent width.
ImageView img = (ImageView) findViewById("image");
Glide.with(this).load("url here").into(img);
Which scaleType should i use ?
Is it possible in XML or it needs java code ?
Thanks in advance. :)
It is possible from the xml. I achieved it using the following code.
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"/>
Scale XY scales the image using FILL and adjust view bounds preserves the aspect ratio.
I do not think you need center horizontal property.
After this I called a photo loader library to just download the image into the image view.
It helps me. Just use in imageView xml
android:adjustViewBounds="true"
And add override in glide:
GlideApp.with(context)
.load(url)
.override(Resources.getSystem().getDisplayMetrics().widthPixels)
.into(imageView)
use android:scaleType:fitXY
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
and java code
Glide.with(this).load(url)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(img);
You may use ConstraintLayout for this purpose.
You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to "match constraints" (0dp)
As quoted from android developers. Also you can refer this medium article for reference on how to achieve this ratio thing.
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.
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);
I am loading an image from the web with a AsyncTask class and set it to a imageview in my code.
// loading of the image into the ImageView
new DownloadImageTask(MyImageView).execute("ImageURL");
the problem is, every time I load an image, the height of it is different, even though the width and height of the ImageView is warp_content.
I added sort of a border line with the Background and padding to see the actual height of it.
Here is the xml
<ImageView
android:id="#+id/ivBigRecipeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/ingredientsTitle"
android:background="#52D017"
android:contentDescription="food"
android:padding="1dp" />
in here are the pics
sometimes this happens:
and sometimes this happens:
Any ideas? I want to just have it exactly the actual size of it
thanks!
Try to add android:adjustViewBounds="true" to your ImageView, and it should work.