android layout scaling with fixed aspect ratio on different phones - android

I have a layout with two ImageView inside. Each image has a fixed aspect ratio, for example first image is 320x160, second is 320x320. Layout is aligned vertically. I want this two images be glued together and scale to fit one of the screen sides (width or height) and scale the other side proprotionally.
I tried to use scaleType=fitCenter, but the problem is that on different phones with different aspect ratio, images are not together, there is a black area between them.
It seems that I can not use layout:weight because the screens have different ratio (480x854 and 480x800) and I need my layout stays the same scaled proportion.
Any help is appreciated.
Here is my layout for now:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:src="#drawable/im_menu"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.7"
>
</ImageView>
<ImageView android:src="#drawable/im_field"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.3"
>
</ImageView>
</LinearLayout>

You can use:
android:adjustViewBounds="true"
and set fill_parent to height for example
<ImageView
...
android:layout_height="fill_parent"
...>
adjustViewBounds for my details

You can use layout weight with relative values too. For example, if you want a field with 30% and other with 70%, just set the children views weight with 0.3 and 0.7, and don't specify width nor height in children.
It is explained in the developer guide (tip section):
developer guide - linear layout
Also you may have to use RelativeLayout instead of LinearLayout.

Related

Elements inside scrollview shows different size for different screens. How to fix it?

im my code
<ScrollView
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".3">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/json"
android:onClick="album"
android:scaleType="fitXY"
android:layout_width="fill_parent"
android:layout_height="140dp" />
<ImageView
android:id="#+id/json1"
android:layout_marginTop="3dp"
android:onClick="live"
android:scaleType="fitXY"
android:layout_width="fill_parent"
android:layout_height="140dp" />
</LinearLayout>
</ScrollView>
how can i set height of the imageviews independent for all size screens...
now it looks fine in mobile phones but on tabs, the imageviews insdie scrollview get stretched.
Those are stretched because of scaleType,
Set it to centerInside and it will work fine.
Three XML attributes are defining how your image appears on the screen.
Height
Width
Scale Type
You've set the height to 140dp, but set the width to be fill_parent and the scale type to fitXY.
Set the Image width to be 140dp or some other predefined value based on the Image Aspect Ratio or change the scale type.

Image with same resolution not fit on layout imageview

Problem: trying to give multi device support screen for a simple layout but in Nexus 6 its creating the problem,means not showing fit.
It's side is cutting down where as per as docs for nexus-6 resolution is 1440*2560 and image should be in drawable-xxxhdpi .so i keep a image with resolution of 1440*2560.
<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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imv" />
</RelativeLayout>
if i ll give match_parent so obvious it will stretch the image.
Please help me to get out of it.
Here is screen shots of screen -
http://s10.postimg.org/43od5j5h5/screen_shot_layout.png
Set the width of the Image to fill_parent (you can set margins if you want a bit smaller imageView or you could also just set a fixed width)
Use android:adjustViewBounds to keep aspect ratio
Set height to wrap_content (it will take whatever it takes to maintain aspect ratio)
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />
If you want to fit the image on the imageview, replace android:src with android:background in the ImageView in the xml code.
Try to use these lines of code in the layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="fitXY"
android:id="#+id/imv" />

Scaling ImageViews with LinearLayout weights yields anomalies..?

Alright so I'm trying to have an image set up such that:
the base of the image is lined up with the centre of the layout
the image scales with the layout to fit in background image
What I've done to achieve that is the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"/>
<ImageView
android:id="#+id/widget_icon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="0.1"
android:src="#drawable/widget_icon"/>
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
So I would expect the image to take up 10% of the space in the top half of the window no matter what the window height/width is set to but what I've come to realize is that it's not the case.. seems like the image doesn't scale down past its "real" size? I'm not entirely sure but I'm getting some really wonky and seemingly not linear scaling happening when it comes to widget_icon. Is this a known issue or am I doing something wrong here?
You should look into the ImageView ScaleTypes
It looks like you might also not understand how weight works
typically you would set width or height to 0dp and then set the weight. if you have 2 items and you set the weights to 1 they would both take up half of the respective width or height.. if you set one to 1 and the other to 2, then the one set to 2 would take up 2/3 of the layout's width or height and the one set to 1 would be 1/3
hope that helps

Extra Padding On Top Of My Images

I have a LinearLayout (Horizontal) that I am using to display 3 ImageViews. When I first add the ImageViews the last one is shrunk because the images are too big to fit 3 across. Here is what my designer screen looks like:
Notice the third image is shrunk.
To fix this issue I set the following attributes on each ImageView.
width: 0dp
weight: 1
Here is how my images look after setting those attributes:
The problem I am running into is even though the images have been shrunk there is still space at the top and bottom as shown by the blue rectangle in the following image:
My question is, why is this extra padding there and how can I get rid of it?
Thank you
UPDATE - adding my layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#color/app_background_color"
android:contentDescription="#string/game_image_button"
android:gravity="center"
tools:context=".EasyActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
</LinearLayout>
</RelativeLayout>
ImageViews support different ScaleTypes, the default is FIT_CENTER. here are the other options. FIT_CENTER means its going to start out with height and width equal to your image (what your images looked like in the first screen shot before you added weight). What I believe happened is that it then resized the width of the image based on your layout_weight, and maintained the image's aspect ratio by shrinking it to fit the new width. It left the height to be the original height and centered the result.
I think one of the other scale types would do what you want. Maybe CENTER or CENTER_INSIDE
You can use the following code
<Imageview.....
android:adjustViewBounds="true"
..../>

ImageView - how to force scaling the width uniformly having defined the height

I defined two ImageViews and set the background like this:
int tmpID = findViewById(R.id.mypng)
ImageView tmpIV.setBackgroundResource(tmpID);
And this is the xml with the Image views:
<RelativeLayout
android:id="#+id/myDisplay"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp" >
<ImageView
android:id="#+id/b1"
android:layout_width="300dp"
android:layout_height="match_parent"
android:contentDescription="#string/anyStringValue"
android:scaleType="fitCenter" />
<ImageView
android:id="#+id/b2"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/b1"
android:contentDescription="#string/anyStringValue"
android:scaleType="fitCenter" />
Now all that should happen is that when I set the background of the imageviews, the png adjusts uniformly its size to the parents 100dp height while the width should scale uniformly - down or up.
I tried to set the width smaller and larger. When its set to 300dp for example then it stretches the png width to 300 and 100 height while it should only stretch it's width so far that the height reaches 100.
I thought "fitCenter" would do that. I also tried all the other attribute values, but without luck.
Thanks!
android:scaleType only take care about the android:src why don't you use that param?? do you really want use background and don't set a source?
Maybe yoy can have one RelativeLayout with two ImageView for each imageView, one with the "background scaled" and the der with the real source.

Categories

Resources