GUA DE LABORATORIO 2

Layouts
Tecsup
LABORATORIO
Objetivos:
Identifcar los layouts de Android.
Equipos, Materiales, Programas y Recursos:
PC con Sistema Operativo Windows o Linux
Eclipse IDE
Android Development Tool para Eclipse
Android SDK
Itro!ucci":
En la presente sesin se detalla los undamentos para el dise!o de interaces We" para
mviles#
#eguri!a!:
Ubicar maletines y/o mochilas en el gabinete al fnal de aula de
laboratorio.
No ingresar con lquidos ni comida al aula de laboratorio.
Al culminar la sesin de laboratorio, apagar correctamente la computadora
y el monitor.
Preparaci":
Durante el desarrollo de los temas de clase se tendrn e!ercicios e"plicati#os en
cada uno de los puntos, ello le dar a la sesin una interaccin de la teora y la
parte prctica, ya que en todo el momento el alumno podr comprobar en su
propia $%, todos los tems del manual.
Proce!imieto y Resulta!os:
Pg. 1
Tecsup
LA$O%T#
&n el material terico se detallan los tipos de 'ayouts(
a) 'inear'ayout *portraint y landscape)
b) +rame'ayout
c) ,able'ayout
d) -rid'ayout
e) .elati#e'ayout
Archivo activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btnLinear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Pg. 2
Tecsup
android:text="@string/txtLinear"
android:onClick="btnLinearOnClick" />
<Button
android:id="@+id/btnelative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/txtelative"
android:onClick="btnelativeOnClick" />
<Button
android:id="@+id/btn!able"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/txt!able"
android:onClick="btn!ableOnClick" />
<Button
android:id="@+id/btn"rame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/txt"rame"
android:onClick="btn"rameOnClick" />
<Button
android:id="@+id/btn#rid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/txt#rid"
android:onClick="btn#ridOnClick" />
</LinearLayout>
Archivo MainActivity.java
pac/age tecsup.net.app012layout3
import android.os.4undle3
import android.app.Acti#ity3
import android.content.Intent3
import android.#ie5.6enu3
import android.#ie5.7ie53
public class 6ainActi#ity e"tends Acti#ity 8
9:#erride
protected #oid on%reate*4undle sa#edInstance;tate) 8
super.on%reate*sa#edInstance;tate)3
set%ontent7ie5*..layout.acti#ity2main)3
<
9:#erride
public boolean on%reate:ptions6enu*6enu menu) 8
// In=ate the menu3 this adds items to the action bar i> it is present.
get6enuIn=ater*).in=ate*..menu.main, menu)3
return true3
<
Pg. 3
Tecsup

public #oid btn'inear:n%lic/*7ie5 #ie5)
8
Intent i ? ne5 Intent*this, 'inearActi#ity.class)3
startActi#ity*i)3
<

public #oid btn.elati#e:n%lic/*7ie5 #ie5)
8
Intent i ? ne5 Intent*this, .elati#eActi#ity.class)3
startActi#ity*i)3
<
public #oid btn,able:n%lic/*7ie5 #ie5)
8
Intent i ? ne5 Intent*this, ,ableActi#ity.class)3
startActi#ity*i)3
<
public #oid btn+rame:n%lic/*7ie5 #ie5)
8
Intent i ? ne5 Intent*this, +rameActi#ity.class)3
startActi#ity*i)3
<
public #oid btn-rid:n%lic/*7ie5 #ie5)
8
Intent i ? ne5 Intent*this, -ridActi#ity.class)3
startActi#ity*i)3
<


<
Pg. 4
Tecsup
Linear Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="hori$ontal" >
<TextView
android:id="@+id/text%iew&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text ="!ext%iew" />
<ditText
android:id="@+id/edit!ext&"
android:layout_width ="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="&"
android:ems="&(" >
<re!uest"ocus />
</ditText>
<Button
android:id="@+id/btnLinear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text =")*tton" />
</LinearLayout>
Pg. 5
Tecsup
Relative Layout
<#elati$eLayout 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:%addingBottom="@dimen/activit+_vertical_margin"
android:%addingLe&t="@dimen/activit+_hori$ontal_margin"
android:%adding#ight="@dimen/activit+_hori$ontal_margin"
android:%addingTo%="@dimen/activit+_vertical_margin"
tools:context=".elative,ctivit+" >
<TextView
android:id="@+id/text%iew&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<ditText
android:id="@+id/edit!ext&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/text%iew&"
android:layout_alignBottom="@+id/text%iew&"
android:layout_align'arent#ight="tr*e"
android:ems="&(" />
<Button
android:id="@+id/btn"rame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLe&t="@+id/edit!ext&"
android:layout_(elow="@+id/text%iew&"
Pg. 6
Tecsup
android:layout_marginLe&t="-.dp"
android:layout_marginTo%="/0dp"
android:text =")*tton" />
</#elati$eLayout>
Pg. 7
Tecsup
Table Layout
<Ta(leLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Ta(le#ow
android:id="@+id/tableow&"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/text%iew&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text ="!ext%iew" />
<ditText
android:id="@+id/edit!ext&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="&(" >
<re!uest"ocus />
</ditText>
</Ta(le#ow>
<Ta(le#ow
android:id="@+id/tableow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/b*tton&"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Pg. 8
Tecsup
android:text =")*tton" />
</Ta(le#ow>
</Ta(leLayout>
Pg. 9
Tecsup
Frame Layout
<"rameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<)mageButton
android:id="@+id/image)*tton&"
android:layout_width="&22dp"
android:layout_height="&21dp"
android:src="@drawable/tecs*p" />
</"rameLayout>
Pg. 10
Tecsup
Grid Layout
<*ridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="3"
>
<Button
android:id="@+id/b*tton&"
android:layout_column="("
android:layout_gra$ity="left4top"
android:layout_row="("
android:text ="&" />
<Button
android:id="@+id/b*tton1"
android:layout_column="&"
android:layout_gra$ity="left4top"
android:layout_row="("
android:text ="1" />
<Button
android:id="@+id/b*tton3"
android:layout_column="1"
android:layout_gra$ity="left4top"
android:layout_row="("
android:text ="3" />
<Button
android:id="@+id/b*tton-"
android:layout_column="&"
android:layout_gra$ity="left4top"
android:layout_row ="&"
android:text ="-" />
<Button
Pg. 11
Tecsup
android:id="@+id/b*tton2"
android:layout_column="("
android:layout_gra$ity="left4top"
android:layout_row ="&"
android:text ="2" />
<Button
android:id="@+id/b*tton."
android:layout_column="("
android:layout_gra$ity="left4top"
android:layout_row ="1"
android:text ="/" />
<Button
android:id="@+id/b*tton/"
android:layout_column="1"
android:layout_gra$ity="left4top"
android:layout_row ="&"
android:text ="." />
<Button
android:id="@+id/b*tton5"
android:layout_column="1"
android:layout_gra$ity="left4top"
android:layout_row ="1"
android:text ="0" />
</*ridLayout>
Pg. 12
Tecsup
&oclusioes:
&n la presente sesin, se detallaron los layouts de Android.
Pg. 13