Download - 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);