1

I have a parent LinearLayout with an ImageView and a child LinearLayout inside. The LinearLayout child has text inside it that can have different lengths. I would like that the ImageView was always of the same size (200dpx200dp) and only scaled down proportionally it if the text of the child LinearLayout overflow.

To do that I have used layout_weight and maxHeight in the ImageView child, but due to the layout_weight, maxHeight is not working. The ImageView is not squared when the text of the child LinearLayout doesn't overflow, instead is displayed rectangular.

How could I do it?

This is the code

<ImageView
        android:id="@+id/charImage"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:maxWidth="200dp"
        android:maxHeight="200dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/jon_snow" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">
        ----some childs----
   </LinearLayout>

This is how it should like, a square ImageView with some text underneath, independently of the length of the text.

enter image description here EDIT

I have tried to modify onMeasure() of custom ImageView, but it's not resizing properly and it's taking some of the space of the LinearLayout child and the text overflows

  @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int height = Math.min(widthMeasureSpec, Math.min(heightMeasureSpec, dpToPx(200)));
    setMeasuredDimension(height, height);

}

private int dpToPx(int dp){

    float density = getResources().getDisplayMetrics().density;
    return Math.round((float)dp * density);
}
Spirrow
  • 1,120
  • 6
  • 18

1 Answers1

0

There is no promise that an image will be squared just because its max width and height are squared. All that means is if it fills its max size in both directions it would be square. If you want to ensure its squared, subclass ImageView and override onMeasure to force it to square dimensions.

I also have no idea if weight works with maxXXX at all. But worse case you can make it all work in onMeasure by forcing it to go no larger than 200.

Gabe Sechan
  • 90,003
  • 9
  • 87
  • 127
  • I have tried to override the onMeasure method, and the ImageView is displayed squared, but if I do that, it doesn't re-size if the text of the LinearLayout overflows. I used this answer http://stackoverflow.com/questions/16506275/imageview-be-a-square-with-dynamic-width – Spirrow Mar 07 '16 at 11:13
  • You'll need the onMeasure work to assure a square. But you want to do it a bit different. Set both the width and height to Math.min(widthMeasureSpec, Math.min(heightMeasureSpec, 200dp)). Basically to the allowed width, height, or 200dp whichever is smallest. – Gabe Sechan Mar 07 '16 at 11:22
  • Note that the measure spec amounts are in pixels, so you need to convert 200dp into pixels rather than using 200 as a constant. – Gabe Sechan Mar 07 '16 at 11:26
  • Hi Gabe I couldn't test it earlier I have edited the post with your solution, maybe I did something wrong, but it's not working. – Spirrow Mar 07 '16 at 18:37