Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Crea una ventana de dialogo “Acerca de…” personalizado

Crea una ventana de dialogo “Acerca de…” personalizado

Autor jc mouse lunes, diciembre 8, 2014

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarrolladores de la aplicación así como también alguna información extra, como la versión de la aplicación, licencias, avisos legales, librerías utilizadas, etc.  todo eso se lo coloca en los famosos “About” o “Acerca de…” que abras visto en otras aplicaciones.

Para esta tarea , puede utilizarse un activity exclusivo, pero a mi parecer no queda muy elegante abrir todo un activity para mostrar solo el “Acerca de..”, entonces podemos recurrir a las ventanas de dialogo personalizando estas con las activity para poder agregar controles imágenes, enlaces, alineación, estilos, etc.

Es esto lo que realizaremos en este tutorial:

Necesitamos

  • IDE Eclipse con SDK Android

Nivel: Básico

Tiempo: 15 minutos

1. El proyecto

Crea un nuevo proyecto android en Eclipse con el nombre de “About” deja como esta el MainActivity y añade un nuevo activity llamado “AboutActivity“, debes tener algo como esto:

about project

2. MainActivity

Nuestro Activity principal estará compuesto solamente por un botón que es el siguiente:

    <Button
        android:id="@+id/btnAbout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="@string/strAbout" />

3. AboutActivity – “Acerca de…”

Esta activity es la que se mostrara como una ventana de dialogo

– Abre el archivo AboutActivity y pega el siguiente código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    android:orientation="vertical"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".AboutActivity" >

    <TextView
        android:id="@+id/tvVersion"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/strVersion" />

    <ImageView
        android:id="@+id/ivLink"
        android:layout_width="match_parent"
        android:layout_height="80dp"          
        android:background="#ffffff"     
        android:contentDescription="@string/strDesc"
        android:src="@drawable/logo" />

    <TextView
        android:id="@+id/tvLegal"
        android:layout_width="wrap_content"
        android:textColor="#FFFFFF"
        android:textSize="12sp"
        android:layout_margin="12dp"
        android:layout_height="wrap_content"
        android:text="@string/strLegal" />

    <Button
        android:id="@+id/btnOk"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp" 
        android:text="@string/strOk" />

</LinearLayout>

A continuación abre el archivo String.xml y añade:

<string name="strAbout">Abrir Acerca de</string>        
    <string name="strOk">Aceptar</string>
    <string name="strDesc">jc mouse</string>
    <string name="strVersion">Version</string>
    <string name="strLegal">THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.</string>

– Crea un nuevo archivo XML en la carpeta Drawable con el nombre de “dialog_box.xml“, en este archivo es donde definimos la forma y fondo de nuestra ventana de dialogo,  para este ejemplo, tendrá un fondo oscuro con un borde blanco y esquinas redondeadas:

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

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

    <stroke
        android:dashGap="0dp"
        android:dashWidth="0dp"
        android:width="1dp"
        android:color="#ffffffff" />

    <gradient
        android:angle="-90"
        android:centerColor="#282828"
        android:endColor="#161616"
        android:startColor="#282828"
        android:type="linear"/>

</shape>

4. Logotipo o Marca Personal

Con un editor de imágenes crea una imagen de 300×80 pixeles y coloca en la carpeta drawable-mdpi recuerda que para resoluciones mayores debes colocar la imagen mas grande en las carpetas correspondientes. El archivo se llama “logo.png

logo jc mouse

5. Código

Hasta aquí solo creamos lo que son las interfaces gráficas, pero debemos escribir el código necesario para que al presionar el botón del MainActivity, se muestra la ventana de dialogo “Acerca de…“,  así también agregaremos el código para crear la ventana de dialogo con el activity_about.xml , el código completo que va en el MainActivity es el siguiente: 

