Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
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.

ET phone

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芦:

fondo telefono

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

xml animation

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.

ET phone

Proyecto ET PHONE HOME

Hasta la pr贸xima 馃檪

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

Mapas con HTML5 – Funciones de pintado – Parte 5

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

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 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

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

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

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”

  1. GABRIELA dice:

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

  2. Leocadio dice:

    Como se puede agregar un boton rojo para finalizar llamada

  3. daniel dice:

    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 =)

  4. Edgar Alejandro dice:

    驴para correrlo en android studio es lo mismo?,me gustar铆a comunicarme por correo

    1. Mouse dice:

      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 馃檪

  5. David flores dice:

    Buen铆simo la idea lo voy a probar 茅xitos

  6. David flores dice:

    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:

      Aprobado 馃檪

  7. Mario German dice:

    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.

  8. David Cuartas dice:

    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

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

脷ltimas entradas

WhatsApp anuncio a trav茅s de su blog que ya se encuentra disponible la funci贸n de env铆o de fotos y videos TEMPORALES, es...

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los j贸venes el cual cuenta ya con millones de videos cortps de...

Una聽clase JTree permite mostrar datos de una forma jer谩rquica y en realidad este objeto no contiene sus datos; es decir,...

Herramientas

Generador de Enlaces a Whatsapp