UNIVERSIDAD NACIONAL AUTNOMA DE MXICO

FACULTAD DE INGENIERA
PROGRAMA DE TECNOLOGA EN CMPUTO
CURSOS INTERSEMESTRALES 2014-2

Ciudad Universitaria, Junio 2014

Android Bsico

Tema 5: Widgets bsicos

Atributos de los views
Generales
Atributo XML
android:alpha

android:background
android:clickable
android:contentDescription
android:id
android:onClick
android:tag
android:visibility

Mtodo relacionado
setAlpha(float)

Descripcin
Transparencia del view. Es un valor
entre 0 (totalmente transparente) y 1
(totalmente opaco).
setBackgroundResource(int)
Fondo del view. Puede ser un recurso
tipo drawable o un color.
setClickable(boolean)
Define si el view reacciona a eventos de
tipo Clic.
setContentDescription(CharSequence) Define el texto que describir
brevemente el contenido del view.
setId(int)
Asignar un nombre identificador al view.
Nombre del mtodo que se invocara
cuando se haga clic en el view.
Asignar un tag (etiqueta) al view.
setVisibility(int)
Controla la visibilidad del view: visible,
invisible y gone

Margen y relleno
Atributo XML
android:layout_margin
android:layout_marginTop
android:layout_margin Bottom
android:layout_marginRight
android:layout_marginLeft
android:padding
android:paddingTop
android:paddingBottom
android:paddingRight
android:paddingLeft

Mtodo relacionado

setPadding(left, top, right, bottom)

Descripcin
Margen a todos los lados del view.
Margen superior del view.
Margen inferior del view.
Margen derecho del view.
Margen izquierdo del view
Relleno a todos los lados del view.
Relleno superior del view.
Relleno inferior del view.
Relleno derecho del view.
Relleno izquerdo del view.

Tamao y posicin
Atributo XML
android:layout_widt /
layout_height

Mtodo relacionado

android:width / height

setWidth(int)/setHeight(int)

android:maxWidth /
maxHeight
android:minWidth /
minHeight
android:gravity

setMaxWidth(int)/
setMaxHeight(int)
setMinWidth(int)/
setMinHeight(int)
setGravity(int)

android:orientation

setOrientation()

Descripcin
Especifica el anchoh/alto bsico del view. El valor
asignado depender del View contenedor y del
dispositivo en que se ejecute. Valores posibles:
un valor exacto
MATCH_PARENT (ocupa el espacio del padre)
WRAP_CONTENT (se ajusta al contenido)
Asigna el tamao exacto para el ancho/alto del
view
Asigna el ancho/alto mximo que puede tener el
view
Asigna el ancho/alto mnimo que puede tener el
view
Asigna hacia a donde se orientaran los elementos
hijos del view o el texto
Orientacion de posicionamento de los views hijos

Texto
Atributo XML
android:text
android:textSize
android:textColor
android:textStyle
android:typeface
android:fontFamily
android:hint

Mtodo relacionado
setText()
setTextSize()
setTextColor()
setTypeface()
setHint()

Descripcin
Texto que contendr el view
Tamao del texto del view
Color del texto del view
Estilo del texto del view
Typeface del texto del view
Fuente del texto del view
Texto que aparecer en ausencia de texto
asignado en la propiedad android:text

Transformaciones geomtricas
Atributo XML
Mtodo relacionado
android:scaleX/scaleY
android:translationX/translationY
android:rotation
android:rotationX/rotationY

Descripcin
Escala del view en la direccin X/Y
Translacin del view en direccin X/Y
Rotacin del view
Rotacion del view sobre el eje X/Y

TextView
El control TextView es un elemento bsico en la programacin de interfaces grficas de usuario, las etiquetas de
texto se utiliza para mostrar un determinado texto al usuario.
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"
android:textSize="30sp"
android:textColor="#335577"
android:textStyle="bold|italic"
android:typeface="serif" />

Button
Es el tpico botn normal, contiene un texto y puede contener imgenes de tipo icono que se puede alinear con
el texto.

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Boton"
android:textSize="22sp"
android:onClick="evento" />

