Problema diseñar layout para diferentes tamaños (caso Galaxy S2 Y S3

[ephramdoyle]

Hola,

Llevo varios días leyendo muchos foros, blogs, la documentación oficial pero no consigo saber como hacerlo bien...

Yo hago los diseños en Photoshop con la resolución 800x480 ya que utilizo de base y de emulador principal mi Galaxy S2 (hdpi).
En los xml trabajo con RelativeLayout, valores dp (en lugar de pixels) y realizo las conversiones a Alta densidad (240) hdpi. Conversor online de px a dp (http://labs.rampinteractive.co.uk/android_dp_px_calculator/).

Hasta ahora me ha ido bien trabajar así, pero ahora estoy intentando realizar una aplicación en horizontal (landscape) y tengo problemas.

Realizo el mismo proceso de siempre y en el S2 consigo que se vea como quiero, pero resulta que en un S3 se ve desproporcionado y movido (captura 2).

Entonces para adaptarlo he creado el directorio de "layout-xhdpi" y he convertido las imágenes de drawable a su tamaño respectivo para "drawable-xhdpi" con la herramienta Simple Nine-patch Generator (http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html). Y los valores de ancho y altura los convierto de nuevo a dp pero esta vez a Muy Alta densidad (320) xhdpi.

Pero sigue quedando mal. ¿Alguna idea?

[kriogeN]

He tenido un problema similar hace poco para el proyecto en el que estoy trabajando:

1) Quita el android:scaleType="fitXY"

2) Usa en su lugar android:adjustViewBounds="true"

Si aún así sigue sin funcionar bien, añade la siguiente clase a tu proyecto y úsala en el Layout en lugar del ImageView:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class FullWidthImageView extends ImageView {

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
Drawable d = getDrawable();

if(d!=null){
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
}else{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

}

[ephramdoyle]

Muchas gracias por responder kriogeN.

1) He probado de quitar en ambos layouts el android:scaleType="fitXY" y reemplazarlo por android:adjustViewBounds="true".

En el caso de layout-hdpi (GS2) deja de verse bien a verse con espacios en los laterales.
En el caso del layout-xhdpi (GS3) sigue viéndose igual, con la separación..


2) He implementado la clase y reemplazado el ImageView de /layout-xhdpi/acceso.xml por:
<mi.proyecto.FullWidthImageView
android:id="@+id/iv_bg_login_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:src="@drawable/bg_login_top" />

Y ahora pasa a ocupar todo el ancho. Gracias!

Por curiosidad he probado de aplicar lo mismo en hdpi/acceso.xml (la vista que ya funcionaba bien sin hacer cosas extras) y entonces la imagen pasa a ser algo más alta y los botones quedan inferiores quedan pegados.
De todas formas no aplico este sistema a ese layout y solucionado.

Pero sigo teniendo una duda. Aplicando la clase que me has aconsejado he podido corregir la imagen superior. Pero el resto de objetos, en este caso los botones siguen quedando desproporcionados.

No se si es la solución pero he intentado crear una nueva clase basada en la personalizda de ImageView por Button:

public class FullWidthButtonView extends Button {

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getBackground();

if (d != null) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = (int) Math.ceil((float) width
* (float) d.getIntrinsicHeight()
/ (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}

Esto no peta pero el botón pasa a ocupar todo muy deforme...

¿Cómo tratas al resto de objetos?

[kriogeN]

No suelo tener problemas con los Layout trabajando con DP y RelativeLayout. No se porque hay tanta gente en el foro que tiene problemas con esto. Y las pruebas las hago con MDPI y HDPI (Galaxy Ace de la empresa y mi LG Optimus 3D personal).

La clase del ImageView la tuve que hacer porque quería un ImageView que me ocupase todo el ancho pero sin deformarme el alto, hasta ahora con botones no he tenido problemas.

[ephramdoyle]

En este otro sitio tratan un tema bastante parecido: https://groups.google.com/forum/#!topic/android-startup/r_q37ZsgBxI

Seguiré probando, cuando encuentre la solución la publicaré.

[neowendigo]

No suelo tener problemas con los Layout trabajando con DP y RelativeLayout. No se porque hay tanta gente en el foro que tiene problemas con esto. Y las pruebas las hago con MDPI y HDPI (Galaxy Ace de la empresa y mi LG Optimus 3D personal).

La clase del ImageView la tuve que hacer porque quería un ImageView que me ocupase todo el ancho pero sin deformarme el alto, hasta ahora con botones no he tenido problemas.

El problema es cuando se quiere una ubicación pixel-perfect. Tienes una imagen que ocupa todo el fondo y quieres ubicar un objecto en una posición concreta y exacta. Ahí es cuando el sistema de layouts de Android se viene abajo y hay que andar haciendo artesanía. No sabes cuánto del fondo vas a perder dependiendo de la resolución/tamaño del tablet (dpi). Ya que además, cada API level tiene un espacio útil diferente para la UI.

Evidentemente para una UI normal y corriente un RelativeLayout funciona a las mil maravillas.