As the title suggest, I am having a lot of issues maintaining the quality and aspect ratio of my images on my android application.
Basically I have an image view and I am trying to get images to fit the image view and maintain it's image quality. I cant use fitxy because that will stretch the image to fill the entire imageview, but I only desire the image to automatically scale it's self and show as crisp as possible like your phone gallery.
In my code, I use fitCenter as the scale type and the size of the image seems alright, however the image is terrible distorted. This is the code.
Ive also included a snapshot of the android and iphone version to show how the exact same image is showing differently on the same image.
<?xml version="1.0" encoding="utf-8"?>
<!-- This controls layout for the slider in Gallery -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pagerimage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
/>
</RelativeLayout>
</LinearLayout>
iPhone
Android
public void handleGalleryImages() {
try {
for (int j = 0; j < imagesNaturalItemlist.size(); j++) {
Log.e("ImagePATH>>>>>", imagesNaturalItemlist.get(j).getImage());
String imageid = imagesNaturalItemlist.get(j).getUniqueId();
downgalleryimage = new DownloadImage(imagesNaturalItemlist.get(j).getImage(), imageid);
downgallerylist.add(downgalleryimage);
beachimages.add(imagesNaturalItemlist.get(j).getImage());
}
} catch (NullPointerException e) {
e.printStackTrace();
}
adapter
public Object instantiateItem(ViewGroup container, int position) {
View itemView = LayoutInflater.from(context).inflate(R.layout.sliding_pager_row, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.pagerimage);
if (images.get(position) != null && !images.get(position).equals("")) {
//Picasso.with(context).load(images.get(position)).into(imageView);
Glide.with(context)
.load(images.get(position))
.apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL).override(600, 250))
.into(imageView);
}
container.addView(itemView);
return itemView;
}
Related
I know this kind question has been aroud but I'm having a specific issue ..
I'm using a glide library to transform image path in my sqlite database to imageviewin myexpendablelistview..and i'm using photoview library to make them zoomable ..the problem is the size of imageviw determine the quality of loaded images ..let me explain:
if the imageview is big then the loaded image is big and in zomming looks good. but if the imageview is small(let's say icon) ..then the loaded quality is bad and when zooming looks really bad.
i want to make a small imageview but when clicked get good quality image zoomable
This is my code:
case R.id.child3 :
ImageView url = (ImageView) view;
String urls;
urls = cursor.getString(cursor.getColumnIndex(Database.DATABASE_CHILD_3));
Glide.with(MainActivity.this).load(urls).into(url);
url.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
AlertDialog.Builder mBuilder = new AlertDialog.Builder(MainActivity.this);
View mView = getLayoutInflater().inflate(R.layout.dialog_custom_layout, null);
PhotoView photoView = mView.findViewById(R.id.imageView);
photoView.setImageDrawable(((ImageView)view).getDrawable());
mBuilder.setView(mView);
AlertDialog mDialog = mBuilder.create();
mDialog.show();
}
});
break;
My list_child.xml
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/child3"
android:layout_centerHorizontal="true"
Dialog_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
</LinearLayout>
Solved it with adding noTransformation:
Glide.with(MainActivity.this).load(urls).apply(noTransformation()).into(url);
and
public static RequestOptions noTransformation() {
if (noTransformOptions == null) {
noTransformOptions = new RequestOptions()
.dontTransform()
.autoClone();
}
return noTransformOptions;
}
I am trying to download an image from the network and display in the ImageView with Glide using scaleType="centerInside" option.
For some reason, the image, when downloaded from the network, looks much smaller on the screen than when the same image is put into the ImageView from resources.
Example:
Both images can be found here. I would argue that even those images that have been set from resources look smaller than they could actually be when compared to what I see on my laptop. I understand that there is something related to the screen density in play, but how can I make these images be of "user-friendly size", e.g., a bit larger?
Even a different image of 600x250 px size is ridiculously small on the phone (with ImageView's layout_height and layout_width set to "wrap_content").
Code from the Activity:
public class DisplayImagesActivity extends AppCompatActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.display_image_activity);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
setTitle("Hello StackOverflow!");
ImageView top_left = (ImageView) findViewById(R.id.top_left);
ImageView top_right = (ImageView) findViewById(R.id.top_right);
ImageView bottom_left = (ImageView) findViewById(R.id.bottom_left);
ImageView bottom_right = (ImageView) findViewById(R.id.bottom_right);
String[] urls = new String[] {
"http://imgur.com/6jMOdg0.png",
"http://imgur.com/AhIziYr.png"
};
top_left.setImageResource(R.drawable.top_left);
top_right.setImageResource(R.drawable.top_right);
Glide.with(this)
.load(urls[0])
.signature(new StringSignature(new Date().toString()))
.into(bottom_left);
Glide.with(this)
.load(urls[1])
.signature(new StringSignature(new Date().toString()))
.into(bottom_right);
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
this.finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}
display_image_activity.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/match_parent"
android:orientation="vertical">
<include layout="#layout/_toolbar" />
<ScrollView
style="#style/match_parent">
<RelativeLayout
style="#style/match_parent"
android:padding="16dp">
<TextView
style="#style/wrap_content"
android:id="#+id/text_resources"
android:layout_marginBottom="10dp"
android:text="From Resources"/>
<ImageView
android:id="#+id/top_left"
android:background="#color/Linen"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_marginBottom="20dp"
android:layout_below="#id/text_resources"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/top_right"
android:background="#color/Linen"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_toRightOf="#id/top_left"
android:layout_toEndOf="#id/top_left"
android:layout_below="#id/text_resources"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:scaleType="centerInside"/>
<TextView
style="#style/wrap_content"
android:id="#+id/text_network"
android:layout_below="#id/top_left"
android:layout_marginBottom="10dp"
android:text="From Network"/>
<ImageView
android:id="#+id/bottom_left"
android:background="#color/Linen"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_below="#id/text_network"
android:scaleType="centerInside" />
<ImageView
android:id="#+id/bottom_right"
android:background="#color/Linen"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_toRightOf="#id/bottom_left"
android:layout_toEndOf="#id/bottom_left"
android:layout_below="#id/text_network"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:scaleType="centerInside" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
I faced the same problem. Glide tries to interpret what my app needs and transforms the images accordingly, resulting in too small images in some places. In my case the ImageViews use adjustViewBounds="true" and MaxWdth/Height leading to problems
While I am not anything close to being a Glide Expert, I found a quick fix working for me.
I simply added a .dontTransform() mehod call, which in my case is OK since I use thumbnails that already have been pre-scaled.
GlideApp.with(context).load(fireStorage).dontTransform().into(imgView);
(Using a Placeholder would probably also have helped, but again, for me this was the easiest way)
Your images cannot be bigger than what you defined:
android:layout_width="150dp"
android:layout_height="120dp"
Try
android:layout_width="match_parent"
android:layout_height="wrap_content"
Your ImageViews can be that fixed size if you want although they should be flexible with match_parent/wrap_content.
I don't know what Glide does for sure but it looks like the resolution of the images from the network is smaller than the ones from resources. The android:scaleType="centerInside" gives you the behaviour that the image will be SHRUNK until both dimensions of the image fit in the ImageView and it's aspect ratio is maintained. If you want the images to expand to fit the ImageView you probably want android:scaleType="fitCenter" instead. You might also want android:adjustViewBounds to be true/false depending on how you want it to behave if you decide to make the dimensions flexible.
The documentation for scaleType is useful here:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
https://developer.android.com/reference/android/graphics/Matrix.ScaleToFit.html#CENTER
This code saved my time. It works for me!
//Get actual width and height of image
StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
Bitmap bitmap = null;
try {
URL url = new URL(imgUrl);
bitmap = BitmapFactory.decodeStream((InputStream)url.getContent());
} catch (IOException e) {
Timber.e("Image Loading Error %s", e.getLocalizedMessage());
}
if (bitmap != null) {
final float scale = resources.getDisplayMetrics().density;
final int dpWidthInPx = (int) (bitmap.getWidth() * scale + 0.5f);
final int dpHeightInPx = (int) (bitmap.getHeight() * scale + 0.5f);
//Set result width and height to image
GlideApp.with(imgAns.getContext())
.load(imgUrl)
.override(dpWidthInPx, dpHeightInPx)
.into(imgAns);
}
I have:
a recyclerview with GridLayoutManager
grid item layout with an ImageView in it (with height wrap_content and width match_parent) wrapped in a Framelayout, so the image is bottom|center_horizontal aligned
Picasso loading an image into ImageView asynchronously from the web
Current situation:
The image is loaded into the imageView, but the imageview's size is the recycled grid item's imageview's size.
What I would like to achieve:
After loading the image into the imageview, resize the imageview on runtime (redraw).
What I have tried:
notifyItemChanged() - could do the trick (in theory at least), but I
am not able to check if the current grid item's view is in layout
state, so my app crashed with IllegalStateException
listening to Picasso's load with a Callback, and onSuccess() check the imageview drawable aspectratio and try to resize the imageview itself with
requestLayout(). Did not work. (Well it worked, but only when there
is an animation or something triggering the redraw of the layout. If
there is nothing, then the imageview is not redrawn.)
listening to Picasso's load with a Callback, and onSuccess() start an animation animating the alpha of the imageview. This would trigger the redraw. But this sometimes worked sometimes not(and I don't know why).
What I did was putting an ImageView into FrameLayout and then changing this FrameLayout's size to needed. Hope it would help you.
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/video_thumbnail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</FrameLayout>
P.S. changing FrameLayout's size:
viewHolder.frame.setMinimumWidth(neededWidth);
Picasso has a function to resize your image. Something like this:
Picasso.with(context)
.load(url)
.resize(50, 50)
.centerCrop()
.into(imageView)
You can change centerCrop, to play with aspect ratio
I wanna show this using a
Campaign Banner List Using Dynamic Width - Height Example
that:
Create an item_campaign_banner.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<RelativeLayout
android:id="#+id/campaignImageSuperView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/campaignImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/campaign_image_error_icon"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<View
android:id="#+id/campaignSectionLine"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#+id/campaignImage"
android:background="#F2F2F2" />
</RelativeLayout>
</RelativeLayout>
Than create a BannerHolder.java
public class BannerHolder extends RecyclerView.ViewHolder {
private ImageView campaignImage;
private View campaignSectionLine;
private ViewGroup campaignImageSuperView;
public BannerHolder(#NonNull View itemView) {
super(itemView);
campaignImage = (ImageView) itemView.findViewById(R.id.campaignImage);
campaignSectionLine = itemView.findViewById(R.id.campaignSectionLine);
campaignImageSuperView = itemView.findViewById(R.id.campaignImageSuperView);
}
public ImageView getCampaignImage() {
return campaignImage;
}
public ViewGroup getCampaignImageSuperView() {
return campaignImageSuperView;
}
}
Than apply this in onBindViewHolder(#NonNull RecyclerView.ViewHolder incomingHolder, int position) method that
your created YourAdapter.java
if (incomingHolder instanceof BannerHolder) {
BannerHolder bannerHolder = (BannerHolder) incomingHolder;
Banner banner = (Banner) campaigns.get(position);
if(banner != null && banner.getImage() != null && banner.getImage().getWidth() != null && banner.getImage().getHeight() != null) {
Picasso.with(activity)
.load(banner.getImage().getUrl())
.error(R.drawable.campaign_image_error_icon)
.into(bannerHolder.getCampaignImage());
bannerHolder.getCampaignImageSuperView().setMinimumWidth(banner.getImage().getWidth());
bannerHolder.getCampaignImageSuperView().setMinimumHeight(banner.getImage().getHeight());
}
}
That's all!
I am using a ListFragment to display a ListView of Lazy Loaded ImageView objects using the Android Universal Image Loader. The correct data is coming from my datasource and I have the URL to my fairly high resolution images (about 1000px wide, 150kb). I am using these to completely fill each row that is 110dp high.
The problem I am having is the images are loading at a very poor resolution:
The problem isn't the source image as it is high enough quality:
http://www.puc.edu/__data/assets/image/0006/127581/IMG_5155.jpg
I am centering the image and then cropping it:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="110dp">
<TextView
android:id="#+id/galleryTitle"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_marginLeft="95dp"
android:layout_marginRight="5dp"
android:gravity="center_vertical"
android:hint="16dp"
android:lineSpacingExtra="0dp"
android:lines="3"
android:text="TextView"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/galleryImageView"
android:layout_width="fill_parent"
android:layout_height="110dp"
android:scaleType="centerCrop"
android:src="#drawable/default_background" />
</RelativeLayout>
Displaying the image in the row:
public View getView(int position, View convertView, ViewGroup parent) {
View itemView;
TextView title;
// Get the news item object
PUCObjects.PUCPhotoGalleryItem item = items.get(position);
// Inflater Service
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
itemView = inflater.inflate(R.layout.photos_gallery_row, parent, false);
title = (TextView) itemView.findViewById(R.id.galleryTitle);
ImageView imageView = (ImageView) itemView.findViewById(R.id.galleryImageView);
// Set the Image
imageLoader.DisplayImage(item.imageUrlExtraLarge, imageView);
// Set the text
title.setText(item.title);
return itemView;
}
Any ideas why it is displaying such poor resolution images?
The pictures appear to be down scaled. Looking at that library the default functionality is power of 2 image sampling. I would reckon this is source of your issue.
ImageScaleType
DisplayOptions
For instance:
DisplayImageOptions opts = new DisplayImageOptions.Builder().imageScaleType(ImageScaleType.NONE).build();
imageLoader.DisplayImage(item.imageUrlExtraLarge, imageView, opts);
I have a VerticalViewPager and I have some images in it. When I rotate my device in landscape mode my ImageView doesn't scale to width of my screen. It fits the height if image instead. I used AspectRatioImageView. It fits the width but VerticalViewPager doesn't scroll down.
Thank you.
activity_main.xml:
<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" >
<HackyViewPager
android:id="#+id/vvp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
>
</HackyViewPager>
</RelativeLayout>
Here is rowitemview.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fff" >
<AspectRatioImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/m4_3" />
</LinearLayout>
and here is my instaniateItem of my ImagePageAdapter that extends PagerAdapter:
#Override
public Object instantiateItem(ViewGroup container, int position)
{
Context context = MainActivity.this;
container.requestLayout();
AspectRatioImageView imageView = new AspectRatioImageView(context);
imageView.setImageDrawable(getResources().getDrawable(R.drawable.m4_3));
mAttacher = new PhotoViewAttacher(imageView);
mAttacher.setOnMatrixChangeListener(new OnMatrixChangedListener() {
#Override
public void onMatrixChanged(RectF rect) {
if((int)rect.width()>_width)
viewPager.setLocked(true);
else
viewPager.setLocked(false);
}
});
P.S : The issue is with viewPager height. When I scroll down the image it just goes to the other page instead of scrolling the scaled image.
Here's what you need.
This is a good solution I found out.
Android Crop Center of Bitmap
This allows to set the height and your width according to your orientation.
To change the image's scale to full screen, you generally use center crop like this:
yourImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Hope this information was useful..:)
Use android:scalType = "fitxy" in activity code like this imageView.setScaleType(ImageView.ScaleType.FIT_XY);