Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
JC Mouse Bolivia
Home / Android / Crea tu propia aplicacion para realizar llamadas

Crea tu propia aplicacion para realizar llamadas

Por 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

Últimas entradas

Quill Editor: Cómo Integrar el WYSIWYG Modular en Vistas Blade

En el desarrollo web la elección de un buen editor de texto enriquecido (WYSIWYG) es una decisión crucial que afecta dir[...]

⇨

Modo Mantenimiento sin Consola: Archivo DOWN

La forma que tiene Laravel en poner una aplicación en Modo Mantenimiento es por consola mediante el comando: Sin embargo[...]

⇨

Modo IA de Google: Por Qué Tu Sitio Web Dejará de Ser Sostenible ¿El Fin del Contenido Gratuito?

La llegada del Modo IA de Google (AI Overviews o Vistas Generales de IA) transformara la búsqueda para siempre. Ahora Go[...]

⇨

Vulnerabilidad Crítica en Ditty: ¿Está Tu WordPress en Riesgo de SSRF?

Se ha descubierto una vulnerabilidad de tipo Server-Side Request Forgery (SSRF) en el plugin de WordPress Ditty, específ[...]

⇨

Más de 400 impresionantes plantillas Readme para perfiles de GitHub

Un archivo README.md es un archivo de texto escrito en el lenguaje de marcado Markdown, este se encuentra en la raíz de[...]

⇨

Artículos similares

Google Open Source: Código Abierto +2000 proyectos

Google abre las puertas de Google Open Source un nuevo sitio web que une todos sus proyectos de «Código Abierto» que ha[...]

Leer más ⇨

Crea un reproductor de video con VLCJ y Java

VLC Media Player es un reproductor multimedia de código abierto muy popular desarrollado por el proyecto VideoLAN. VLCJ[...]

Leer más ⇨

Informes Access con JasperReport/iReport

En este post vemos la forma de conectar una base de datos Access con JasperReport para diseñar y ejecutar reportes. Para[...]

Leer más ⇨

Gráficos iReport con parámetros tipo Date

Matando dos pájaros de un solo tiro :), doy respuesta a un par de preguntas que están relacionadas, en este post veremos[...]

Leer más ⇨

Tutoriales para creación de videojuegos gratis en descarga directa

La comunidad 3D Buzz  era una de los lugares donde la gente curiosa de aprender a realizar videojuegos buscaba recursos[...]

Leer más ⇨

Paso de parámetros entre dos Activity

En este tutorial veremos como pasar parámetros de un activity a otro activity, no hay mucho que decir así que manos a la[...]

Leer más ⇨