Develop Reference

How do you add a trimmed circular button image to your android drawable folder?

I'm trying to make a basic media player. I downloaded a free .png from a website for the circular play button but when I just copy and paste it into the drawable folder and add it as my ImageButton I can't scale it down to be the size of my other buttons and the background is gray.
How would I scale the button down and trim out the gray background?

1. You can scale the image so that it works on multiple devices by doing something like this:
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
Image img = yourImage.getScaledInstance((width * .10), (height * .10), Image.SCALE_DEFAULT);)
This is just an example, but it would resize the image so that it is close to a tenth of the size.
2. Another method would be to simply resize the image with a program like paint, and have the image much smaller. Although this is an immediate easy fix, the image size is not responsive to actual screen size.
3. ScaleType attribute is also a means to change size depending on how you are using the image asset in your code. (thank Parth Patel)

I used an ImageView instead which can basically do anything a button can and scaled it down. Looks great, thank you to #ParthPatel for giving me the answer.

Android avoid image scalling in Imageview for Image Mapping like Html

Hi Am trying to implement image mapping as like html in android. For that i referred this project. Its work good when i access the image from drawable-nodpi folder. But when i access from other drawable folder the image get scaled as per the android concepts. Here i used drawable folder for checking purpose only. Actually i get image from back end service.
I also tried with bitmap by setting the no density.
Bitmap bm;
bm=BitmapFactory.decodeResource(getResources(), R.drawable.blueprint);
bm.setDensity(Bitmap.DENSITY_NONE);
mImageMap.setImageBitmap(bm); //mImageMap is customized view which extends Imageview
But it's not working. Am also tried as per this post. Its not working.Is there any way to load image to image view without scaling?

you can use Bitmap.createScaledBitmap with the orignal mesaures of the picture..
int width = orignal bitmap width
int height = orignal bitmap height
Bitmap bm;
bm = getBitmap... from network
bm = Bitmap.createScaledBitmap(bm,width,height,true);
this will create a image scaled properly and just place it in the ImageView.

Scaled images with volley

I am trying to stretch images that I load with volley. XML isn't much help, while it can shrink them it doesn't help enlarging them. My exploration of the topic led me to the conclusion that this can be achieved only programmatically.
What is my idea ?
To extend the volley library and overriding one of the methods, resizing the bitmap right after download and before displaying it.
I used this code to resize images that were already on the phone, but this doesn't help me much with random images from the internet.
Point outSize=new Point();
float destWidth=1;
float destHeight=1;
#SuppressWarnings("deprecation")
#TargetApi(13)
private Bitmap scaleBitmap(int mFile){
Display display = getActivity().getWindowManager().getDefaultDisplay();
if (android.os.Build.VERSION.SDK_INT >= 13){
display.getSize(outSize);
destWidth = outSize.x;
destHeight = outSize.y;
}else{
destWidth=display.getWidth();
destWidth=display.getHeight();
}
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
Bitmap orig = BitmapFactory.decodeResource(getResources(), mFile);
float srcWidth = orig.getWidth();
float srcHeight = orig.getHeight();
float inSampleSize = 1;
if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
inSampleSize=(destHeight/2)/srcHeight;
}else{
inSampleSize=(destHeight/4)/srcHeight;}
options = new BitmapFactory.Options();
Bitmap resized=Bitmap.createScaledBitmap(orig, (int)Math.round(orig.getWidth()*inSampleSize), (int)Math.round(orig.getHeight()*inSampleSize), true);
destWidth=1;
destHeight=1;
return resized;
}
Basically I want to assign to orig the image that is downloaded, then resize it and then display it.
My question is: What class do I extend ? I took a look there but since I am inexperienced I couldn't figure out what exactly to look for. Is it ImageLoader ? And more specifically: should i Override the getBitmap() method and add an edited version of the code for scaling ?
Disclaimer: I am very inexperienced and I would accept other ideas too.

I solved it a few days ago. Here is how the regular ImageView handles resizing of images: If you are using Match_parent as width and wrap_content as height(I tested with both as match_parent and the results were the same) it will NOT scale the image IF the Height of your picture is lower than the width (which is quite typical) . Meaning that image view scales based on the smaller side. This meant that there are 2 solutions:
Do what I wanted to do originally which involves writing a new class that extends imageview/networkimageview and then programmatically adding the code that i listed to enlarge the picture.
Or simply specify the desired Height of the view programmatically and imageview will then simply scale the image to fit the height of the new View. This options invalidates the wrap_content for Width and simply puts in as much as you need.
Here is the code I used:
Display display = getActivity().getWindowManager().getDefaultDisplay();
Point outSize=new Point();
int destWidth;
if (android.os.Build.VERSION.SDK_INT >= 13){
display.getSize(outSize);
destWidth = outSize.x;
}else{
destWidth=display.getWidth();
}
img.setLayoutParams(new RelativeLayout.LayoutParams( LayoutParams.MATCH_PARENT,destWidth*5625/10000));
In my case I needed to fit a 640x360 image so I used a ratio of 0,5625. This method will work if you do not know the picture's parameters BUT you have to get the parameters beforehand and put them in place, so I guess it might be more useful to use the first strategy, but since I solved my problem I don't have an example for the first method.

