Android Custom Dialog

we can easily customize our applications in android and also the dialog's. sometimes we need custom-dialogs for a better UI representation. please make a new project with name AndroidCustomDialog and copy the following code to main activity class which is MainActivity.java
1)

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

Button btn, btnSearch, btnCancel;
Dialog dialog;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

btn = (Button) findViewById(R.id.btn);
btn.setOnClickListener(this);
}

protected void showCustomDialog() {

dialog = new Dialog(MainActivity.this,
android.R.style.Theme_Translucent);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

dialog.setCancelable(true);
dialog.setContentView(R.layout.dialog);


btnSearch = (Button) dialog.findViewById(R.id.btnsearch);
btnCancel = (Button) dialog.findViewById(R.id.btncancel);

btnSearch.setOnClickListener(this);
btnCancel.setOnClickListener(this);

dialog.show();
}


public void onClick(View v) {
switch (v.getId()) {
case R.id.btn:
showCustomDialog();
break;
case R.id.btnsearch:
Toast.makeText(MainActivity.this,
"OK  for you? " ,
Toast.LENGTH_LONG).show();

dialog.dismiss();
break;
case R.id.btncancel:
dialog.dismiss();
break;
default:
break;
}

}
}
2) go to main.xml and copy the given layout to it


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#d3d3d3"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Custom Dialog..."
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:text="click here" />

</RelativeLayout>

3) now it is time to mak a dialog layout dialog.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/bgdialog"
    android:orientation="vertical" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/info" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My Custom Dialog is present here" />
    </LinearLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnsearch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="27dp"
            android:text=" OK " />

        <Button
            android:id="@+id/btncancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="24dp"
            android:text=" Cancel " />
    </LinearLayout>

</LinearLayout>

4) now make a bgdialog.xml inside drawable folder

<?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="#00A3EF"
        android:startColor="#FFFFFF" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

    <stroke
        android:width="2dp"
        android:color="#000000" />

    <corners android:radius="40dp" />

</shape>

5) copy the following image to yours drawable folder

 6) you can see the following out put on emulator after running the code example sucessfully

Android showing progress-bar during the back-end downloading and internet interaction

In this Blog i wants to introduce a way to download an image file from a given link and showing image on the screen. during the download we can see a download progress bar /waiting bar as spinner. please make a new project with the AndroidDownloadFileByProgressBar, we need to copy given layout to main.xml

1)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- Download Button -->
    <Button android:id="@+id/btnProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Download"
        android:layout_marginTop="50dip"/>
   
    <!-- Image view to show image after downloading -->
    <ImageView android:id="@+id/my_image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

2) now copy the following code to main activity class AndroidDownloadFileByProgressBarActivity.java



import java.io.BufferedInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;

import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidDownloadFileByProgressBarActivity extends Activity {


Button btnShowProgress;


private ProgressDialog pDialog;
ImageView my_image;
// Progress dialog type (0 - for Horizontal progress bar)
public static final int progress_bar_type = 0;


private static String file_url = "http://www.trisolutions.in/images/1_android3.jpg";

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);


btnShowProgress = (Button) findViewById(R.id.btnProgressBar);

my_image = (ImageView) findViewById(R.id.my_image);
/**
* Show Progress bar click event
* */
btnShowProgress.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// starting new Async Task
new DownloadFileFromURL().execute(file_url);
}
});
}

/**
* Showing Dialog
* */
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case progress_bar_type:
pDialog = new ProgressDialog(this);
pDialog.setMessage("Downloading Image file. Please wait for a while...");
pDialog.setIndeterminate(false);
pDialog.setMax(100);
pDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
//pDialog.setCancelable(true);
pDialog.show();
return pDialog;
default:
return null;
}
}

