Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Construye la interfaz de facebook

Construye la interfaz de facebook

Autor jc mouse sábado, julio 20, 2013

En este tutorial veremos un poco lo que es el diseño de interfaces en android, en lugar de colocar el ejemplo de uso de las diferentes partes que compone un GUI, decidí que lo mejor seria crear una aplicación que muestre paso a paso la construcción de una interface gráfica, añadiendo también un poco de código para añadir funcionalidad 🙂

La interfaz que construiremos es un fake de la aplicación móvil de facebook 🙂 no crearemos diferentes ventanas ni nada complicado, solo construiremos la interfaz principal con imágenes y unos cuantos controles.

Nececitamos

– Eclipse Indigo + Android instalado y configurado

– Editor de imágenes

Nivel: Android básico, Java Intermedio, XML intermedio

Proyecto.

1. Crea un nuevo Android Application Project con los siguientes datos:

Application Name: Facebook Trucho

Project Name: FacebookTrucho

Package Name: com.tutorial.facebook

Para el icono de la aplicación utilizamos el logo de Facebook de un tamaño de 200×200 pixeles en formato PNG, eclipse redimensionara el logo para cada deferente resolución.

logo android fb

Activity: Blank Activity

Activity Name: FacebookActivity

Layout Name: activity_facebook

2. Imagen de fondo

Android permite colocar imágenes de fondo en las aplicaciones, pero debemos tener cuidado al usar el tamaño correcto para cada diferente dispositivo ya sean smartphones o tables.

– xlarge screens are at least 960dp x 720dp
– large screens are at least 640dp x 480dp
– normal screens are at least 470dp x 320dp
– small screens are at least 426dp x 320dp

Puedes obtener más información sobre este tema te recomiendo la Guia de Android (en ingles).

En este tutorial, haremos uso de una sola imagen de 320×480 pixeles en formato JPG, puedes crear una imagen utilizando tu editor de imágenes preferido o descargarte esta imagen. El archivo se llamara  bg_fb.jpg

fondo azul

Para agregar esta imagen al proyecto, abre el explorador y ve a la dirección “FacebookTrucho\res\drawable-mdpi\” pegando en esa carpeta la imagen. Retorna a Eclipse presiona F5 para actualizar el proyecto, debes tener ya visible la imagen bg_fb.jpg en la carpeta drawable-mdpi , el otro archivo que se ve, ic_launcher.png es el icono del programa.

mdpi

2.2 Abre en modo gráfico el archivo activity_facebook.xml 

– Elimina el textView por default + su String relacionado.

– El layout por defecto que crea eclipse es Relative Layout, esto no nos sirve, debemos cambiarlo por otro. Clic derecho sobre el layout “RelativeLatout” -> Change Layout… elegir Linear Layout (Vertical) -> OK

Este tipo de layout, nos permite apilar los controles uno después de otro.

– en Propiedades del Layout, en View -> Background, presiona el botón […] y en la ventana elige Drawable -> bg_fb y OK para insertar la imagen.

fondo android

Eclipse nos facilita el diseño de la interfaz mediante sencillos pasos que podemos realizar con unos clic mientras este escribe el código XML automáticamente, sin embargo esto puede tornarse lento y a la larga muy tedioso 🙂 otra forma es escribir XML directamente en el activity y demás archivos xml, esto es lo que haremos en adelante 🙂

3. Añadiendo los controles TexView, Button, EditText e ImageView

Continuamos con el logo de facebook, este sera una imagen PNG de dimensiones 200×49 pixeles, para añadir este archivo al proyecto, pega la imagen en la carpeta “FacebookTrucho\res\drawable-mdpi\” y actualiza el proyecto, como hicimos para la imagen de fondo.

logo blanco

Abre en código el activity_facebook.xml y pega entre las etiquetas <LinearLayout …> code here </LinearLayout> el XML para agregar un ImageView:

    <ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"   
    android:layout_gravity="center"         
    android:layout_marginBottom="18dp"
    android:contentDescription="@null"
    android:src="@drawable/fblogo" />

