DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

18-07-2016

En esta entrada explicaremos como crear nuestro propio layout personalizado en Android, en específico nos interesa crear un layout que sea cuadrado que luce de la siguiente manera:

Ejemplo de un layout cuadrado en android

Para esto debemos escoger un layout previamente existente en Android como el RelativeLayout o el LinearLayout, y esto es para valernos de toda sus atributos, métodos y estructura en general y sobrescribir lo que nos interesa que es una simple función; para este ejemplo emplearemos un LinearLayout y sobreescribimos el método:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

Quedando definido nuestro layout de la siguiente forma:

public class SquareLayout extends LinearLayout {

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

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

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

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

Cómo podemos apreciar, único que debemos hacer es modificar esta simple línea super.onMeasure(widthMeasureSpec, widthMeasureSpec); con esto indicamos que el ancho y largo del contenedor deben ser iguales lo que por definición es un cuadrado.

Ahora, al crear el siguiente layout para nuestra actividad:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="com.insta.andre.customlayout.MainActivity">

   <com.insta.andre.customlayout.layout.SquareLayout
       android:id="@+id/squareContainer"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:padding="5dp"
       android:orientation="vertical"
       android:background="#00FF00">

       <ImageView
           android:id="@+id/iIcono"
           style="@style/ImageViewSquareRegular"/>

       <TextView
           android:id="@+id/tvNombre"
           android:layout_below="@id/iIcono"
           style="@style/TextViewSquareRegular" />

   </com.insta.andre.customlayout.layout.SquareLayout>

</RelativeLayout>
Solo debemos modificar la línea super.onMeasure(widthMeasureSpec, widthMeasureSpec); para obtener un cuadrado.

Obtenemos la siguiente vista desde nuestro render:

Fijate bien que estamos instanciando a la clase definida anteriormente (com.insta.andre.customlayout.layout.SquareLayout), y los layouts definidos por defecto por Android.

Podemos emplear esta clase que definimos en los adaptadores para listados y grid o cualquier otra cosa; por ejemplo emplear los RecyclerView: de Android para obtener un sistema de grids como el siguiente:

Ejemplo de un layout cuadrado en un grid - android

Puedes ver el código completo en el repositorio de GitHub:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Templates para Android y iOS

Templates para Android y iOS

Algunos artículos que te pueden interesar

MediaPlayer para reproducir audios en Android

MediaPlayer para reproducir audios en Android

Se explica cómo reproducir un audio en Android con la clase MediaPlayer y cómo preparar los audio y/o videos de manera asíncrona.

Andrés Cruz 20-03-2017

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

Desarrollando aplicaciones de Realidad Aumentada con Wikitude (parte 3)

En este artículo veremos cómo agregar capas de información cuando los Targets son reconocidos por el Tracker.

Andrés Cruz 06-03-2014

Las primeras apps: Dolphin Note y List 1.0

Las primeras apps: Dolphin Note y List 1.0

Hoy les vengo a hablar de un par de aplicaciones que he venido desarrollando hace unos cuantos meses para Android y que he puesto finalmente en la Google Play.

Andrés Cruz 10-08-2015