Manejo de eventos
Atributo onClick
El atributo onClick se defini de la forma:
android:onClick="evento"
Para que el botn responda a eventos de tipo click, se debe definir un mtodo llamado evento que sea
pblico, regrese void, y reciba un view:

import android.view.View;

public void evento(View v){

//Acciones al presentarse el evento click
}

Al dar clic en el botn, se ejecutara lo indicado en el mtodo evento.

Clase annima
Se debe obtener la referencia del botn para asignarle, de manera annima su listener:
import android.view.View.OnClickListener;
import android.widget.Button;

Button boton = (Button)findViewById(R.id.button1);

boton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//Acciones al presentarse el evento click
}
});

Al dar clic en el botn, se ejecutara lo indicado en el mtodo onClick de la clase annima.

Implementar la interfaz listener para el evento

Implementar la interfaz listener, sobreescribir los mtodos de tal interfaz y registrar al botn al listener.

import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity
implements OnClickListener{

Button boton = (Button)findViewById(R.id.button1);

boton.setOnClickListener(this);

@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.button1:
//Acciones al presentarse el evento click
break;
}
}

Al dar clic en el botn, se ejecutara lo indicado en el mtodo onClick que se sobreescribi.

EditText
El control EditText es el componente de edicin de texto que proporciona la plataforma Android. Permite la
introduccin y edicin de texto por parte del usuario.
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="Escribe algo"
android:ems="10" >
<requestFocus />
</EditText>

Ntese que no se indic el atributo android:text. Por lo comn, el elemento que se pone como texto es el
android:hint, como indicador de lo que se escribir, luego, al empezar a escribir, este texto desaparecer para
dar lugar al texto ingresado.
El atributo android:inputType indica el tipo de texto que se podr ingresar, de esto depender el tipo de
caracteres que se visualizaran y el tipo de teclado que le aparecer al usuario.
Para obtener lo que el usuario escribi, desde el cdigo de accin de algn mtodo que responde a eventos,
ejecutar:
import android.widget.EditText;

EditText editText = (EditText)findViewById(R.id.editText1);

String contenido = editText.getText().toString();

CheckBox
Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicacin, y en Android est
representado por la clase del mismo nombre, CheckBox.

<CheckBox
android:id="@+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Casilla de verificacin"
android:checked="true" />

El atributo android:checked indica si el view iniciara verificado o no.

Manejo de eventos
El control CheckBox es un tipo de botn que tiene dos estados, verificado o no verificado. El listener para este
control responde a estos estados mediante una variable booleana que indica tal estado.
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;

CheckBox check = (CheckBox)findViewById(R.id.checkBox1);

check.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
if(isChecked){
//Accin a realizar si se marca
}
else{
//Accin a realizar si se desmarca
}
}
});

RadioButton y RadioGroup
Un radiobutton es un control que puede estar marcado o desmarcado, pero en este caso, da la ventaja de que
pueden utilizarse dentro de un grupo de opciones donde una, y slo una, de ellas debe estar marcada
obligatoriamente, es decir, que si se marca una de las opciones se desmarcar automticamente la que
estuviera activa anteriormente.
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Opcin 1" />
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opcin 2" />
</RadioGroup>

Manejo de eventos
Al igual que el CheckBox, la interfaz a implementar es OnCheckedChangeListener, pero aunque es el mismo
nombre, no es el mismo, para el este caso es el correspondiente a la clase RadioGroup, y el mtodo
onCheckedChange recibir como parmetros el Id del RadioButton seleccionado.

