Sei sulla pagina 1di 32

Laboratorio 2

Logro:
Al finalizar la sesión, el estudiante diseña interfaces de usuario para Android a través de componentes
básicos que proporciona el SDK.
Contenido: (1) Orientación
(2) Menú
(3) Layouts
(4) Containers

ORIENTACION

(a) Crear un diseño en portrait


(b) Crear la carpeta “layout-land” en “res”
(c) Copiar el layout.xml en la carpeta “layout-land”
(d) Personalizar el diseño en cada XML.
(e) Para fijar la orientación escribir el siguiente método:

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_main);
}
}

Método startActivity()

(a) El método startActivity permite iniciar otra actividad.


(b) Se utilizará la clase Handler para hacer un delay de 2 segundos antes de pasar a la
siguiente actividad.
(c) Crear la actividad “PrincipalActivity”
(d) Escribir el siguiente bloque de código:

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_main);

Handler handler = new Handler();


handler.postDelayed(new Runnable() {

Página 1 de 32
@Override
public void run() {
Intent intent = new Intent(MainActivity.this, PrincipalActivity.class);
startActivity(intent);
}
}, 2000);
}
}

Página 2 de 32
MENU’S

1. Crear una carpeta nueva llamada “menu" dentro de la carpeta “res”:

2. Dentro de la carpeta “menu" crear un nuevo “New Resource File” llamado “principal”:

Página 3 de 32
3. Codificar el archivo “principal.xml”:

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


<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/menu_inicio"
android:title="Inicio"
app:showAsAction="always"/>

<item
android:id="@+id/menu_productos"
android:title="Productos"
app:showAsAction="always"/>

<item
android:id="@+id/menu_servicios"
android:title="Servicios"
app:showAsAction="always"/>

</menu>

** Agregarle íconos a cada <item>

4. Agregar el método “onOptionsItemSelected” en la clase Java:

package proyecto.david.lab2;

import android.content.pm.ActivityInfo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class KaraokeActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_karaoke);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it
is present.
getMenuInflater().inflate(R.menu.principal, menu);
return true;
}

Página 4 de 32
LAYOUTS

(1) ConstraintLayout

ConstraintLayout le permite crear diseños grandes y complejos con una jerarquía de


vista plana (sin grupos de vista anidados). Es similar a RelativeLayout porque todas
las vistas se presentan de acuerdo con las relaciones entre las vistas de hermanos y
el diseño principal, pero es más flexible que RelativeLayout y más fácil de usar con
el Editor de diseño de Android Studio.

Crear el formulario mostrado. Utilizar “TextView”, “Number” y “Password (Number)”

wrap_content / match_parent

Los atributos “layout_width” y “layout_heigth” tienen dos valores:


(a) wrap_content: ajuste de acuerdo al contenido del elemento.
(b) match_parent: abarca hasta ajustarse al componente padre.

Página 5 de 32
(2) CoordinatorLayout

De forma predeterminada, si agrega varios elementos secundarios a un


FrameLayout, se superpondrán entre sí. Un FrameLayout se debe usar con más
frecuencia para mantener una única vista secundaria. El principal atractivo de
CoordinatorLayout es su capacidad para coordinar las animaciones y las
transiciones de las vistas dentro de él.

Crear un Activity vacío (Empy) llamado “LoginActivity” y escribir en su respectivo


layout:

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


<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/wallstreet"
tools:context=".LoginActivity">

<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="@color/colorAccent"
app:itemIconTint="@android:color/white"
app:itemTextColor="@android:color/white"
app:menu="@menu/navigation" />

</android.support.design.widget.CoordinatorLayout>

Crear la carpeta “/res/menu” y luego crear en ella el archivo “navigation.xml”:

Página 6 de 32
Escribir el siguiente código en el “navigation.xml”:

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


<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>

<item
android:id="@+id/navigation_agencias"
android:icon="@drawable/ic_agencias"
app:showAsAction="ifRoom"
android:enabled="true"
android:title="Agencias" />

<item
android:id="@+id/navigation_contacto"
android:icon="@drawable/ic_contacto"
app:showAsAction="ifRoom"
android:enabled="true"
android:title="Contacto" />

<item
android:id="@+id/navigation_redes"
android:icon="@drawable/ic_redes"
app:showAsAction="ifRoom"
android:enabled="true"
android:title="Redes" />

<item
android:id="@+id/navigation_chat"
android:icon="@drawable/ic_chat"
app:showAsAction="ifRoom"
android:enabled="true"
android:title="Chat" />
</menu>

Notar que se requieren íconos: “ic_agencias.png”, “ic_contacto.png”, “ic_redes.png”


y “ic_chat.png”.

Descargar los íconos de la página www.iconfinder.com y colocarlos en la carpeta


“/res/drawable”.

Página 7 de 32
(3) LinearLayout

Crear un nuevo Activity vacío (Empty) con el nombre “CancionesActivity” y editar su


layout. Notar la configuración de la orientación en vertical:

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


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".CancionesActivity">

<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buscar canción:" />

<EditText
android:id="@+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name" />

<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buscar" />
</LinearLayout>

Página 8 de 32
CONTAINERS

