daicon daicon - 2 months ago 13
Android Question

Resize grid with images vertical - android

I need images have the container size "GridLayout" according to the size.

Just catch their horizontal size, but I also need the vertical.

What am I missing? thanks

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/fondo_01">


<GridLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:useDefaultMargins="false"
android:background="@drawable/corners_main_layout"
android:animationCache="false"
android:layout_margin="@dimen/padding_white"
tools:layout_margin="@dimen/padding_white"
android:columnOrderPreserved="false"
android:columnCount="3">


<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout">
<ImageView
android:src="@drawable/ic_skinav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idskinav" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/skinav"
android:layout_gravity="center"
android:textColor="@android:color/black"
/>
</LinearLayout>

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout9">
<ImageView
android:src="@drawable/ic_social"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idsocial" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/social"
android:layout_gravity="center"
android:textColor="@android:color/black"
/>
</LinearLayout>

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout8">
<ImageView
android:src="@drawable/ic_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idstats" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/stats"
android:layout_gravity="center"
android:textColor="@android:color/black" />
</LinearLayout>

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout10"

>
<ImageView
android:src="@drawable/ic_alerts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idalerts" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/alerts"
android:layout_gravity="center"
android:textColor="@android:color/black" />
</LinearLayout>

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout2">
<ImageView
android:src="@drawable/ic_inbox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idinbox" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/inbox"
android:layout_gravity="center"
android:textColor="@android:color/black"
/>

</LinearLayout>

<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_columnWeight="1"
android:id="@+id/linearLayout3">
<ImageView
android:src="@drawable/ic_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="@+id/idinfo" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/info"
android:layout_gravity="center"
android:textColor="@android:color/black"
/>
</LinearLayout>

</GridLayout>


</LinearLayout>


Is there another easier way to do it? I tried with the new ConstraintLayout but I have not succeeded.

------UPDATE----

enter image description here

Answer

You can use Square Image View for proper sizing of your Grid Items.

Create a separate class for defining the size dynamically for your ImageView that should inherit ImageView class as shown below:

    public class SquareImageView extends ImageView {

    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

    int width = getMeasuredWidth();
        setMeasuredDimension(width, width);

    }
}

The setMeasuredDimension(width, width); will automatically set your height as the width.

In xml file use this class as a view in place of ImageView as shown below:

<com.packagepath.SquareImageView
    android:id="@+id/Imageview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
Comments