package com.bolivia.about;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.content.Intent;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager.NameNotFoundException;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

 Button btnAbout;

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

  btnAbout = ((Button)findViewById(R.id.btnAbout));
  btnAbout.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                     showAbout();
                    }});
 }

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

 /**
 * Metodo que crea y muestra la ventana de dialogo "Acerca de..."
 * */
 private void showAbout()
 {
  final Dialog dialog = new Dialog(this);  
  dialog.requestWindowFeature(Window.FEATURE_LEFT_ICON);
  dialog.setContentView(R.layout.activity_about);
  dialog.setTitle("Mi Programa");  
  dialog.setFeatureDrawableResource(Window.FEATURE_LEFT_ICON, R.drawable.ic_launcher );
  dialog.getWindow().setBackgroundDrawableResource(R.drawable.dialog_box);

  //ancho y alto de la ventana de dialogo
  DisplayMetrics displaymetrics = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(displaymetrics); 
  int width = (int) (displaymetrics.widthPixels*0.84);
  int height = (int) (displaymetrics.heightPixels*0.7);
  dialog.getWindow().setLayout(width, height);
  // Información de la versión del software
  PackageInfo pInfo; // obtiene información de la version del software
  try {
   pInfo = getPackageManager().getPackageInfo(getPackageName(), 0);
   TextView text = (TextView) dialog.findViewById(R.id.tvVersion);
   text.setText("Version " + pInfo.versionName);
  } catch (NameNotFoundException e) {
   e.printStackTrace();
  } 
  //Cuando se presione la imagen se abrira una página web
  ImageView ivLink = (ImageView) dialog.findViewById(R.id.ivLink);
  ivLink.setOnClickListener(new View.OnClickListener(){
      public void onClick(View v){
          Intent intent = new Intent();
          intent.setAction(Intent.ACTION_VIEW);
          intent.addCategory(Intent.CATEGORY_BROWSABLE);
          intent.setData(Uri.parse("http://www.jc-mouse.net"));
          startActivity(intent);
      }
  });
  //Boton para cerrar el dialog
  Button dialogButton = (Button) dialog.findViewById(R.id.btnOk);
  dialogButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    dialog.dismiss();
   }
  });  
  dialog.show();

 }

}//end:

En el onCreate definimos el botón de la interfaz y también el evento Click en donde se llama al método showAbout(), es este método el que crea el dialog desde el activity_about.xml y donde se define su tamaño respecto a la resolución de la pantalla del dispositivo a su vez que se le añade también la versión de la aplicación, un evento al logo de la empresa que abrirá a una pagina web cuando se presione la imagen y por último el evento para cerrar la ventana de dialogo.

Ejecuta y presiona el botón para abrir la ventana de dialogo 🙂

acerca de jc mouse

enjoy!!! 🙂

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

Blog MVC – El theme y primer controlador [p3]

Blog MVC – El theme y primer controlador [p3]

Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega...

Gestión de productos – El modelo (Parte 4)

Gestión de productos – El modelo (Parte 4)

En la estructura del proyecto, nuestro modelo mvc esta compuesto por tres paquetes, la vista, el modelo y controlador. L...

Impresión de reportes con JasperReport + YAPA

Impresión de reportes con JasperReport + YAPA

En un post anterior [Guardar reporte PDF directamente con Jasperreports] vimos una manera de imprimir reportes directame...

Filtros con JMF y una webcam [Proyecto]

Filtros con JMF y una webcam [Proyecto]

En esta oportunidad dejo a consideracion un proyecto para la captura de video desde una webcam, utilizando filtros como...

Uso de BitmapFont en LibGDX

Uso de BitmapFont en LibGDX

En este tutorial conoceremos lo que es el uso de BitmapFont en LibGDX y algún uso que le podemos dar como crear un menú,...

Personaliza JTable “MetroUI”

Personaliza JTable “MetroUI”

Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

El proyecto “Java Decompiler” tiene como objetivo desarrollar herramientas para descompilar y analizar byte...

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

Android Bolivia

Bandera en Alto