(1) ScrollView

Colocar un ScrollView debabjo del Layout principal:

Diseñar un formulario con muchos elementos:

Página 9 de 32
(2) TabLayout y ViewPager

Revisar el Anexo 1 tomado de:


https://examples.javacodegeeks.com/android/core/widget/android-tablayout-example/

Si se obtiene un exception de OnFragmentInteractionListener revisar el Anexo 2


tomado de https://code.i-harness.com/es/q/17a1501

Página 10 de 32
EJERCICIOS

Diseñar las siguientes pantallas. Utilizar el TableLayout donde sea necesario.

Página 11 de 32
FORMULARIOS

Diseñar las siguientes interfaces en Android:

(1) Botones

Programar la lógica de los botones agregando el evento onClick a cada evento.


Abrir un Toast en cada clic.

Página 12 de 32
(2) ImageView

(3) Multiline Text

Página 13 de 32
(4) CheckBox y RadioButton

(5) SeekBar

Página 14 de 32
ADAPTERS

(1) Spinner

Página 15 de 32
Revisar el código resaltado:

package proyecto.drodriguez;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class RegistroUsuarioActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_registro_usuario);

final String[] cursos = new String[] { "Sistemas distribuidos",


"Gerencia de proyectos", "Simulación de sistemas" };

ArrayAdapter<String> adaptador = new ArrayAdapter<String>(this,


android.R.layout.simple_spinner_item, cursos);

adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

Spinner combo = (Spinner) findViewById(R.id.spinner);


combo.setAdapter(adaptador);

combo.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, android.view.View v,
int position, long id) {
Toast.makeText(RegistroUsuarioActivity.this, "Seleccionado: " +
cursos[position], Toast.LENGTH_LONG).show();
}

public void onNothingSelected(AdapterView<?> parent) {


Toast.makeText(RegistroUsuarioActivity.this, "No ha seleccionado",
Toast.LENGTH_LONG).show();
}
});

}
}

Página 16 de 32
El layout queda de la siguiente manera:

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


<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegistroUsuarioActivity">

<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Curso favorito:"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Spinner
android:id="@+id/spinner"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView15" />
</android.support.constraint.ConstraintLayout>

Página 17 de 32
(2) ListView

Página 18 de 32
Revisar el código resaltado:

package proyecto.drodriguez;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class GeneroCancionesActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_genero_canciones);

ListView lstProductos = (ListView)findViewById(R.id.lstGeneros);

int i = 0;
String[] matriz = new String[6];
matriz[i++] = "Pop";
matriz[i++] = "Punk";
matriz[i++] = "Música Clásica";
matriz[i++] = "Opera";
matriz[i++] = "Rock";
matriz[i++] = "Salsa";

ArrayAdapter<String> adaptador = new


ArrayAdapter<String>(GeneroCancionesActivity.this,
android.R.layout.simple_list_item_1,
matriz);
lstProductos.setAdapter(adaptador);

}
}

Página 19 de 32
El layout queda de la siguiente manera:

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


<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".GeneroCancionesActivity">

<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Gèneros"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ListView
android:id="@+id/lstGeneros"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_span="2"
android:layout_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView17" />

</android.support.constraint.ConstraintLayout>

Página 20 de 32
(3) ListView personalizado

Página 21 de 32
Revisar el código resaltado:

package proyecto.drodriguez;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;

public class AgendaActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_agenda);

String[] from = new String[] { "Time", "Name", "Desc" };


int[] to = new int[] { R.id.hora, R.id.nombre, R.id.desc1 };

ArrayList<String[]> lista = new ArrayList<String[]>();

String[] evento1 = { "11:30", "Reunión de coordinación", "Lugar:


Auditorio", "1" };
String[] evento2 = { "12:00", "Almuerzo", "Lugar: Comedor central",
"2" };
String[] evento3 = { "14:00", "Tiro al dardo", "Lugar: Oficina",
"3" };

lista.add(evento1);
lista.add(evento2);
lista.add(evento3);

ArrayList<HashMap<String, String>> eventos = new


ArrayList<HashMap<String, String>>();

for (String[] evento : lista) {


HashMap<String, String> datosEvento = new HashMap<String,
String>();

datosEvento.put("Time", evento[0]);
datosEvento.put("Name", evento[1]);
datosEvento.put("Desc", evento[2]);
datosEvento.put("id", evento[3]);

eventos.add(datosEvento);
}

SimpleAdapter listadoAdapter = new SimpleAdapter(this, eventos,


R.layout.activity_agenda_fila, from, to);

ListView lv = (ListView) findViewById(R.id.lista1);


lv.setAdapter(listadoAdapter);

}
}

Página 22 de 32
El Layout del Activity debe tener el siguiente código:

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


<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AgendaActivity">

<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Total de Canciones"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ListView
android:id="@+id/lista1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:padding="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView16"></ListView>

</android.support.constraint.ConstraintLayout>

Página 23 de 32
Adicionalmente, se debe crear un archivo en “/res/layout/activity_agenda_fila.xml” con el
siguiente contenido:

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingRight="4px">

<TextView
android:id="@+id/hora"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:textSize="16dp" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="5dp">