I think the issue that you're seeing is caused by the default behavior of how the underlying code for NetworkImageView works.
Have a look at the code for ImageRequest which is used by NetworkImageView . There is a function there called getResizedDimension which says something like "Scales one side of a rectangle to fit aspect ratio" . This may have caused your issue since the image(s) that you're downloading may not have the perfect aspect ratio computed every time for a specific device.
Are you displaying a single image, or images in a grid? If it is just a single image, there might be a work around. I haven't seen your full code, on where you set the image or image url, so I am going to assume the flow here:
1.) Use the regular ImageView.
2.) Use the regular Volley request pointing to the image's URL
3.) When you receive the response (parseNetworkResponse), decode (the array of bytes) it yourself, using the method you mentioned above that works for you. Some tips can also be found here on how to do that: http://developer.android.com/training/displaying-bitmaps/load-bitmap.html
4.) After decoding, programmatically set the ImageView's bitmap with your decoded result
If this is a grid type thing, then maybe you need to make your own version of NetworkImageView and its underlying support classes (sub-class).
Suggestion:
Have a look at Picasso as well, IF you have the freedom to choose the library. Looks very simple to use for your stated needs.

Images scales defferently in setImageDrawable() and setImageBitmap()?

I am new in android development. I have an issue regarding the image scaling in my app. When i set images using setImageDrawable() images look proper like in screenshot:
But if i set image using setImageBitmap() method it does not look proper. Some black color occurs around it like in screenshot bellow:
I have tried it in multiple applications and i observed that in some applications the image size is becoming smaller than the size ofter setting image through setImageDrawable() or setImageResource().
the reason for setting images through setImageBitmap() is that i want to set images to the imageviews which are kept in assets folder and not in drawable.
Following is the code i used to create a bitmap and set it to imageview:
BitmapFactory.Options opts = new Options();
opts.inPurgeable = true;
try
{
Bitmap preview_bitmap = BitmapFactory.decodeStream(assetManager.open(drawableFolder+"/"+tmpArr[0]),null,opts);
view.setImageBitmap(preview_bitmap);
}
catch (Exception e)
{
LNLog.writeTOErrorToLog(e.getMessage());
}
So, please can anyone tell me where i'm i going wrong or missing something to set.
I tried to set Options but did not worked. I want to set images as in first screenshot that is how they looks by using setImageDrawable().
Thanx in advance.
Note: in screenshots images are referent in text on it only.IF i set hindi images i.e. the images on which text is in hindi language using setImageDrawable() then they looks proper as in like in screen shot one.So , no issue of image files.

You can get rid of the black borders by using
android:adjustViewBounds="true" in xml
or
imageView.setAdjustViewBounds(true) in Java.
EDIT:
Then try using drawable only
Drawable d = Drawable.createFromStream(assetManager.open(filePath), null);
view.setImageDrawable(d)

This worked for me :
try
{
view.setAdjustViewBounds(true);
int height = view.getDrawable().getIntrinsicHeight();
int width = view.getDrawable().getIntrinsicWidth();
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inPurgeable = true;
opts.inScaled = true;
Bitmap preview_bitmap = BitmapFactory.decodeStream(assetManager.open("drawable-mdpi/FAQ_hi_in.png",null,opts);
Bitmap bmp = Bitmap.createScaledBitmap(preview_bitmap, width, height, true);
view.setImageBitmap(bmp);
}
In this code I have taken the height and width of actual image and then scaled my bitmap to that height and width. Then I converted this scaled bitmap to drawable and set it into my ImageView, thats it. It resolved my problem of black border around image.

Android scaling imageview from setImageBitmap

I have this code:
<ImageView
android:id="#+id/listitem_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
and
imageview_logo.setImageBitmap(bit); // comes from assets
imageview_logo.setAdjustViewBounds(true);
imageview_logo.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageview_logo.setBackgroundColor(0x00000000);
imageview_logo.setPadding(0, 0, 0, 0);
imageview_logo.setVisibility(v.VISIBLE);
When loading the image this way, no scaling seems to have been done. However, if I load an image through setImageDrawable() r.res. the image inside the ImageView is resized. However, I need to use setImageBitmap() since I load my images through assets folder.
Am I missing some setting here? That will make Android resize and scale the bitmap, so it uses the full width of the ImageView? I guess I can do it myself in code, but offhand I would think what I want to do would be supported just by setting some properties.

Can't trust system for everything specially android which behaves very differently sometimes.
You can resize the bitmap.
height = (Screenwidth*originalHeight)/originalWidth;
this will generate the appropriate height.
width is equal to screen width as you mentioned.
Bitmap pq=Bitmap.createScaledBitmap(pq,Screenwidth,height, true);

As I needed a bit of time to figure out the complete code to make this work, I am posting a full example here relying on the previous answer:
ImageView bikeImage = (ImageView) view.findViewById(R.id.bikeImage);
AssetLoader assetLoader = new AssetLoader(getActivity());
Bitmap bitmap = assetLoader.getBitmapFromAssets(
Constants.BIKES_FOLDER + "/" + bike.getName().toLowerCase()
.replace(' ', '_').replace('-', '_') + ".png");
int width = getActivity().getResources().getDisplayMetrics().widthPixels;
int height = (width*bitmap.getHeight())/bitmap.getWidth();
bitmap = Bitmap.createScaledBitmap(bitmap, width, height, true);
bikeImage.setImageBitmap(bitmap);

With bit as your Bitmap image, you can directly set yout imageView and then crop it using the properties of the imageView as:
imageview_logo.setImageBitmap(bit);
imageview_logo.setScaleType(ImageView.ScaleType.CENTER_CROP);