Crea tu propia aplicacion para realizar llamadas

En este tutorial Android Bolivia 🙂 construiremos una sencilla aplicación para realizar llamadas por teléfono, aprenderemos ademas el uso de estilos, animaciones de botones y la interacción de OnClickListener con varios objetos.

Herramientas

– Eclipse Indigo + Android instalado y configurado

– Lenguaje java y XML

Tiempo: 20 minutos

Proyecto

1.Crea un nuevo Application Android Project con la siguiente configuración:

Application Name: ET Phone Home

Project Name: ETPhoneHome

Package Name: com.tutorial.etphonehome

Activity: Blank Activity

Activity Name: ETActivity

Layout Name: activity_et

2. Nuestra aplicación tendrá una imagen de fondo, debes añadir una imagen *.JPG de tamaño 320×340 pixeles en la carpeta RES/drawable-mdpi/, si lo prefieres, utiliza la imagen de abajo, el archivo debe llamarse «bgfono.jpg«:

3. Antes de realizar, el diseño en el LAYOUT principal «activity_et.xml«, debemos crear algunos archivos XML y editar otros más.

3.1 Comenzaremos con la edición del archivo string.xml que se encuentra en la carpeta RES/VALUES/, abre y reemplaza por:

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

    <string name="app_name">ET Phone Home</string>
    <string name="action_settings">Settings</string>
    <string name="strNum1">1</string>
    <string name="strNum2">2</string>
    <string name="strNum3">3</string>
    <string name="strNum4">4</string>
    <string name="strNum5">5</string>
    <string name="strNum6">6</string>
    <string name="strNum7">7</string>
    <string name="strNum8">8</string>
    <string name="strNum9">9</string>
    <string name="strNum0">0</string>
    <string name="strNumeral">#</string>
    <string name="strAsterisco">*</string>
    <string name="strLlamar">Llamar</string>
    <string name="strSpace"></string>
    <string name="strDelete">&lt;&lt;</string>

</resources>

En este archivo definimos todas las cadenas de texto que hará uso nuestra aplicación.