<TextView
android:id="@+id/nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp" />

<TextView
android:id="@+id/desc1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp" />
</LinearLayout>
</LinearLayout>

Página 24 de 32
(4) RecyclerView

Página 25 de 32
package com.example.david.lab1;

public class Pelicula {

private String titulo;


private String genero;
private String año;

public Pelicula(String titulo, String genero, String año) {


this.titulo = titulo;
this.genero = genero;
this.año = año;
}

public String getTitulo() {


return titulo;
}

public void setTitulo(String titulo) {


this.titulo = titulo;
}

public String getGenero() {


return genero;
}

public void setGenero(String genero) {


this.genero = genero;
}

public String getAño() {


return año;
}

public void setAño(String año) {


this.año = año;
}
}

Página 26 de 32
package com.example.david.lab1;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;

public class PeliculasAdapter extends


RecyclerView.Adapter<PeliculasAdapter.MyViewHolder> {

private List<Pelicula> peliculasList;

public class MyViewHolder extends RecyclerView.ViewHolder {

public TextView titulo, genero, año;

public MyViewHolder(View view) {


super(view);
titulo = (TextView) view.findViewById(R.id.titulo);
genero = (TextView) view.findViewById(R.id.genero);
año = (TextView) view.findViewById(R.id.año);
}
}

public PeliculasAdapter(List<Pelicula> peliculasList) {


this.peliculasList = peliculasList;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.pelicula_fila, parent, false);

return new MyViewHolder(itemView);


}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
Pelicula pelicula = peliculasList.get(position);
holder.titulo.setText(pelicula.getTitulo());
holder.genero.setText(pelicula.getGenero());
holder.año.setText(pelicula.getAño());
}

@Override
public int getItemCount() {
return peliculasList.size();
}
}

Página 27 de 32
activity_peliculas_lista.xml

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


<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".PeliculasListaActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />

</android.support.constraint.ConstraintLayout>

pelicula_fila.xml

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


<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">

<TextView
android:id="@+id/titulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textColor="@color/colorPrimary"
android:textSize="16dp"
android:textStyle="bold" />

Página 28 de 32
<TextView
android:id="@+id/genero"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/titulo" />

<TextView
android:id="@+id/año"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textColor="@color/colorPrimaryDark" />

</RelativeLayout>

Página 29 de 32
package com.example.david.lab1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class PeliculasListaActivity extends AppCompatActivity {

private List<Pelicula> peliculaList = new ArrayList<>();


private RecyclerView recyclerView;
private PeliculasAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_peliculas_lista);

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

mAdapter = new PeliculasAdapter(peliculaList);


RecyclerView.LayoutManager mLayoutManager = new
LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setItemAnimator(new DefaultItemAnimator());

recyclerView.addItemDecoration(new DividerItemDecoration(this,
LinearLayoutManager.VERTICAL));

recyclerView.setAdapter(mAdapter);

preparePeliculaData();
}

private void preparePeliculaData() {


Pelicula pelicula = new Pelicula("Mad Max: Fury Road", "Action &
Adventure", "2015");
peliculaList.add(pelicula);

pelicula = new Pelicula("Inside Out", "Animation, Kids & Family",


"2015");
peliculaList.add(pelicula);

pelicula = new Pelicula("Star Wars: Episode VII - The Force


Awakens", "Action", "2015");
peliculaList.add(pelicula);

pelicula = new Pelicula("Shaun the Sheep", "Animation", "2015");


peliculaList.add(pelicula);

pelicula = new Pelicula("The Martian", "Science Fiction & Fantasy",


"2015");
peliculaList.add(pelicula);

pelicula = new Pelicula("Mission: Impossible Rogue Nation",

Página 30 de 32
"Action", "2015");
peliculaList.add(pelicula);

pelicula = new Pelicula("Up", "Animation", "2009");


peliculaList.add(pelicula);

pelicula = new Pelicula("Star Trek", "Science Fiction", "2009");


peliculaList.add(pelicula);

pelicula = new Pelicula("The LEGO Pelicula", "Animation", "2014");


peliculaList.add(pelicula);

pelicula = new Pelicula("Iron Man", "Action & Adventure", "2008");


peliculaList.add(pelicula);

pelicula = new Pelicula("Aliens", "Science Fiction", "1986");


peliculaList.add(pelicula);

pelicula = new Pelicula("Chicken Run", "Animation", "2000");


peliculaList.add(pelicula);

pelicula = new Pelicula("Back to the Future", "Science Fiction",


"1985");
peliculaList.add(pelicula);

pelicula = new Pelicula("Raiders of the Lost Ark", "Action &


Adventure", "1981");
peliculaList.add(pelicula);

pelicula = new Pelicula("Goldfinger", "Action & Adventure",


"1965");
peliculaList.add(pelicula);

pelicula = new Pelicula("Guardians of the Galaxy", "Science Fiction


& Fantasy", "2014");
peliculaList.add(pelicula);

mAdapter.notifyDataSetChanged();
}

Página 31 de 32
EJERCICIOS

Diseñar las siguientes interfaces de usuario:

Página 32 de 32

Potrebbero piacerti anche