Search code examples
androidandroid-imageviewgrid-layoutandroid-gridlayout

Auto-scale an image in GridView


I have a simple grid view with an image on the left and two lines of text right beside the image. The "rowspan" of the image is 2 in order to use the full height of the two lines of text:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:rowCount="2"
    android:columnCount="2">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_row="0"
    android:layout_rowSpan="2"
    android:src="@drawable/disconnected" />

<TextView
    android:id="@+id/connectionText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:layout_column="1"
    android:layout_row="0"
    android:layout_rowSpan="1"
    android:inputType="textPersonName"
    android:text="Name" />

<TextView
    android:id="@+id/stateText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:layout_column="1"
    android:layout_row="1"
    android:layout_rowSpan="1"
    android:inputType="textPersonName"
    android:text="disconnected" />
</GridLayout>

My problem: I would like to auto-scale the image to a size which fits to the height of the two lines of text instead of appearing with it's native height. Is there a way to let the Layout do that automatically?

Thanks!


Solution

  • <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rowCount="2"
            android:columnCount="2">
    
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_row="0"
            android:scaleType="fitCenter"
            android:layout_rowSpan="2"
            android:src="@drawable/disconnected" />
    
        <TextView
            android:id="@+id/connectionText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:layout_column="1"
            android:layout_row="0"
            android:layout_rowSpan="1"
            android:inputType="textPersonName"
            android:text="Name" />
    
        <TextView
            android:id="@+id/stateText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:layout_column="1"
            android:layout_row="1"
            android:layout_rowSpan="1"
            android:inputType="textPersonName"
            android:text="disconnected" />
    </GridLayout>
    

    I have modified your xml, it may help. I have given specific width and height value and set the scale type to fit center.

    you can set dynamic height by programming, this code will help you

            int first_view_hight = firstView.getLineHeight(); 
    
    
            int second_view_height = secondView.getLineHeight();
    
    
            int totalHeight = first_view_hight + second_view_height;
    
    
            GridLayout.LayoutParams lp = (GridLayout.LayoutParams) setHeightImage.getLayoutParams();
            lp.height = totalHeight;
            lp.width = totalHeight;
            imageView.setLayoutParams(lp);