import android.widget.RadioGroup;
public class MainActivity extends Activity
implements RadioGroup.OnCheckedChangeListener{

RadioGroup grupo = (RadioGroup)findViewById(R.id.radioGroup1);

grupo.setOnCheckedChangeListener(this);

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch(checkedId){
case R.id.radio0:
//Accin a realizar cuando se selecciona el RadioButton con id radio0
break;
case R.id.radio1:
//Accin a realizar cuando se selecciona el RadioButton con id radio1
break;
}

ImageView
El control ImageView permite mostrar imgenes en la aplicacin.

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="imagen"
android:src="@drawable/android" />

Ntese que con el atributo android:src se indica la imagen que contendr el ImageView.

Android Bsico

Tema 6: Layouts
Los layouts son elementos muy importantes en la interfaz de usuario, sirven para controlar la distribucin,
posicin y dimensiones de los controles que se insertan en su interior, por lo tanto, son componentes no
visuales. Estos componentes extienden a la clase base ViewGroup, por lo tanto, son capaces de contener a otros
controles.

FrameLayout
ste es el ms simple de todos los layouts. Coloca todos sus controles hijos alineados con su esquina superior
izquierda, de forma que cada control quedar oculto por el control siguiente. Suele utilizarse para mostrar un
nico control en su interior, a modo de contenedor sencillo para un slo elemento.
<FrameLayout
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"
tools:context="${packageName}.${activityClass}" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</FrameLayout>

LinearLayout
Este tipo de layout apila uno tras otro todos sus elementos hijos de forma horizontal o vertical segn se
establezca su propiedad android:orientation.

<LinearLayout
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:orientation="vertical"
tools:context="${packageName}.${activityClass}" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/boton" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hintt" >
<requestFocus />
</EditText>
</LinearLayout>

Orientacin vertical

<LinearLayout
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:orientation="horizontal"
tools:context="${packageName}.${activityClass}" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/boton" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hintt" >
<requestFocus />
</EditText>
</LinearLayout>

Orientacin horizontal.

RelativeLayout
El RelativeLayout permite especificar la posicin de cada elemento de forma relativa a su elemento padre o a
cualquier otro elemento incluido en el propio
layout. De esta forma, al incluir un nuevo elemento X se podr
indicar en donde se va a ubicar.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="@string/boton"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/imageView1"
android:layout_centerHorizontal="true"
android:text="@string/hello_world" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/imageView1"
android:hint="@string/hintt"
android:ems="10" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText1"
android:layout_toLeftOf="@+id/editText1"
android:text="@string/boton" />
</RelativeLayout>

En la primera se puede visualizar hacia dnde y hacia que otros elementos se estn orientando cada uno de los
controles. Por ejemplo: el botn se est colocando pegado al lmite izquierdo del padre, debajo del EditText y a
la izquierda del EditText.

Atributos del RelativeLayout

Posicin relativa a otro control:
-

android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop
android:layout_alignBottom
android:layout_alignBaseline

Posicin relativa al layout padre:

-

android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerHorizontal

android:layout_centerVertical
android:layout_centerInParent

Orientacin respecto al padre

layout_alignParentLeft
Padre

layout_alignParentRight

layout_alignParentTop

Padre

Objeto

Objeto

Objeto

layout_alignParentBottom
Padre

Padre
Objeto

layout_centerInParent
Padre

layout_centerHorizontal
Padre

Objeto

Padre
Objeto

Objeto

layout_alignParentStart

layout_centerVertical

layout_alignParentEnd

Objeto

Objeto

Padre

Padre

Orientacin respecto a otro elemento

layout_above

layout_below

layout_toRightOf

Objeto

Referencia

Referencia

Objeto

layout_alignTop

layout_alignBottom

layout_alignRight

layout_alignLeft

Referencia

Objeto

Referencia

Objeto

Referencia

Objeto

Objeto

Objeto

Referencia

Referencia

Referencia

layout_toStartOf

layout_toEndOf

Objeto

Objeto
Referencia

layout_alignBaseline

Referencia

Objeto

layout_toLeftOf

Objeto

Referencia

layout_alignStart
Objeto
Referencia

layout_alignEnd
Objeto
Referencia

ScrollView
Un ScrollView es un elemento que es usa para que el usuario pueda desplazarse en la interfaz grfica, puede
pulsar y subir y bajar o moverse hacia los lados visualizando as el contenido que pueda quedar fuera. Un
ScrollView puede contener un nico elemento.

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<!-- Ms elementos-->
</LinearLayout>
</ScrollView>