Guardad los cambios y retorna al modo gráfico, ya se puede apreciar la imagen en la aplicación.

trucho logo

3.2 Debemos añadir dos EditText, uno para el correo electrónico y otro para el password, como ambos edittext tienen el mismo estilo, lo mejor es crear un solo estilo para ambos, esto nos permite modificar en cualquier momento el estilo y los cambios se verán reflejados en ambos controles.

Para crear un nuevo estilo, ve a “res/values/styles.xml”, como los anteriores XML, eclipse nos da la posibilidad de crear gráficamente los estilos 🙂 pero nosotros lo haremos por código. Abre el XML en código y antes de la etiqueta </resources> pega:

<style name="styleText">
    <item name="android:background">#FFF</item>
    <item name="android:textColor">#000</item>
    <item name="android:textStyle">normal</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingLeft">14dp</item>
    <item name="android:paddingRight">14dp</item>
    <item name="android:layout_marginTop">8dip</item>
    <item name="android:layout_marginBottom">8dip</item>
</style>

Cada estilo, va entre las etiquetas <style name=”nombre_estilo”>, se asigna un nombre único y dentro se colocan las propiedades entre las etiquetas <item name=”propiedad”>valor</item>.

Cada EditText, necesita también de un texto que mostrar, abre el archivo string.xml y crea dos string por código o gráficamente:

<string name="strCorreo">Correo Electronico</string>
<string name="strPass">Password</string>

Ahora en el activity_facebook.xml, añade el código para dos edittext, después del ImageView:

<EditText
    android:id="@+id/editText1"
    style="@style/styleText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="@string/strCorreo"
    android:inputType="textEmailAddress" />

<EditText
    android:id="@+id/editText2"
    style="@style/styleText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="@string/strPass"
    android:inputType="textPassword" />

2edittext

Si vamos bien hasta aquí 🙂 continuemos caso contrario, revisa los pasos anteriores hasta encontrar tu error.

4. Añadiendo un Button

Al igual que los EditText, el Button tendrá su propio estilo, añade a styles.xml :

<style name="styleButton">        
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_margin">3dp</item>    
    <item name="android:textStyle">bold</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>    
    <item name="android:background">#3B5998</item>    
</style>

El button requiere también de un poco de texto, añade al archivo string.xml

    <string name="strButton1">Ingresar</string>

4.2 A este botón, le añadiremos también un efecto para que cambie de color mientras se presiona y cuando no esta presionado, para lograr este efecto, haremos uso de tres archivos XML los cuales debemos crear en la carpeta “res/drawable-mdpi/” , los archivos son:

– btn_animation.xml: Archivo principal que hará uso de los dos siguientes.

– btn_no_pressed.xml: Se ejecuta cuando el botón no esta presionado.

– btn_pressed.xml: Se ejecuta cuando el botón es presionado.

animacion xml

A continuación el codigo de los archivos xml

btn_animation.xml

<?xml version="1.0" encoding="UTF-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/btn_pressed" 
             android:state_pressed="true"/>
       <item android:drawable="@drawable/btn_no_pressed"/>
    </selector>

btn_pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <gradient
        android:angle="90"
        android:endColor="#052C7B"
        android:centerColor="#001E5C"
        android:startColor="#052C7B" />

    <corners android:radius="5dp" ></corners>

  </shape>

btn_no_pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

 <gradient
        android:angle="90"
        android:endColor="#224DA6"
        android:centerColor="#0A358D"
        android:startColor="#224DA6" />

    <corners android:radius="5dp" ></corners>

</shape>

4.3 En el xml del activity, antes de la etiqueta </LinearLayout>, añade el codigo para el Button

<Button
    android:id="@+id/button1"        
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_animation"
    android:text="@string/strButton1"     
    style="@style/styleButton"/>

fb app

5. Para terminar, nos falta agregar un TextView para mostrar un texto que invita a registrarse en facebook, lo mismo de antes, necesita de un estilo, abre y pega en styles.xml lo siguiente:

