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! :)
En un post anterior se vio como agregar un c贸digo DataMatrix en reportes con iReport Designer聽sin embargo actualmente el...
En matem谩tica, la multiplicaci贸n o producto de matrices es la operaci贸n de composici贸n efectuada entre dos matrices, o b...
De las pocas herramientas disponibles entre聽librer铆as, frameworks, engines, etc聽para el desarrollo de videojuegos en len...
Me llego la siguiente duda por facebook que me pareci贸 interesante: 芦Se quiere desarrollar una tabla en java que haga us...
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煤,...
La Universidad Leland Stanford Junior, conocida mundialmente como la聽Universidad Stanford, es una universidad privada es...
Los comentarios estan cerrados
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,...
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