3.2 Como vimos en un post anterior [Construye la interfaz de facebook] si queremos añadir animación al estado presionado y no presionado de un Button, hacemos uso de archivos XML, en esta aplicación, tenemos dos clases de botones, botones para los números (1,2,3,4,5,6,7,8,9,0,*,#) y un botón para realizar la llamada que sera de color verde. Entonces, debemos crear 6 archivos XML en total,en la carpeta RES/ DRAWABLE-MDPI/, estos son:

btn_anim_call.xml – XML principal para el botón verde para realizar la llamada

btn_call_pressed.xml – Para cuando se presione el boton

btn_call_no_pressed.xml – Para cuando el boton no este presionado

btn_anim_num.xml – XML principal para los botones con números

btn_num_no_pressed.xml – Cuando no se presionan los botones

btn_num_pressed.xml – Cuando alguno de los botones esta presionado

A continuación el código fuente de cada uno de los archivos XML:

btn_anim_call.xml

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

btn_call_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="#75AC15"
       android:centerColor="#75AC15"
       android:startColor="#9FDB1B" />

 <stroke android:width="1px" android:color="#A2CE56" />

</shape>

btn_call_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="#A2DF1B"
        android:centerColor="#75AC15"
        android:startColor="#A2DF1B" />

<stroke android:width="1px" android:color="#A2CE56" />

</shape>

btn_anim_num.xml

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

btn_num_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="#333333"
        android:centerColor="#1B1B1B"
        android:startColor="#333333" />

    <stroke android:width="1px" android:color="#5E5E5E" />

</shape>

btn_num_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="#1B1B1B"
        android:centerColor="#333333"
        android:startColor="#1B1B1B" />

 <stroke android:width="4px" android:color="#181717" />

</shape>

3.3 Continuamos con los estilos, abre el archivo styles.xml que esta en la carpeta RES/VALUES/ y reemplaza por:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!--
 Base application theme, dependent on API level. This theme is replaced
 by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
 -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
 Theme customizations available in newer API levels can go in
 res/values-vXX/styles.xml, while customizations related to
 backward-compatibility can go here.
 -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

 <style name="styleNumFono">
     <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:paddingTop">8dp</item>
     <item name="android:paddingBottom">8dp</item>
     <item name="android:paddingLeft">14dp</item>
     <item name="android:paddingRight">14dp</item>
     <item name="android:textSize">32sp</item>    

 </style>

  <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:textStyle">bold</item>
     <item name="android:shadowColor">#000000</item>
     <item name="android:shadowDx">1</item>
     <item name="android:shadowDy">1</item>       
     <item name="android:background">#313131</item>    
 </style>

  <style name="styleBtnSpace">        
     <item name="android:layout_width">fill_parent</item>
     <item name="android:layout_height">wrap_content</item>
     <item name="android:layout_margin">3dp</item>
 </style>

</resources>

3.4 Finalmente el archivo XML que nos falta editar es activity_et.xml , en este archivo hacemos uso de las cadenas de textos, estilos y animaciones que creamos anteriormente.

<RelativeLayout 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:background="@drawable/bgfono"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ETActivity" >

    <TextView
        android:id="@+id/txtTelefono"
        style="@style/styleNumFono"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"        
        android:layout_alignParentTop="true"        
        android:text="@string/strSpace"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_marginTop="70dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0,1,2,3" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnNum1"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum1" />

            <Button
                android:id="@+id/btnNum2"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum2" />

            <Button
                android:id="@+id/btnNum3"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum3" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnNum4"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum4" />

            <Button
                android:id="@+id/btnNum5"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum5" />

            <Button
                android:id="@+id/btnNum6"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum6" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnNum7"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum7" />

            <Button
                android:id="@+id/btnNum8"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum8" />

            <Button
                android:id="@+id/btnNum9"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum9" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnAsterisco"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strAsterisco" />

            <Button
                android:id="@+id/btnNum0"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNum0" />

            <Button
                android:id="@+id/btnNumeral"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strNumeral" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnCall"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_call"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/strLlamar" />

            <Button
                android:id="@+id/button8"
                style="@style/styleBtnSpace"                
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"                
                android:text="@string/strSpace" />

            <Button
                android:id="@+id/btnDelete"
                style="@style/styleButton"
                android:background="@drawable/btn_anim_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/strDelete" />

        </TableRow>

    </TableLayout>

</RelativeLayout>

Hasta aquí el diseño de la interfaz, si no tenemos ningún problema podemos ejecutar una previa de la aplicación, no hace nada, le falta código java, eso es lo que haremos a continuación.

4. Abre el archivo ETActivity.java y reemplaza por:

package com.tutorial.etphonehome;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class ETActivity extends Activity  implements OnClickListener{

 //objetos
 Button btn1,btn2,btn3,btn4,btn5,btn6,btn7,
        btn8,btn9,btn0,btnAsterisco,btnNumeral,btnDel,btnCall;
 TextView textView;
 StringBuilder fono = new StringBuilder();

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_et);
  //se definen los objetos y se asigna OnClickListener
  textView = (TextView) findViewById( R.id.txtTelefono );
  btnDel = (Button) findViewById( R.id.btnDelete );
  btn1 = (Button) findViewById( R.id.btnNum1 );
  btn2 = (Button) findViewById( R.id.btnNum2 );
  btn3 = (Button) findViewById( R.id.btnNum3 );
  btn4 = (Button) findViewById( R.id.btnNum4 );
  btn5 = (Button) findViewById( R.id.btnNum5 );
  btn6 = (Button) findViewById( R.id.btnNum6 );
  btn7 = (Button) findViewById( R.id.btnNum7 );
  btn8 = (Button) findViewById( R.id.btnNum8 );
  btn9 = (Button) findViewById( R.id.btnNum9 );
  btn0 = (Button) findViewById( R.id.btnNum0 );
  btnAsterisco = (Button) findViewById( R.id.btnAsterisco );
  btnNumeral = (Button) findViewById( R.id.btnNumeral );
  btnCall = (Button) findViewById( R.id.btnCall );
  btnDel.setOnClickListener(this);
  btn1.setOnClickListener(this);
  btn2.setOnClickListener(this);
  btn3.setOnClickListener(this);
  btn4.setOnClickListener(this);
  btn5.setOnClickListener(this);
  btn6.setOnClickListener(this);
  btn7.setOnClickListener(this);
  btn8.setOnClickListener(this);
  btn9.setOnClickListener(this);
  btn0.setOnClickListener(this);
  btnAsterisco.setOnClickListener(this);
  btnNumeral.setOnClickListener(this);
  btnCall.setOnClickListener(this);
  textView.setText("");
  fono.setLength(0);
  //fin
 }

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

 /**
 * Evento CLICK
 * */
 @Override
 public void onClick(View v) {
  //segun el boton que se presione, realiza la accion correspondiente
  switch ( v.getId() ) 
  {
   case R.id.btnNum1 : fono.append("1"); break;
   case R.id.btnNum2 : fono.append("2"); break;
   case R.id.btnNum3 : fono.append("3"); break;
   case R.id.btnNum4 : fono.append("4"); break;
   case R.id.btnNum5 : fono.append("5"); break;
   case R.id.btnNum6 : fono.append("6"); break;
   case R.id.btnNum7 : fono.append("7"); break;
   case R.id.btnNum8 : fono.append("8"); break;
   case R.id.btnNum9 : fono.append("9"); break;
   case R.id.btnNum0 : fono.append("0"); break;
   case R.id.btnNumeral : fono.append("#"); break;
   case R.id.btnAsterisco : fono.append("*"); break;
   case R.id.btnDelete: delete(); break;
   case R.id.btnCall: call(); break;
  }  

  textView.setText(fono);
 }

 /**
 * Metodo para eliminar el ultimo caracter del numero de telefono
 * que se escribe en el StringBuilder
 * */
 private void delete()
 {
  if( fono.length()>0 )
  {
   fono.deleteCharAt(fono.length()-1);
  }
 }

 /**
 * Metodo para realizar la llamada telefonica
 * */
 private void call()
 {
  try {
   if( fono.length()> 0)
   {
    //realiza la llamada
    Uri numero = Uri.parse( "tel:" + fono.toString() );
    Intent intent = new Intent(Intent.ACTION_CALL, numero);
    startActivity(intent);    
   }
   else
   {
    //si no se escribio numero telefonico, avisa
    Toast.makeText(getBaseContext(),"Debe escribir un numero de telefono",Toast.LENGTH_SHORT).show(); 
   } 

  }
  catch (ActivityNotFoundException activityException) {
   //si se produce un error, se muestra en el LOGCAT
         Log.e("ET", "No se pudo realizar la llamada.", activityException);
     }

 }
}