/**
* Background Async Task to download file
* */
class DownloadFileFromURL extends AsyncTask<String, String, String> {

/**
* Before starting background thread
* Show Progress Bar Dialog
* */
@Override
protected void onPreExecute() {
super.onPreExecute();
showDialog(progress_bar_type);
}

/**
* Downloading file in background thread
* */
@Override
protected String doInBackground(String... f_url) {
int count;
       try {
           URL url = new URL(f_url[0]);
           URLConnection conection = url.openConnection();
           conection.connect();
           // getting file length
           int lenghtOfFile = conection.getContentLength();

           // input stream to read file - with 8k buffer
           InputStream input = new BufferedInputStream(url.openStream(), 8192);
         
           // Output stream to write file
           OutputStream output = new FileOutputStream("/sdcard/downloadedfile.jpg");

           byte data[] = new byte[1024];

           long total = 0;

           while ((count = input.read(data)) != -1) {
               total += count;
               // publishing the progress....
               // After this onProgressUpdate will be called
               publishProgress(""+(int)((total*100)/lenghtOfFile));
             
               // writing data to file
               output.write(data, 0, count);
           }

           // flushing output
           output.flush();
         
           // closing streams
           output.close();
           input.close();
         
       } catch (Exception e) {
        Log.e("Error: ", e.getMessage());
       }
     
       return null;
}

/**
* Updating progress bar
* */
protected void onProgressUpdate(String... progress) {

            pDialog.setProgress(Integer.parseInt(progress[0]));
       }

/**
* After completing background task
* Dismiss the progress dialog
* **/
@Override
protected void onPostExecute(String file_url) {

dismissDialog(progress_bar_type);


String imagePath = Environment.getExternalStorageDirectory().toString() + "/downloadedfile.jpg";

my_image.setImageDrawable(Drawable.createFromPath(imagePath));
}

}
}

3) run on emulator but do not forget the following lines as you need these lines inside yours manifest :)


 <!-- Permission: Allow Connect to Internet -->
    <uses-permission android:name="android.permission.INTERNET" />
   
    <!-- Permission: Writing to SDCard -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

4) check yours avd that there is an sd card mentioned or not? if not than give specifications to it.

have a great day with Android :)

Android CustomeMenu example

we can make custom menu in Aid after following just few steps.
1) create a project with name CustomMenu and make a main activity as CustomMenu.java. copy the given below code to it.


package jitesh.example.custommenu;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import java.util.ArrayList;
import android.app.AlertDialog;
import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ArrayAdapter;

public class CustomMenu extends ListActivity {
MenuDialog customMenuDialog;
private static final String[] items = { "a", "b", "b",
"d", "e", "f", "g", "h", "i",
"j", "k", "l", "m", "n", "o",
"p", "q", "r" };
private ArrayList item = null;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
initAdapter();
registerForContextMenu(getListView());
}
private class MenuDialog extends AlertDialog {
public MenuDialog(Context context) {
super(context);
//setTitle("Android Option Menu Example");
View cus_menu = getLayoutInflater().inflate(R.layout.custom_menu, null);
setView(cus_menu);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
dismiss();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
if (customMenuDialog == null) {
customMenuDialog = new MenuDialog(this);
}
customMenuDialog.show();
return true;
}
return super.onKeyUp(keyCode, event);
}
private void initAdapter() {
item = new ArrayList();
for (String str : items) {
item.add(str);
}
setListAdapter(new ArrayAdapter(this,
android.R.layout.simple_list_item_1, item));
}
}

2) make  custom_menu layout under layout folder of res, copy the given xml layout as follows


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="bottom">
    <ImageButton
       android:id="@+id/sendBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/first"
            android:background="@drawable/background"
            android:contentDescription="@string/image_des" />
  <ImageButton
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:src="@drawable/second"
     android:background="@drawable/background"
     android:contentDescription="@string/image_des"/>
  <ImageButton
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:src="@drawable/third"
     android:background="@drawable/background"
     android:contentDescription="@string/image_des" />
  <ImageButton
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:src="@drawable/fourth"
     android:background="@drawable/background"
     android:contentDescription="@string/image_des" />
</LinearLayout>

3)now copy these images to yours drawable folder

4) make colors.xml file under res\values and copy these lines


<resources>

    <color name="offcolor">#222222</color>
    <color name="oncolor">#C44141</color>

</resources>

5) make a file under re->drawable with name background.xml and copy these lines to it


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_focused="true" android:drawable="@color/oncolor"/>
   <item android:state_pressed="true" android:drawable="@color/oncolor" />
   <item android:drawable="@color/offcolor" />
