Android, Chess y Layout - (Parte I)

Estoy intentando hacer una aplicación de ajedrez sencilla en Android. Como el diseño de pantallas en Android es en XML y es un poco complicado.... voy a hacer un proyecto nuevo de android vacío, desde cero, para tener únicamente las pantallas sin ningún tipo de comunicación con el backend, para poder tener la cáscara de la aplicación, sin complicarme con la lógica de negocio de la misma.

Con tal fin, hacemos este post, con el objetivo de mostrar una imágen de un diagrama de ajedez, y dos botones arriba.

Comencemos

Paso 00: Carga Inicial

El directorio de trabajo local es:

/Users/pabloin/Desktop/NoCuestaNada/Mob/GitHub-Android-Chess/ChessLab02

Paso 01: Areas de Activity

Luego, al activity default, le empezamos a editar nuestro prototipo:

Aline dos Linear Layout: Uno con orientación vertical, y otro otro, para la botonera con orientación horizontal. Le pinte el fondo, con distintos colores para poder visualizar a los espacio

Lo cual se ve de la siguiente manera:

Paso 02: Agregar una Imagen al proyecto

Para agregar la imágenes, tenemos que crear los directorios:
“res/drawable-ldpi“,
“res/drawable-mdpi”
“res/drawable-hdpi“.

Android automáticamente tomara la imagen de acuerdo al dispositivo que ejecuta la aplicación ¿Con que criterio?

Se puede consultar:
https://developer.android.com/guide/practices/screens_support.html

Otro:
https://github.com/codepath/android_guides/wiki/Working-with-the-ImageView

La siguiente tabla ayudaría:

• 36x36 for low-density (LDPI)
• 48x48 for medium-density (MDPI)
• 72x72 for high-density (HDPI)
• 96x96 for extra high-density (XHDPI)
• 180x180 for extra extra high-density (XXHDPI)
• 192x192 for extra extra extra high-density (XXXHDPI)

Voy a copiar parte de una explicación de stack overflow sobre este tema, disculpen que esté en Ingles:

http://stackoverflow.com/questions/14381965/image-size-drawable-hdpi-ldpi-mdpi-xhdpi

mdpi is the reference density -- that is, 1 px on an mdpi display is equal to 1 dip. The ratio for asset scaling is:

ldpi | mdpi | hdpi | xhdpi | xxhdpi | xxxhdpi 

0.75  |  1   | 1.5  | 2     | 3      | 4 

What this means is if you're doing a 48dip image and plan to support up to xhdpi resolution, you should start with a 96px image (144px if you want native assets for xxhdpi) and make the following images for the densities:

ldpi    | mdpi    | hdpi    | xhdpi     | xxhdpi    | xxxhdpi
36 x 36 | 48 x 48 | 72 x 72 | 96 x 96   | 144 x 144 | 192 x 192

And these should display at roughly the same size on any device, provided you've placed these in density-specific folders (e.g. drawable-xhdpi, drawable-hdpi, etc.)

For reference, the pixel densities for these are:

ldpi  | mdpi  | hdpi  | xhdpi  | xxhdpi  | xxxhdpi
120   | 160   | 240   | 320    | 480     | 640

Continuemos:

Las imágenes que queremos agregar son los diagramas de ajedrez, por ejemplo, uno:

Mate en dos de las blancas:

La imagen tiene dimensiones 392x 394

Vemos como quedó agregada al ejercicio:

Para agregar las imágenes, organizamos los siguientes directorios, donde el mismo contenido está copiado en los tres directorios:

“res/drawable-ldpi“,
“res/drawable-mdpi”
“res/drawable-hdpi“.

Luego, en el Android Studio, veamos como se relacionan:

Paso 03: Cambiamos la imagen dinámicamente ante un evento de click

Este paso es también bastante sencillo, vamos a agregar el mínimo código Java en el mainActivity para que funcione

Observar el "onClick"

Y el código Java simplemente:

O sea, definimos la ImageView y el método OnClick

Disculpen por la forma tan precaria de implementar la rotación de las 11 imágenes, obviamente esto no es viable de ninguna manera, pero servía para el ejemplo de este post, que es un poco descartable.... 

   
  ImageView image;
  int idx = 0;
  @Overrideprotected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);   
      setSupportActionBar(toolbar);
      FloatingActionButton fab = (FloatingActionButton)  
          findViewById(R.id.fab);    
          fab.setOnClickListener(new View.OnClickListener() {
          @Override        
          public void onClick(View view) {
              Snackbar.make(view, "Replace with your own action",
              Snackbar.LENGTH_LONG)
                      .setAction("Action", null).show();        }
      });

      image = (ImageView) findViewById(R.id.chess_board_image);

  }
  public void nextMateEn2(View view) {

      Log.d(TAG, "NETX - nextMateEn2 " +  idx);
      Log.d(TAG, "nextMateEn2 " + idx);
      idx ++;
      if (idx > 11) {
          idx = 0;    }

      if (idx == 0) {
          image.setImageResource(R.drawable.chess_mate2_00000);    }

      if (idx == 1) {
          image.setImageResource(R.drawable.chess_mate2_00001);    }

      if (idx == 2) {
          image.setImageResource(R.drawable.chess_mate2_00002);    }

      if (idx == 3) {
          image.setImageResource(R.drawable.chess_mate2_00003);    }

      if (idx == 4) {
          image.setImageResource(R.drawable.chess_mate2_00004);    }

      if (idx == 5) {
          image.setImageResource(R.drawable.chess_mate2_00005);    }

      if (idx == 6) {
          image.setImageResource(R.drawable.chess_mate2_00006);    }

      if (idx == 7) {
          image.setImageResource(R.drawable.chess_mate2_00007);    }

      if (idx == 8) {
          image.setImageResource(R.drawable.chess_mate2_00008);    }

      if (idx == 9) {
          image.setImageResource(R.drawable.chess_mate2_00009);    }

      if (idx == 10) {
          image.setImageResource(R.drawable.chess_mate2_00010);    }

      if (idx == 11) {
          image.setImageResource(R.drawable.chess_mate2_00011);    }

      // Toast.makeText(this, "Boton Click", Toast.LENGTH_SHORT);

  }

Estas son tres capturas del layout que responden al evento on click de los mates en 2, observemos como la imagen de la aplicación se modifica:

  

Con esto damos por cerrado los objetivos del post,

Fuentes en GitHub

Pueden tomar el ejercicio de GitHub en el siguiente branch

https://github.com/PabloEzequiel/Android/tree/ChessLab02