Large images as background in Android - android

I would like to create fragment with image as background. What I do is saving image in .png format, putting it to drawable folder and than using it as background in layout. First thing I noticed is that the view stutters, so I created different images for different densities. But I'm still afraid that in older devices with worser CPU view would statter.
Question
Do I have to use libraries like Picasso for adding images as background ? What is the best approach ?

I think that base approach of using libraries like Picasso, Glide, UniversalImageLoader is for downloading images from network, caching, decoding, smooth loading in runtime.
If you want just set background for imageView from your local resources the only thing you should consider is to do this efficiently. This is nice described by google here and should be enough for your case.

Related

Android drawable memory management

I implemented a RecyclerView in one of my Activities.
I use a customized RecyclerView adapter to load data from a SQLite Database (using Room and LiveData-structure) and display it in the view.
All of the rows have a large ImageView where I want to show a Drawable (just a .png). To do that I first tried to use the approach written on the official Android Developers site but it did not work well for me.
Therefore I am trying to use Glide as a library recommended by Google.
I have 16 drawables in my project. They all have a scaling between 800x800 and 1920x1080 pixels.
In my adapter I load the data from my database and based on the drawable id, the image as well (so there is no image data stored in the database; I did this previously).
Unfortunately my App cannot handle that amount of image cache which leads to an OutOfMemoryError exception. That's why I used
android:largeHeap = "true"
in my Android Manifest.
I know this is not a good solution and I also know that there has to be a way to use less memory for such a small amount of pictures.
In Glide I use
GlideApp
.load(R.drawable.my_drawable)
.fitcenter()
.into(myImageView);
But unfortunately the image does not get shrinked or smaller. I thought that Glide can scale the image based on the size of the ImageView, screen size and so on.
What am I doing wrong? Is there a better way to use less memory without fixed scaling so that my pictures not become ugly?
EDIT:
I first stored my images in the basic "drawable" folder in my project structure (copy and paste).
My second approach was the gimp-android-xdpi addon which exports images or icons for any android density (mdpi, hdpi, xhdpi etc.). But this did not help either.
call override(horizontalSize, verticalSize).
This will resize the image before displaying it in the ImageView.

Drawable VS Bitmap in a specific case

I'm developing a music Player, and since i have started I've a question: Should i use Drawable or Bitmap?
Considered that:
I have to load many images, one for every song (The image is loaded only when it is the turn of that song).
The image loaded has to be visualized on the Widget and Notification too.
The same image is displayed on more activities.
The image loading has to be as fast as possible.
The memory usage have to be as low as possible, even after have loaded several images.
I was thinking to temporarly save images of actual playlist, so I don't have to reload it every time is played the same song.
I am using Glide library to have better performance in this moment, and I am working with bitmap. Any suggestion?
Both graphics objects works almost everywhere.
If you loading from file system (downloads) you need to load Bitmaps to create BitmapDrawables so you may apply bitmap directly in this case.
If you are using from the res folder you can load as Drawables.
Drawable is just a wrapper for things that can be drown (colors, vector images, layer-lists, selectors and bitmaps).
Whereas bitmaps are actually representation of images in Android.
So, your question is invalid, we can not equate bitmap and Drawable.

Glide takes long time before displaying large images

I am trying to load images (around 5mb each) into ImageView's of size 45x45 dp in a RecyclerView. Even though original image is large, doesn't Glide load a smaller version of it because target ImageView is small? So, I expect Glide to load images in just a few seconds with an average internet speed. But, it takes like 20 seconds. What is the problem?
Images are stored in firebase storage.
Glide code :
Glide.with(context).load(firebaseStorageUrl).into(imageView);
Glide needs to load the full image from the internet before it can resize it. So the download takes a long time the first time. Afterwards it can use the small image from the cahe it created if you have caching activated.
In case you don't want to load smaller files, I recommend using a Gif-drawable library for loading large images from Glide into GifDrawable(works as an ImageView).
It can load files more than 100MB very fast. It works with plain JPG, PNG and BMP too. If these are GIFs, it plays without any delay or freeze.
If drawables declared by android:src and/or android:background are GIF files then they will be automatically recognized as GifDrawables and animated. If given drawable is not a GIF then mentioned Views work like plain ImageView and ImageButton.
Glide downloads the image first, and then you have methods to retrieve the image as bitmap to resize and compress the image. However, that won't solve your problem . Possibly there are two solutions for this:
Keep a low sized image in the server.
Use a File downloader library, which helps to download images serially and asynchronously as a queue, which would help to download the file quick. FileDownloader library is a good option for this.
Use Override in Glide for load image faster.

RecyclerView stutters when scrolling only 14 images

I've been trying to create a Recycler View full of Card Views. Currently, I'm using the Recycler View from this tutorial and loading it with 14 different images. The professional quality images range in size from 134K to 242K.(Down from 8MB - 18MB)
I know that the images may be too big but, I feel there must be some way to get better performance while scrolling. Can someone point me in the right direction?
Edit: The images will be stored on the device. There will probably never be more than 20 of them.
You can use Picasso library or Android Universal Image Loader
Picasso
Android-Universal-Image-Loader
You don't need any AsyncTask.Theese 2 library handling image operations in background so you can keep scrolling smoothly. I am using Picasso in my project right now. You can add error drawable , temporary placeholder default drawable , and its so simple automatically caching.
Just use one of them in onBindViewHolder to bind any image to imageView
Load the images in a separate thread (or AsyncTask).

How to define the Image sizes for various android devices, not Icons?

I want to use layout in this way, where image will be loaded from a HTTP server request. I need to know how can I define the image sizes from various android device , as in the server there will not be any drawable asset folder.
Till now I have fixed the height of the Relative Layout inside which the ImageView is placed,which has height and width : fill_parent, and scale_type : fitXY, for which if the image is small its getting stretched.
And this is not a good approach. Can you please suggest me a good way, as how can I define the image sizes.
Good question. There are two solutions that come to my mind:
Similar to how Andorid maintains resources (high display, extra high display, low display, etc.), Request your server to resize photos before sending them
Downloading full resolution photos and resizing them in your app.
Option #1 is more optimized, but #2 is easier to implement. It totally depends on how much time you're willing to spend on this.
It's also highly recommended that you use an image loading library for downloading images. Glide and Picasso are probably two of the best libraries out there. Pass an image URL and they'll handle everything: Downloading the photo, caching it in memory + storage, resizing, etc.
Oh and I don't think fitXY is the best option for your purpose. Try using centerCrop which crops your images to fit them properly.

Categories

Resources