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"><<</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 🙂
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! :)
El laberinto del terror es un juego en el que haciendo uso del ratón y de tu pulso de borracho debes cruzar distintos la...
En este post veremos como crear una aplicación de ayuda al usuario similar al extinto javahelp. Pero en esta oportunidad...
Un SGA «Sistema de Gestión de Almacenes» es un programa informático destinado a gestionar las entradas y salidas de pro...
Entre las muchas aplicaciones que hay en la playstore de google están las galerías de fotos de chicas 🙂 que tantos nos e...
Un gráfico de barras es una forma de resumir un conjunto de datos por categorías. Muestra los datos usando varias barras...
Gson es una biblioteca de código abierto para Java desarrollado por Google Inc que permite la serialización y deserializ...
Los comentarios estan cerrados
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...
Hola muy bien explicado pero una pregunta como puedo agregar un boton para finalizar la llamada
Como se puede agregar un boton rojo para finalizar llamada
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 =)
¿para correrlo en android studio es lo mismo?,me gustaría comunicarme por correo
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 🙂
Buenísimo la idea lo voy a probar éxitos
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
Aprobado 🙂
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.
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