Android screen size inconsistency - android

As seen in this image:
I have a rounded rectangle that is the size of 1082 x 1796, and I used getWindowManager().getDefaultDisplay() to get and print the pixel values of the screen as seen in the circle bottom left. However, when I draw this bitmap, this happens:
Is the screen size different from the getDefaultDisplay() method? How do I fix this?

I think your shape is seen by the system as a 9patch. It use the first and last lines/columns in order to know how to resize the image in order to display it consistently.
That's why there is a 2px difference in width and height. I think you can correct it by modifying the png and removing the first and last lines/columns, or just use another way to draw the image. Maybe using another format (jpg ? bmp ?) for the image could do the job. I'm not sure.

you can do that with calculation to fit all screen devices based on width and height of the device screen:
DisplayMetrics dm = new DisplayMetrics();
((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);
int width = dm.widthPixels;
int height = width * imageHeight / imageWidth;
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, height);

Related

Importing images and making them scaleable

Simple question :
When you import a picture, does android studio automatically scale it proportionally to the right device or what do I have to do to achieve this?
I think the scaling for each device size is done in the layout. Images are generally automatically scaled to the size of the imageView (depending on how you set the imageView), so it's the size of the imageView that you should be concerned about. If you make your layouts relatively, then it they will scale automatically by device size.
Is this what you are looking for?
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
ViewGroup.LayoutParams p = yourImage.getLayoutParams();
p.height = height*500/1040;
p.width = width*300/600;
yourImage.setLayoutParams(p);
You need something like this. I get the ratios I need everything to be from my personal device. That is, my screen is 600x1040 and the image looks good there at 300x500.

Layout stretching

Is there a layout, that would allow me to make it in absolute values, but when it would be on larger / smaller screen, it would stretch and adjusted those values, to fit onto the screen but preserve the same look?
Relative layout still keens on exact values.
For example, I have a button and I want it to have it the width of 1/3 of the screen of every device.
Setting manualy in code the width of an element to (for example) screenWidth/3 works. Yet I don't think it's clean. But this technique works.
Find device dimensions at runtime and set width of button at runtime.
Display mDisplay = getWindowManager().getDefaultDisplay();
int deviceWidth = mDisplay.getWidth();
int deviceHeight = mDisplay.getHeight();
button.getLayoutParams().width = deviceWidth / 3;
Give the values in dpi of your layout and view and they will adjust themselves on any screen

Problems with the width of the bitmap. The width is limited by the height of the screen

I'm creating a bitmap wich i need to use as background of a 320 width screen. The problem is that the bitmap is not getting the width i want. It is getting two empty spaces on the left and on the right. It is because it is fitting the height of the screen, but i dont want that, i want to force the bitmap to have the width i want. Doesn't matter if a portion of the height of the bitmap is out of the screen.
i need to force the width when i am adding the image to the layout, i mean that the image must be keep the aspect ratio, but the image must be higher than the height of the screen, and the image must be shown incomplete if the heigh of the image is higher than the height of the screen. Now this is not happening, because the layout is forcing the width to respect the image and show all the height of the image in the height of the screen, then i think the problem is on the layout rules
im creating the bitmap with:
View view;
Bitmap aux = Util.loadImage( filename ); //image loaded but with his original width
Bitmap image = Util.scaleBitmap(aux, 320); //scaling to 320
((ImageView)view).setImageBitmap( resource.image );
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams( 320 , h );
rlp.addRule( RelativeLayout.CENTER_HORIZONTAL );
rlp.addRule( RelativeLayout.ALIGN_PARENT_TOP );
layout.addView( view , rlp );
What am i doing wrong?
Try using this:
((ImageView)view).setScaleType(ImageView.FitCenter);
To see more options see http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
Since you don't care about the height you should use CENTER_CROP.
Define the scale type and then set the image.
CENTER_CROP - Scale the image uniformly (maintain the image's aspect
ratio) so that both dimensions (width and height) of the image will be
equal to or larger than the corresponding dimension of the view (minus
padding).

Relative translation in property animation in xml

