Estilos

El uso de estilos permite reutilizar definiciones a lo largo de las diferentes pantallas y hace más fácil su actualización. Una herramienta eficaz en aplicaciones de muchas pantallas.

 

nDroidEs Episodio 4

El episodio 4 contó con la presencia de Pablo Castro, quien tiene un año trabajando con el markup de la intefaz de Android.

Prmiero se habló de como se trabaja en equipo en Possible Worldwide para desarrollar aplicaciones para Android.

Luego Pablo nos comentó, como trabaja los diseños que recibe del área creativa en forma de PSDs para crear los archivos necesarios que ocupa una aplicación en forma de assets, llamense pngs, jpgs, etc. Estos archivos que genera Pablo irán en la carpeta “res” y donde la imágenes irán en las carpetas según su densidad.

También nos comentó Pablo como es trabajar con las herramientas de Eclipse y de Android para revisar la interfaz hecha.

Pablo además explicó las generalidades de algunos “layouts”,que son los contenedores para crear la interfaz. Entre ellos explicó los más importantes como son el LinearLayout, RelativeLayout y TableLayout.

Por último, Pablo explicó como se utiliza el “ninepach” y como se crean en Android.

Agradecimientos a Pablo por acomañarnos y a Possible Worldwide por hospedarnos este episodio.

Pablo muy amablemente nos compartió la presentación sobre Android UI para más información.

Como “meter” otros componentes dentro de un EditText en Android

Normalmente, los campos editables de texto vienen acompañados de otros componentes como botones, imagenes, para ejecutar alguna acción. Pero puede que en algún momento ocupen hacer que su aplicación luzca como esto:

Botón dentro de un EditText

Botón dentro de un EditText

La respuesta para la ingcógnita de ¿Cómo se hace? es : imposible usando los componentes nativos de Android . Otra opción es que usted sea un experimentado desarrollador, con ganas de crear componentes nuevos podría usted crear un componente propio que lo haga.

¿Qué pasa con el resto de los mortales como nosotros? Podemos usar el siguiente “truco” (con el que se hizo la imagen anterior):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<RelativeLayout 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		style="@android:style/Widget.EditText">
		<EditText
			android:hint="Type here" 
			android:layout_width="fill_parent"
			android:layout_height="wrap_content" 
			android:layout_toLeftOf="@+id/SearchButton" 
			android:background="@null" 
			android:layout_centerVertical="true"/>
		<ImageButton 
			android:layout_width="wrap_content" 
			android:layout_height="wrap_content" 
			android:layout_alignParentRight="true" 
			android:id="@+id/SearchButton" 
			android:src="@drawable/ic_menu_search" 
			android:background="@null"/>
	</RelativeLayout>
</LinearLayout>

Básicamente lo que se hace en el XML, es aplicar el estilo de campo editable de texto @android:style/Widget.EditText al layout que contiene a los componentes que queremos agrupar, en este caso un EditText y un ImageButton. Luego hay que “quitarle” el fondo al EditText (o ponerle el fondo @null, como gusten llamarlo) para que se vuelta “transparente”.