</selector>

6) make files ffirst.xml, second.xml, third.xml, fourth.xml under  res->drawable

and copy these lines respective to each files

first.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/gifth" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/gifth" /> <!-- focused -->
     <item android:drawable="@drawable/gift" /> <!-- default -->
 </selector>




second.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/logouth" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/logouth" /> <!-- focused -->
     <item android:drawable="@drawable/logout" /> <!-- default -->
 </selector>

third.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/settingsh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/settingsh" /> <!-- focused -->
     <item android:drawable="@drawable/settings" /> <!-- default -->
 </selector>

fourth.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/visitush" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/visitush" /> <!-- focused -->
     <item android:drawable="@drawable/visitus" /> <!-- default -->
 </selector>

Android CustomFont

We can use the custom font in our applications. we can use *.ttf files in application for this purpose just follow these given steps.

1) main.xml


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1" >

    <TableRow>

        <TextView
            android:id="@+id/file"
            android:gravity="center_horizontal"
            android:text="@string/jitesh"
            android:textColor="@color/aqua"
            android:textSize="80sp" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/file2"
            android:gravity="center_horizontal"
            android:text="@string/jitesh"
            android:textColor="@color/aqua"
            android:textSize="60sp" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/file3"
            android:text="@string/jitesh"
            android:textColor="@color/aqua"
            android:textSize="120sp" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/file4"
            android:gravity="center_horizontal"
            android:text="@string/jitesh"
            android:textColor="@color/aqua"
            android:textSize="40sp" />
    </TableRow>

    <TableRow android:id="@+id/text_hide">

        <TextView
            android:id="@+id/file5"
            android:gravity="center_horizontal"
            android:text="@string/jitesh"
            android:textColor="@color/aqua"
            android:textSize="60sp" />
    </TableRow>
   

</TableLayout>

2) enter a string entry in strings.xml

 <string name="jitesh">Jitesh Upadhyay</string>

3)CustomFontExampleActivity.java


import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.os.Environment;
import android.view.View;
import android.widget.TextView;
import java.io.File;

public class CustomFontExampleActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);

TextView tv = (TextView) findViewById(R.id.file);
Typeface face = Typeface.createFromAsset(getAssets(),"fonts/CHOCD.otf");
tv.setTypeface(face);

tv = (TextView) findViewById(R.id.file2);
face = Typeface.createFromAsset(getAssets(),"fonts/ABADDON.TTF");
tv.setTypeface(face);

tv = (TextView) findViewById(R.id.file3);
face = Typeface.createFromAsset(getAssets(),"fonts/ANGEL.otf");
tv.setTypeface(face);

tv = (TextView) findViewById(R.id.file4);
face = Typeface.createFromAsset(getAssets(),"fonts/NorthernTerritories.ttf");
tv.setTypeface(face);

tv = (TextView) findViewById(R.id.file5);
face = Typeface.createFromAsset(getAssets(),"fonts/WoodWud.ttf");
tv.setTypeface(face);


}
}

4) make a fonts folder inside assets folder and put font files inside this .

get fonts from the link

http://cooltext.com/Fonts-A

Android custom Grid of Buttons

I was just working with android to get a grid of buttons and on hover and on focus grid buttons are changing there icons. for this purpose i just made some code which i wants to share with all of you!!

it is easy to understand and easy to develop we just need to focus on few things, these are the following steps :)
1> create a project with name GridofButtons with a main activity named MainActivity.java and the main xml layout as activity_main.xml

just copy the following code to activity class:


package jitesh.grid.button;


import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Point;

public class MainActivity extends Activity {

GridView GridView01;
 View MyView;
  @Override
  public void onCreate(Bundle savedInstanceState){
     super.onCreate(savedInstanceState);
     this.requestWindowFeature(Window.FEATURE_NO_TITLE);
     setContentView(R.layout.activity_main);

     /*Here we setContentView() to main.xml, get the GridView and then fill it with the 
                  ImageAdapter class that extend from BaseAdapter */

     GridView01 = (GridView)findViewById(R.id.GridView01);
     GridView01.setAdapter(new ImageButtonAdapter(this));
    // MyView.getHeight();
   // Log.d("height",MyView.getHeight()+"");
     GridView01.setVerticalSpacing(22);
    
     GridView01.setGravity(Gravity.CENTER_HORIZONTAL);
               
     
  }
  
  
  public class ImageButtonAdapter extends BaseAdapter
  {
     Context MyContext;
     
