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

A帽adir c贸digo QR a reportes con iReport

A帽adir c贸digo QR a reportes con iReport

En un post anterior se vio como agregar un c贸digo DataMatrix en reportes con iReport Designer聽sin embargo actualmente el...

Multiplicaci贸n de matrices

Multiplicaci贸n de matrices

En matem谩tica, la multiplicaci贸n o producto de matrices es la operaci贸n de composici贸n efectuada entre dos matrices, o b...

Desarrollo de juegos con Libgdx y Android Studio

Desarrollo de juegos con Libgdx y Android Studio

De las pocas herramientas disponibles entre聽librer铆as, frameworks, engines, etc聽para el desarrollo de videojuegos en len...

JTable con JCheckBox y celdas NULL

JTable con JCheckBox y celdas NULL

Me llego la siguiente duda por facebook que me pareci贸 interesante: 芦Se quiere desarrollar una tabla en java que haga us...

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煤,...

Tres cursos de programaci贸n de la Universidad de Stanford

Tres cursos de programaci贸n de la Universidad de Stanford

La Universidad Leland Stanford Junior, conocida mundialmente como la聽Universidad Stanford, es una universidad privada es...

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

Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar informaci贸n el cual en ocasiones, de...

En este post crearemos un bot贸n swing que reproducir谩 un sonido cuando este sea presionado por el usuario.聽 Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

En esta ocasi贸n aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

Herramientas

Generador de Enlaces a Whatsapp