taller android utpl: estilos y diálogos

TALLER ANDROID

PARTE 4

AGENDA

EstilosCrear la “hoja de estilos”ShapesEjercicio

Diálogos Crear un Diálogos Ejercicio

Estilos

Se sigue la misma filosofía que la CSS en el

diseño web.El estilo es una apariencia que se aplica a una vista• Color de texto • Tamaño de fuente • Imagen de fondo

En Android el estilo se especifica en un archivo XML

Estilos

Crear la “hoja de estilos” Definir un estilo se crea un archivo

“styles.xml” en res/values con el tag <resources>. Para cada estilo se añade un tag <style>.

Ejercicio de estilos Dos estilos:

Botón Fondo

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style name=“MyButton"> </style>

<style name="linearLayoutBackground"> </style>

</resources>

Primer paso: texto (android:textColor) blanco para los botones

<item name = “atributo”>valor</item> Colores: #RRGGBB Rojo = #FF0000; Blanco = #FFFFFF; Negro = #000000

Aplicando el estilo: en layout.xml <Button style=“@style/MyButton” />

Shapes Dentro de la carpeta drawable podemos

incluir formas definidas por XML Estas formas pueden ser utilizadas como si

fueran imágenes Ubicación:

res/drawable/rectangular_shape.xml

Ejercicio de Estilos Referencia shapes en XML:

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Atributo para el estilo: <item name="android:background">

@drawable/rectangular

</ item>

Diálogos Son ventanas que se muestran delante de las

actividades Muestran información u opciones en forma de

pop-up Para lanzar un Dialog, función showDialog( int id

) Creación del Dialog: sobreescribir método de Activity:

protected Dialog

onCreateDialog(int id) {

return new

AlertDialog.Builder(this).create

}

Ejercicio diálogos Mostrar diálogo: showDialog(int id) Crear diálogo: onCreateDialog(int id)

return new AlertDialog.Builder(this)

.setIcon(R.drawable.ic_launcher)

.setTitle("Mi diálogo")

.setMessage("Este mensaje se muestra en el diálogo")

.setPositiveButton("De acuerdo",

new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

// Acción al pulsar el botón }

}).create();

Ejercicio diálogos Botón de respuesta positiva (OK):

setPositiveButton(…) Botón de respuesta neutral (Volver)

setNeutralButton(…) Botón de respuesta negativa (No)

setNegativeButton(…)

Ejercicio diálogos •Usando una vista personalizada:

setView(View v) Definir la vista en un layout XML Cargar vista desde el código:

LayoutInflater factory = LayoutInflater.from(this); View v = factory.inflate(R.layout.dialog_view, null);