     public ImageButtonAdapter(Context _MyContext)
     {
        MyContext = _MyContext;
     }
     
     public int getCount() 
     {
                       /* Set the number of element we want on the grid */
        return 6;
     }

     public View getView(final int position, View convertView, ViewGroup parent) 
     {
         MyView = convertView;
        
        if ( convertView == null )
        {
                               /*we define the view that will display on the grid*/
          
           //Inflate the layout
           LayoutInflater li = getLayoutInflater();
           MyView = li.inflate(R.layout.gridbutton, null);
           
           // Add The Text!!!
           TextView tv = (TextView)MyView.findViewById(R.id.icon_text);
           tv.setText(name[position]);
           tv.setTextColor(getResources().getColor(R.color.gridbuttonbackground));
           // Add The Image!!!           
           ImageButton iv = (ImageButton)MyView.findViewById(R.id.icon_image);
          
           iv.setImageResource(mThumbIds[position]);
          
           iv.setOnClickListener(new View.OnClickListener() {
               public void onClick(View v) {
//                 Toast.makeText(getApplicationContext(),
//                            "its working"+"onClick"+"position ["+position+"]",
//                             Toast.LENGTH_SHORT).show();
                navigateToScreen(position, getApplicationContext());
               }
           });
        
        }
      
        return MyView;
     }

public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
}

public long getItemId(int position) {
// TODO Auto-generated method stub
return 6;
}

  
  }
  private Integer[] mThumbIds = {
       R.drawable.fifth, R.drawable.first,
       R.drawable.fourth, R.drawable.second,
       R.drawable.sixth, R.drawable.third
   };
  private String[] name={"first","second","third","fourth","fifth","sixth"};
  public void navigateToScreen(int i, Context context){
  
  switch (i) {
         case 0:  
        
                  break;
         case 1: 
                  break;
         case 2: 
                  break;
         case 3:  
                  break;
         case 4:  
                  break;
         case 5:  
             break;
  }
  }
}

2> in second step copy the layout as follows in yours activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/element1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"
    android:orientation="vertical" >
   
  
    <GridView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/GridView01"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        android:gravity="center_horizontal|center_vertical"
        android:horizontalSpacing="0dip"
        android:numColumns="2"
        android:padding="10dp"
        android:stretchMode="columnWidth" >
    </GridView>
    </LinearLayout>
3> create an another xml layout with name gridbutton.xml
 copy the following layout to this:




<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget44"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/icon_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/first" />

    <TextView
        android:id="@+id/icon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        >
    </TextView>

</LinearLayout>


4> Now we need to make few selectors as follows: 
put all these inside drawable

a) first.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/oneh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/oneh" /> <!-- focused -->
     <item android:drawable="@drawable/one" /> <!-- default -->
 </selector>

b)second.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/twoh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/twoh" /> <!-- focused -->
     <item android:drawable="@drawable/two" /> <!-- default -->
 </selector>

c)third.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/threeh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/threeh" /> <!-- focused -->
     <item android:drawable="@drawable/three" /> <!-- default -->
 </selector>

d)fourth.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/fourh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/fourh" /> <!-- focused -->
     <item android:drawable="@drawable/four" /> <!-- default -->
 </selector>

e) fifth.xml


<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/fiveh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/fiveh" /> <!-- focused -->
     <item android:drawable="@drawable/five" /> <!-- default -->
 </selector>

f) sixth.xml

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/sixh" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/sixh" /> <!-- focused -->
     <item android:drawable="@drawable/six" /> <!-- default -->
 </selector>

5> in this step make a colors.xml inside ...\res\values

and copy these lines there


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="gridbuttonbackground">#ffffffff</color>
</resources>

6> now copy all these images to drawable

NOW you can run the program and can see the desired result on emulator or at the device as shown below: