Android ImageButton Example

1:28 PM Fighttech 0 Comments

        

         The name of this element speaks for itself, ImageButton is basically just a clickable image:) There are three things that you are going to need to create an ImageButton:

1. Design your button

         To do this you can use any software that you are comfortable with, it can be Paint or Microsoft Word, or Photoshop and PagePlus for something more sophisticated:) You can also find some very nice ready to use buttons on the internet (for example http://www.iconarchive.com is a good place to take a look at), just make sure to check the licence:) I have created a very simple button, that looks like this: 




This image needs to be placed in the  res\drawable directory of your project! 

2. Decide what action you want your button to perform 

         This directly depends on your application needs. In this tutorial we will be dialing a number on click (which explains why my button says "Call" on it=)).

3. Code it!

This is very simple:)

a) First thing we need to do here is to modify our xml file, which you can find in res\layout directory by the nameactivity_main.xml (or something similar, the name can vary). Here is a full code for our activity_mail.xml file:

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:gravity="center"  
   android:background="#B6B6B4" >    
   <EditText  
     android:id="@+id/contact_number"  
     android:inputType="number"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:hint="@string/enter_nember" />  
   <ImageButton   
     android:id="@+id/call_button"  
     android:contentDescription="@+id/call"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:background="#B6B6B4"  
     android:src="@drawable/call_button"  
     />  
 </LinearLayout>  

             Now let me explain the code a little. We are using the LinerLayout here since its very simple and easy to use)  In this linear layout we place two elements: EditText that we need for our user to be able to enter a number that he wants to dial (fell free to get rid of it if your button will be performing some other action) and ImageButton element, here we  need to specify the location of our image, which is android:src="@drawable/call_button".

b) Next thing that we need to do is to fill with code our java class file. By default the name of this class will beMainActivity.java and it is located in the src\your_project_package_name\MainActivity.java directory. The full code for it is the following:

 package com.examples.a_tuts;  
 import android.net.Uri;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.EditText;  
 import android.widget.ImageButton;  
 import android.app.Activity;  
 import android.content.Intent;  
 public class MainActivity extends Activity {  
      private String edittext_value;  
      private EditText number;  
      private ImageButton sleepingSmiley;  
      @Override  
      protected void onCreate(Bundle savedInstanceState) {  
           super.onCreate(savedInstanceState);  
           setContentView(R.layout.activity_main);  
           number = (EditText) findViewById(R.id.contact_number);  
           sleepingSmiley = (ImageButton) findViewById(R.id.call_button);  
           onButtonClick();  
      }  
      private void onButtonClick(){  
           sleepingSmiley.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     edittext_value = number.getText().toString();  
                     Intent i = new Intent(Intent.ACTION_CALL);  
               i.setData(Uri.parse("tel:" + edittext_value));  
               startActivity(i);                 
                }  
           });  
      }  
And some explanation: 

             In the beginning in onCreate method we let Android know what elements we will be using, both EditText andImageButton elements are found by their id that we have specified in our activity_main.xml file.  
                Then we set OnClickListener to our ImageButton and place corresponding code into onClick method. Since my goal here was to dial a number, I first extracted a value that a user entered in the EditText element and used Intent.ACTION_CALL to dial a number:) Now if your button is supposed to perform some other action just replace the come inside the onClick method with something relevant:) 

That's it! 

oh, and here is a DEMO:

Source code

               
          Thank you for reading my blog, hope this was helpful and I also hope to see you here again:) Have a great day)

0 comments: