Keep aspect ratio of view when using layout_weight property - android

I have a LinearLayout with an ImageView inside. The ImageView is using layout_weight to take up half of the width of the LinearLayout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1" />
</LinearLayout>
Now, what I want to do is make sure this ImageView is already a square. I can't simply set the height because the width is dynamic, depending on the width of the current screen. Is there a way I can make sure the height always matching the width of the view?
I've tried this:
imageView.getLayoutParams().height = imageView.getLayoutParams().width;
imageView.requestLayout();
But I get a NPE. Any ideas?

Related

set ImageView' height accordingly to its set width and aspect ratio, in a ScrollView

I have below a ScrollView so that the user would be able to scroll the question container(ImageView + TextView), if the questions text is very enormous. The problem is that I want the ImageView to take the height based on its aspect ratio and width set with the help of layout_width set to match_parent attribute.
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/set_1_question_2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:textSize="18sp"
android:text="#string/app_set_1_question_2_text" />
</LinearLayout>
</ScrollView>
As in the Image below, by hovering the LinearLayout of ScrollView parent, it's showing that it's height is equal with image original height ~ 1100px + the height of TextView.
Wherever I put the layout_height set to wrap_content or 0dp with weight set 1, it seems that it doesn't work either.
Any appropriate solution would be very helpful, because I am just starting off with Android developing and I am stuck with this problem.
EDIT:
After searching through all methods for ImageView on https://developer.android.com/reference/android/widget/ImageView.html, I found this method:
android:adjustViewBounds Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.
Which works perfectly for my case, thanks for everyone that tried to solve my problem. :)

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.

Auto-size ImageView (besides TextView) and parent height, while persevering aspect ratio

I am struggling with newbie question.
I have a layout defined like this: (it is used as listview item)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="horizontal" >
<ImageView
android:id="#+id/articleSmallImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:orientation="vertical" >
<TextView
android:id="#+id/newsIntroText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="TextView"
android:textColor="#color/black" />
</LinearLayout>
</LinearLayout>
What i want to achieve is this:
Parent layout height to resize according to the highest child. In this case if TextView is higher then ImageView, ImageView aspect ratio should be intact, with max width possible, and if ImageView i higher then TextView, again, width should be maximal, and parent should have height as ImageView.
This is actually screenshot from my app, running on JB 4.3. and is looks as expected. But on ICS 4.0.3, 4.0.4 it looks like this.
I cannot see any reason why ImageVIew is not filling that blank space.
Help..
Try the value fitXY for scaleType. Btw unless I'm missing something, I think your LinearLayout1 is useless. Also, like YouYou said.. If a weight has been set in a vertical layout, the height should be 0dp and in a horizontal linear layout, the width should be set to 0dp for better performance.

Does LinearLayout have a max height?

I have a vertical linearlayout that won't stretch beyond a certain limit.
This is the layout with centerCrop in the imageview
http://tinypic.com/r/20nm6s/5
This is the layout with no crop set (so it should be full width and huge)
http://tinypic.com/r/vzk7kw/5
So my thought is that there is some implicit max height that I'm not seeing in my layout but I can't see where it is, can you spot my error?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/dropshadow"
>
<TextView
android:id="#+id/heading"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<ImageView
android:id="#+id/featuredimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxHeight="1000dp"
android:scaleType="centerCrop"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
</LinearLayout>
</RelativeLayout>
The "implicit" max height of the layout is the height of its parent. Since you're using wrap_content on both layouts, that means the parent is effectively the screen area, minus whatever other views you're using (such as the TextView). Unless you place it in a scrolling container, such as a ScrollView, it won't ever exceed the size of the screen.
The reason your ImageView isn't showing up "full width and huge" when you remove the crop is because the default scaleType for an ImageView is fitCenter. This particular view is bounded by the layout's width, so it shrinks the image while maintaining aspect ratio.

android layout scaling with fixed aspect ratio on different phones

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.

Categories

Resources