DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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

Templates para Android y iOS

Templates para Android y iOS

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Algunos artículos que te pueden interesar

¿Cómo instalar el ADT Bundle de Android?

¿Cómo instalar el ADT Bundle de Android?

El ADT Bundle nos permite desarrollar aplicaciones para Android rápidamente; nos ofrece un entorno de desarrollo ya completo e integrado sin necesidad de hacer alguna configuración previa o posterior a su instalación.

Andrés Cruz 02-09-2013

Puntos de Interés (POI) con Realidad Aumentada en Wikitude

Puntos de Interés (POI) con Realidad Aumentada en Wikitude

En este artículo veremos cómo marcar un sitio a través de Puntos de Interés (POI); en otras palabras reconocer una zona por su posicionamiento geográfico.

Andrés Cruz 16-04-2014

Realidad Aumentada con Wikitude

Realidad Aumentada con Wikitude

Wikitude es una SDK gratuita que permite la creación de aplicaciones de realidad aumentada con Android y IOS utilizando tecnologías web (HTML, javaScript,CSS) o código nativo y cuenta con características como soporte a geolocalización y reconocimiento de

Andrés Cruz 13-03-2017