<style name="styleLink">
    <item name="android:textColor">#FFF</item>
    <item name="android:textColorLink">#FFF</item>                
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingLeft">14dp</item>
    <item name="android:paddingRight">14dp</item>
    <item name="android:layout_marginTop">38dip</item>
    <item name="android:layout_marginBottom">8dip</item>
</style>

Necesita también de un texto “Registrate en Facebook es Gratis!”, abre y añade en string.xml

<string name="strLink"><u>Registrate en Facebook es Gratis!</u></string>

Vemos que hacemos uso de la etiqueta HTML <u></u>, esto para subrayar el texto.

Añade en el activity, antes de la etiqueta </LinearLayout> el código para el TextView

    <TextView
        android:id="@+id/textView1"
        style="@style/styleLink"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/strLink" />

Si llegamos hasta aquí sin ningún error, ya puedes ejecutar el proyecto y podrás ver que nuestro GUI esta casi listo:

preview facebook

Para terminar, debemos hacer que la aplicación, se muestre en toda la pantalla y no como ahora mostrando la barra de titulo y otra barra que pertenece a android, añadiremos también un poco de código para el evento CLICK del botón que mostrara una ventana de dialogo con un mensaje 🙂 . El textview, también contara con un evento CLICK para abrir el navegador y mostrar una pagina web.

SEGUNDA PARTE

Codificación

1. Abre el archivo FacebookActivity.java que esta en la carpeta SRC, tenemos lo siguiente:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class FacebookActivity extends Activity {

//code here
@Override
protected void onCreate(Bundle savedInstanceState) {

//code here

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_facebook);

//code here

}

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

}

Reemplazamos por:

package com.tutorial.facebook;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class FacebookActivity extends Activity {

 TextView textView;
 Button button;
 AlertDialog.Builder builder;   

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  //-->PARA PANTALLA COMPLETA
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
  WindowManager.LayoutParams.FLAG_FULLSCREEN);
  //-->end

  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_facebook);

        //New code

  //MUESTRA UNA VENTANA DE DIALOGO AL PRESIONAR EL BOTON
  // Se define y crea un objeto de la clase Builder 
  builder = new AlertDialog.Builder(this);
  //se define titulo, mensaje y un boton para cerrar la ventana
  builder.setTitle("Atención");
     builder.setMessage("Este es un programa de prueba.");
     builder.setPositiveButton("OK",null);        
     //boton 
  button = (Button) findViewById( R.id.button1 );
  button.setOnClickListener( new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    //se crea y se muestra el dialog
    builder.create();
    builder.show();
   }

  });

  //ABRE UNA DIRECCION WEB AL PRESIONA EL TEXTVIEW
  textView = (TextView) findViewById( R.id.textView1 );  
  textView.setOnClickListener( new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    Uri uri = Uri.parse( "http://www.google.com.bo" );
    startActivity( new Intent( Intent.ACTION_VIEW, uri ) );
   }

  });

  //end: New code

 }

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

}

Ejecuta y pruebaicono azul fb

 

aplicacion sony

simple dialogbolivia android

Descarga Proyecto Facebook en Eclipse AQUI 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Animación básica en java2d – Pelota de Futbol

Animación básica en java2d – Pelota de Futbol

En este tutorial se muestran los pasos para crear una animación sencilla utilizando Java2d y el IDE Netbeans. La animaci...

MultiHilos: Comunicación Cliente/Servidor

MultiHilos: Comunicación Cliente/Servidor

En anteriores post construimos aplicaciones Cliente/Servidor los cuales intercambiaban mensajes de una forma secuencial...

Leer archivos de texto

Leer archivos de texto

En este tutorial de android, vemos como leer un archivo de texto y mostrarlo en pantalla del celular, el texto elegido e...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Ejemplo de uso del Generador de Código de MyBatis

Ejemplo de uso del Generador de Código de MyBatis

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Ciudadanía digital y seguridad en Internet

Ciudadanía digital y seguridad en Internet

“Be Internet Awesome” (Se genial en Internet) es un recurso de Google para la enseñanza  de conceptos fundam...

Comparte lo que sabes

Categorias

Últimas entradas

“MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacena...

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

Herramientas

Generador de Enlaces a Whatsapp