Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_main);
}
}
Método startActivity()
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
setContentView(R.layout.activity_main);
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
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”:
<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>
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;
@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
wrap_content / match_parent
Página 5 de 32
(2) CoordinatorLayout
<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>
Página 6 de 32
Escribir el siguiente código en el “navigation.xml”:
<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>
Página 7 de 32
(3) LinearLayout
<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
Página 9 de 32
(2) TabLayout y ViewPager
Página 10 de 32
EJERCICIOS
Página 11 de 32
FORMULARIOS
(1) Botones
Página 12 de 32
(2) ImageView
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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_registro_usuario);
adaptador.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
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();
}
}
}
Página 16 de 32
El layout queda de la siguiente manera:
<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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_genero_canciones);
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";
}
}
Página 19 de 32
El layout queda de la siguiente manera:
<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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_agenda);
lista.add(evento1);
lista.add(evento2);
lista.add(evento3);
datosEvento.put("Time", evento[0]);
datosEvento.put("Name", evento[1]);
datosEvento.put("Desc", evento[2]);
datosEvento.put("id", evento[3]);
eventos.add(datosEvento);
}
}
}
Página 22 de 32
El Layout del Activity debe tener el siguiente código:
<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:
<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;
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;
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.pelicula_fila, parent, false);
@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
<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
<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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_peliculas_lista);
recyclerView.addItemDecoration(new DividerItemDecoration(this,
LinearLayoutManager.VERTICAL));
recyclerView.setAdapter(mAdapter);
preparePeliculaData();
}
Página 30 de 32
"Action", "2015");
peliculaList.add(pelicula);
mAdapter.notifyDataSetChanged();
}
Página 31 de 32
EJERCICIOS
Página 32 de 32