0

Tengo una pantalla principal en mi aplicación que muestra un DashBoard. En él hay un contenedor donde tengo 6 iconos, los cuales son botones para acceder a otras actividades.

introducir la descripción de la imagen aquí

Necesito que los márgenes entre el borde del contenedor y los iconos sea de 25dp, Y ADEMAS, el espacio entre los iconos sea de 25dp siempre.

En la imagen el margen del contendor y de iconos cercanos está ok. Pero el margen entre iconos centrales y laterales se separa cuanto mas grande es la resolución / pantalla.

Es decir, según entiendo, necesito que los iconos/imágenes se redimensionen según la resolución/tamaño de la pantalla. ¿No es asi?

He intentado hacerlo con el nuevo layout ConstraintLayout, pero no he podido.

Dejo aquí el XML simplificado:

<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>
5
  • Pon cada imagen width como height match parent y las celdas de grid usa weight con el grid ajustado a match_parent, pero cuando más grande sea la pantalla más grande se verán las imagenes, perdiendo toda la consistencia, te recomiendo que te mires la guia de estilo Material Design, así se te puede ocurrir un mejor implementación al diseño.
    – Codelaby
    Commented el 14 sept. 2016 a las 17:02
  • Puedes especificar un poco mas? He editado mi pregunta con el XML que tengo ahora mismo, lo he simplicado quitando las etiquetas, (espero que después no me de problemas).
    – daicon
    Commented el 14 sept. 2016 a las 17:25
  • No soy muy experot en diseño de interfacez pero mirate tabledlayout porque entiendo que siempre quieres 3 iconos por fila
    – Codelaby
    Commented el 14 sept. 2016 a las 17:59
  • nada no me termina de funcionar, se me rellena el horizonte, pero el vertical no me lo rellena :-S
    – daicon
    Commented el 14 sept. 2016 a las 18:52
  • 1
    @daicon esto no es sencillo de resolver con solo agregar medidas en dp o definir dimensiones en tu layout, esto se resuelve programaticamente calculando las medidas de los elementos dentro del contenedor dependiendo del tamaño de la pantalla.
    – Jorgesys
    Commented el 15 sept. 2016 a las 15:18

2 respuestas 2

2

Una solucion puede ser agregar en tu AndroidManifest arriba del tag <Activity lo siguiente

<supports-screens>

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

    </supports-screens>
  • Otra solucion es usar distintos drawables para las distintas resoluciones como (drawables-hdpi, drawables-xhdpi, etc).

  • Como unidad de tamaño usa mejor dp que px.

  • Evitar el uso de tamaños absolutos, utilizar los márgenes y dejar que Android escale solo.
  • Para utilizar diferentes tamaños / botón de fuente y los márgenes, se debe utilizar el dimens.xml.

por ej

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

y fijarte que sucede, otra cosa, probaste con fitxy en tu layout ?

saludos

1
  • Gracias por responder. Te comento... Ya uso varias imágenes según las distincias redimensiones.... pero claro aunque eso solución en parte el problema, no del todo. Lo que quiero es que ocupe SIEMPRE el mismo trozo de espacio en la pantalla, independientemente del tamaño/resolución de esta. Siempre utilizo dp. Lo único que no he utilizado de lo que me has comentado es lo de añadir al manifest del activity esas líneas..... pero no entiendo bien en que ayudan.
    – daicon
    Commented el 14 sept. 2016 a las 16:11
0

VAle, aquí traigo la solución después de dos días, me ha costado, pero ha quedado perfecto, tal y como indican en un comentario de mas arriba, es necesario hacerlo programáticamente:

Lo primero ha sido crear esta clase que extiente de 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);

}
}

Ahora que tenemos esto, solo nos queda el layout, como veréis, no es exactamente como el de arriba, ya que aunque para API > 21 funcionaba, debido a un parámetro por debajo de la aPI 21 desaparecían los iconos.

Dejo aquí el nuevo 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>

Y ya esta, con esto funciona para todas las APIs y redimensiona perfectamente las imagenes

1
  • me encuentro en la misma situación que tu en ese entonces, y quisiera implementar la manera con la que lo solucionaste! Solo me gustaría saber, o mas bien si pudieras explicarme el funcionamiento de esa clase "SquareImageView" Commented el 6 nov. 2020 a las 9:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.