5. Para terminar, debemos agregar un permiso a la aplicación sino no podremos realizar llamadas, abre el archivo AndroidManifest.xml y antes de la etiqueta «<application...», debes colocar:

<uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>

Guarda los cambios y ejecuta.

Proyecto ET PHONE HOME

Hasta la próxima 🙂

Últimas entradas

Paginación en SQL Server 2008 y Laravel

Hace un tiempo atras necesitaba mostrar mucha información en pantalla de una base de datos SQL Server 2008 en una aplica[...]

⇨

¿Como paginar con Laravel 11?
Se utiliza la paginación para poder mostrar al usuario una gran cantidad de datos de una forma ordenada en forma de «pag[...]
⇨

¿Cómo hacer el video ABRAZO gratis?
Las aplicaciones con IA (Inteligencia Artifical) cada vez son más y más comunes, estos nos permiten hacer muchas cosas u[...]
⇨

Crea y usa Traits en Laravel
¿Qué es un Trait en Laravel? Los Trait son una forma que laravel tiene para reutilizar el código, son similares a las cl[...]
⇨

Conviertete en una Barbie o Ken con esta App de IA
La aplicación funciona gracias a la inteligencia artificial para generar las imagenes de Barbie & Ken, aunque se deb[...]
⇨

Crea tu propia aplicacion para realizar llamadas

Tags

Últimas entradas

Artículos similares

Ejemplo de uso de ProgressDialog

Introducción a Spark Framework

Reproducción de sonidos con LibGDX

Envío de correo con JavaMail/Netbeans

JSCRUM .:. Gestor de Proyectos

10 compiladores online para estudiantes

JC Mouse | Bolivia