Currently I have an ImageView that extends the length of the device and is scaled by 3. Obviously, the sides are cropped outside the screen. I want the animation to start with the left-side of the image on the left-side of the device, then shift it over until the right-side of the image is on the right side of the device.
I can achieve them by setting up the image to it's initial base then basically doing this:
<objectAnimator
android:propertyName="translationX"
android:duration="6000"
android:valueTo="-1280"
android:valueType="floatType"
/>
However, this only works because I know the exact size of the image and the exact size of my Motorola Xoom. Naturally, I want this to work on any device, so I need something less hard-coded. With Tween animations, it works alright since you can translate something based off a percentage of it's size. It wasn't perfect, but it worked well enough for this effect. Property aniimations don't seem to have this. The translationX and the X properties must have units.
Is there a simple way to translate a view with property animations based on the relative location? Am I going to have to make a separate animation file for each dimension? Is there any other way I can achieve this effect? I'd prefer not to make my own animation.
Could you create code for separate device size 'buckets' that you want to support (e.g. tablet, phone landscape etc.) which has known dp widths. Then you could use this could below to scale the image (where 384 is 384dp for a certain device bucket width) and do something similar for the the valueTo int you need.
//Get the device screen pixel density so that you can scale
//the image in density independent pixels rather than pixels
final float scale = getActivity().getResources().
getDisplayMetrics().density;
//set the number of dp for the height and width by changing
//the number you multiply the (scale + 0.5f) by e.g. 384
int pixelsh = (int) (384 * scale + 0.5f);
int pixelsw = (int) (384 * scale + 0.5f);
This is the way to convert absolute pixels to dp pixels. I do not know how to use these for what you are doing but at least it is a start.
You should create the animation at run time by passing the screen size of the current device screen. First get the screen size (NOTE: the metrics (width, height) change depending on the rotation of the device):
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int screenSize = metrics.widthPixels;
and then create your ObjectAnimator:
ObjectAnimator oa = ObjectAnimator.ofFloat(*yourImageView*, "translationX", 0, (Float) screenSize);
oa.setDuration(6000);
oa.start();

Scale an image up to fill entire ImageView in Android

I'd like to scale an image up to take up the entire size of an ImageView. This is subtly different than using scaleType=fit_center because fit_center will leave bands around the image if the image aspect ratio does not exactly match the ImageView's aspect ratio. Instead, I would like the image to get centered and scaled up to completely fill the enclosing view, with any excess chopped off.
I'm able to accomplish this by computing my own custom image matrix during onCreate():
final Display display = getWindowManager().getDefaultDisplay();
final float screenWidth = display.getWidth();
final float screenHeight = display.getHeight();
final float imageWidth = splashView.getDrawable().getIntrinsicWidth();
final float imageHeight = splashView.getDrawable().getIntrinsicHeight();
final Matrix splashMatrix = new Matrix();
final float scale = Math.max(screenHeight/imageHeight,screenWidth/imageWidth);
splashMatrix.postScale( scale, scale );
splashView.setImageMatrix(splashMatrix);
This works fine, but it seems like there must be an easier away. Does anyone know of a way to scale up an image in an ImageView while both preserving the aspect ratio of the image and fully filling in the ImageView?
(Note: in my case my ImageView is taking up the full screen, so I use getWindowManager().getDisplay() to find the desired image size. You can't use splashView.getWidth()/getHeight() because the view hasn't been laid out yet and doesn't have a size)
You can use android:scaleType="centerCrop".
Keeps the aspect ratio and scales the image just like you want it.
For more information please go through the below link
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
In some cases all you need is
android:adjustViewBounds="true"
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
This worked for me to fit the image inside the whole image view, plus it make sense that it says "ScaleType.FIT_XY" to fit the X and Y axis of the imageView.
From the xml file it would be:
android:scaleType="fitXY"
Try scaleType attribute for your ImageView. http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
I am very late but hope it helps in the future. Here is my solution to how to stretch the image to full screen or image view without scaleType="fitXY" as it causes damage to the image. Use the following library.
[A simple imageview which scales the width or height aspect with the given ratio]
https://github.com/santalu/aspect-ratio-imageview
To Find the aspect ratio of the device screen use the following Code.
DisplayMetrics metrics =this.getResources().getDisplayMetrics();
float ratio = ((float)metrics.heightPixels / (float)metrics.widthPixels);
you must set android:scaleType="centerCrop" to fill entire screen
but you noticed that scaletype property worked together with android:layout_width and android:layout_height property.
you must set to match_parent

Categories

Resources