Index / Android / Crea tu propia aplicacion para realizar llamadas

Crea tu propia aplicacion para realizar llamadas

Autor jc mouse martes, julio 23, 2013

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 🙂

También Te Podría Interesar

Mapas con HTML5 – Funciones de pintado – Parte 5

En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que...

Convertir voz a texto con Android

En este post realizaremos una aplicación que pueda capturar nuestra voz y convertir en texto Pasar voz a texto con Andro...

Problema Resuelto: Personalizar JTable

PROBLEMA: Se tiene un JTable con 19 columnas y 50 registros, se desea personalizar el JTable de la siguiente manera:...

Introducción a Spark Framework

Spark Framework es un conjunto de librerías para los lenguajes Java y Kotlin que nos sirve para el desarrollo rápido y s...

jFace – Crea retratos hablados

La policia, el FBI u otros organismos similares utilizaban a dibujantes para realizar el «retrato hablado» de algún male...

Conexión a múltiples bases de datos en Laravel

En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My...

10 comentarios en “Crea tu propia aplicacion para realizar llamadas”

GABRIELA dice:

2 diciembre, 2014 a las 4:11

Hola muy bien explicado pero una pregunta como puedo agregar un boton para finalizar la llamada
Leocadio dice:

14 octubre, 2015 a las 20:39

Como se puede agregar un boton rojo para finalizar llamada
daniel dice:

5 enero, 2016 a las 17:27

Gracias por publicar estos tutoriales, =)

Yo quiero hacer una simple app pero nunca hice una, tengo conocimientos en php, css, mysql y muy poco de javascript. te agradeceria si nos comunicaramos por mail =)
Edgar Alejandro dice:

26 enero, 2016 a las 15:30

¿para correrlo en android studio es lo mismo?,me gustaría comunicarme por correo
1. Mouse dice:
  
  28 enero, 2016 a las 21:32
  
  nop, necesitas migrar el código, el proyecto no es muy grande asi que te recomendaría hacerlo manualmente, de paso así aprendes algo mas 🙂
David flores dice:

5 marzo, 2016 a las 17:31

Buenísimo la idea lo voy a probar éxitos
David flores dice:

5 marzo, 2016 a las 17:36

Si podemos comunicarnos por correo electrónico(puntomath@gmail.com) o por whatsapp (71039910)me gustaria aportar y alavez aprender más y compartir lo aprendido a las demas generaciones

Tengo algunas ideas espero tu aprobación para comentarlo
1. Mouse dice:
  
  8 marzo, 2016 a las 3:10
  
  Aprobado 🙂
Mario German dice:

14 marzo, 2016 a las 18:24

Hola como se haría cuando los datos los quiero obtener desde una base de datos, es decir el número está almacenado en la base de datos y quiero obtener el numero desde un boton, Me podrías ayudar gracias.
David Cuartas dice:

24 enero, 2017 a las 23:36

Muchas gracias Maestro. Me gustaría saber si es posible o como podría programar una app para videollamadas en android-studio, algo parecido a las videollamadas que hace whatsapp. Es para un proyecto de Telemedicina donde se pretende atender la salud de personas de zonas muy apartadas de Colombia.
Muchas gracias