Resize icons / images according to screen resolution in Android

Question

Resize icons / images according to screen resolution in Android

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a main screen in my application that shows a DashBoard. In it there is a container where I have 6 icons, which are buttons to access other activities.

I need the margins between the edge of the container and the icons to be 25dp, AND ALSO, the space between the icons is always 25dp.

In the image the margin of the container and of nearby icons is ok. But the margin between central and lateral icons is separated the larger the resolution / screen is.

That is, as I understand it, I need the icons / images to be resized according to the resolution / size of the screen. Is not it so?

I tried to do it with the new ConstraintLayout layout, but I could not.

I leave here the simplified XML:

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnOrderPreserved="false"
    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:columnCount="3">

    <ImageView
        android:src="@drawable/ic_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idinfo"
        android:padding="16dp" />

    <ImageView
        android:src="@drawable/ic_inbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idinbox"
        android:padding="16dp" />

    <ImageView
        android:src="@drawable/ic_alerts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idalerts"
        android:padding="16dp" />

    <ImageView
        android:src="@drawable/ic_stats"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idstats"
        android:padding="16dp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idsocial"
        android:src="@drawable/ic_social"
        android:padding="16dp" />

    <ImageView
        android:src="@drawable/ic_skinav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:id="@+id/idskinav"
        android:padding="16dp" />

</GridLayout>

android android-layout

asked by daicon 14.09.2016 в 17:25

source

2 answers

2

A solution may be to add AndroidManifest above the tag <Activity the following

<supports-screens>

        android:resizeable="true"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"

    </supports-screens>

Another solution is to use different drawables for the different resolutions such as (drawables-hdpi, drawables-xhdpi, etc.).
As a unit of size, use dp better than px .
Avoid using absolute sizes, use margins and leave Let Android scale alone.
To use different sizes / font button and margins, you You must use the dimens.xml .

for example

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

and see what happens, another thing, did you try with fitxy in your layout?

greetings

answered by 14.09.2016 в 17:55

Pass data between controllers within a tab bar IOS swift3 How can I change the icon of a Windows Form?

score 0 · Accepted Answer

VAle, here I bring the solution after two days, it has cost me, but it has been perfect, as indicated in a comment above, it is necessary to do it programmatically:

The first thing was to create this class that extends from ImageView:

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);

}
}

Now that we have this, we only have the layout, as you will see, it is not exactly like the one above, because although for API > 21 worked, due to a parameter below the API 21 the icons disappeared.

I leave here the new layout:

 <TableLayout
    android:background="@drawable/corners_main_layout"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginStart="@dimen/padding_white"
    android:layout_marginEnd="@dimen/padding_white"
    android:layout_marginLeft="@dimen/padding_white"
    android:layout_marginRight="@dimen/padding_white"
    android:layout_marginTop="@dimen/padding_white"
    android:id="@+id/constraintLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*"
    android:shrinkColumns="0,1,2" >

    <TableRow
        android:id="@+id/columna1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout3"
            android:paddingLeft="25dp"
            android:paddingTop="25dp">
            <....Utils.SquareImageView
                android:src="@drawable/ic_info"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:paddingTop="25dp">
            <....Utils.SquareImageView
                android:src="@drawable/ic_skinav"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout9"
            android:layout_marginRight="25dp"
            android:layout_marginTop="25dp">
            <......Utils.SquareImageView
                android:src="@drawable/ic_social"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </LinearLayout>
    </TableRow>

    <TableRow
        android:id="@+id/columna2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout8"
            android:layout_marginLeft="25dp"
            android:paddingTop="25dp">
            <.......Utils.SquareImageView
                android:src="@drawable/ic_stats"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout10"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            android:paddingTop="25dp">
            <..............Utils.SquareImageView
                android:src="@drawable/ic_alerts"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:orientation="vertical"
            android:id="@+id/linearLayout2"
            android:paddingBottom="25dp"
            android:paddingRight="25dp"
            android:paddingTop="25dp">
            <......Utils.SquareImageView
                android:src="@drawable/ic_inbox"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:id="@+id/idinbox"
                android:background="@drawable/shadow_custom" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="@string/inbox"
                android:layout_gravity="center"
                android:textColor="@android:color/black"
                android:textSize="16sp" />

        </LinearLayout>
    </TableRow>

</TableLayout>

And that's it, with this it works for all the APIs and resizes the images perfectly