Customized Spinner

In this tutorial I will show you how to customized a spinner as what you see below.
See sample output below:

Now put this code under the onCreate Method in your Activity.java under setContentView.

final ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
       HashMap<String, Object> map = new HashMap<String, Object>();
       map.put("Name", "Marjune Ibañez Sniper");
       map.put("Address", "Dauis, Bohol, Philippines");
       map.put("Relation", "Friends");
       map.put("Icon", R.drawable.profile);
       list.add(map);

       map = new HashMap<String, Object>();
       map.put("Name", "Jmarv Parba");
       map.put("Address", "Cebu City, Cebu, Philippines");
       map.put("Relation", "Friends");
       map.put("Icon", R.drawable.stalon);
       list.add(map);
       
       map = new HashMap<String, Object>();
       map.put("Name", "Alberto Gaudicos Jr.");
       map.put("Address", "Tubigon, Bohol, Philippines");
       map.put("Relation", "Mine");
       map.put("Icon", R.drawable.bradpit);
       list.add(map);
       

       final Spinner spin = (Spinner) findViewById(R.id.receiver);
       myAdapter adapter = new myAdapter(getApplicationContext(), list,
               R.layout.send_money_spinner_layout, new String[] { "Name", "Address", "Relation", "Icon" },
               new int[] { R.id.name, R.id.kyc, R.id.relation, R.id.image });

       spin.setAdapter(adapter);
       
       spin.setOnItemSelectedListener(new OnItemSelectedListener(){

        @Override
        public void onItemSelected(AdapterView<?> arg0,View v, int arg2,long arg3) {
           // TODO Auto-generated method stub
        String selected = (String) list.get(spin.getSelectedItemPosition()).get("Name");
        SavePreferences("name", selected );
        }

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
        }); 

and add this class that extends SimpleAdapter below your main class.

class myAdapter extends SimpleAdapter {

private Context mcontext;
    public myAdapter(Context context, List<? extends Map<String, ?>> data,
            int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        
        mcontext = context;

    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater object = (LayoutInflater)mcontext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      if (convertView == null) {
               convertView = object.inflate(R.layout.send_money_spinner_layout,
                       null);
           }

           HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);

           ((TextView) convertView.findViewById(R.id.name))
                   .setText((String) data.get("Name"));
           ((TextView) convertView.findViewById(R.id.kyc))
           .setText((String) data.get("Address"));
           ((TextView) convertView.findViewById(R.id.relation))
           .setText((String) data.get("Relation"));
           ((ImageView) convertView.findViewById(R.id.image))
                   .setImageResource((Integer) data.get("Icon"));

           return convertView;
    }

}

Here's the code for layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:paddingTop="3dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="5dp"
    android:background="@drawable/spinner_background">


<ImageView
   android:id="@+id/image"
   android:layout_width="80dp"
   android:layout_height="70dp"
   android:src="@drawable/profile" />
 
<LinearLayout
   android:id="@+id/scrolls"
       android:orientation="horizontal"
       android:layout_height="wrap_content"
       android:weightSum="100"
       android:layout_width="fill_parent">

<LinearLayout
   android:id="@+id/scroll"
    android:layout_weight="10"
       android:orientation="vertical"
       android:layout_height="wrap_content"
       android:paddingLeft="5dp"
       android:paddingTop="1dp"
    android:layout_width="fill_parent">
   
<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:textColor="#4C4C4C"
   android:textSize="13dp"
   android:textStyle="bold"
   android:text="Name"
   android:id="@+id/name"
   />

<TextView
   android:id="@+id/kyc"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Address"
   android:textSize="13dp"
   android:textColor="#4C4C4C" />

<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:text="Relation"
   android:textSize="13dp"
   android:textColor="#4C4C4C"
   android:id="@+id/relation"
   />

</LinearLayout>

<LinearLayout
   android:layout_weight="90"
   android:layout_below="@+id/scrolls"
       android:orientation="vertical"
       android:layout_height="wrap_content"
       android:layout_gravity="right|bottom"
       android:paddingLeft="10dp"
    android:layout_width="fill_parent">

<ImageView
   android:id="@+id/imageView1"
   android:gravity="right|bottom"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:src="@drawable/icon_dropdown" />

   </LinearLayout>
</LinearLayout>

</LinearLayout>

Here's the code for spinner_background.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

     android:state_selected="false"

        android:state_pressed="false"

        android:drawable="@drawable/gradient_bg" />

 

    <item android:state_pressed="true"

        android:drawable="@drawable/gradient_bg" />

 

    <item android:state_selected="true"

     android:state_pressed="false"

        android:drawable="@drawable/gradient_bg" />

</selector>

Here's the code for icon_dropdown.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

     android:state_selected="false"

        android:state_pressed="false"

        android:drawable="@drawable/ic_find_next_holo_dark" />

 

    <item android:state_pressed="true"

        android:drawable="@drawable/ic_find_next_holo_light" />

 

    <item android:state_selected="true"

     android:state_pressed="false"

        android:drawable="@drawable/ic_find_next_holo_light" />

</selector>

For the images, you may refer on your sdk folder, sdk\platforms\android_version\data\res. That's all enjoy coding.

Customized Dialog

In this tutorial, I will show you how to create a customized dialog in android. This is good because you can minimized the design and develop what you want.

See Code Sample below:

public void date_to(){
    final Dialog dialog1 = new Dialog(context);

//Getting the screen resolution
dialog1.requestWindowFeature(Window.FEATURE_LEFT_ICON);
dialog1.setContentView(R.layout.send_money_date_layout);
if((getResources().getConfiguration().screenLayout &
Configuration.SCREENLAYOUT_SIZE_LARGE) ==
Configuration.SCREENLAYOUT_SIZE_LARGE){
   dialog1.getWindow().setLayout(350, 270);
}else{
}
//end getting the screen resolution
dialog1.setFeatureDrawableResource(Window.FEATURE_LEFT_ICON, R.drawable.ml_logo);
dialog1.getWindow().setBackgroundDrawableResource(R.drawable.dialog_title_background);
dialog1.setTitle("Select Date To:");

Button btn_dateto = (Button) dialog1.findViewById(R.id.back);
btn_dateto.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
DatePicker dp_date_to = (DatePicker) dialog1.findViewById(R.id.dp_date);

int   day_to  = dp_date_to.getDayOfMonth();
int   month_to= dp_date_to.getMonth()+1;
int   year_to = dp_date_to.getYear();

String date_to = Integer.toString(month_to)+" "+Integer.toString(day_to)+", "+Integer.toString(year_to);
String cdate_to = Integer.toString(year_to)+Integer.toString(month_to)+Integer.toString(day_to);
SavePreferences("compare_to", cdate_to);
SimpleDateFormat dateFormat = new SimpleDateFormat(
           "MM dd, yyyy");
   Date myDate = null;
  
       try {
myDate = dateFormat.parse(date_to);
} catch (java.text.ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

   SimpleDateFormat timeFormat = new SimpleDateFormat("MMM dd, yyyy");
   String fdate_to = timeFormat.format(myDate); 
   SavePreferences("date_to", fdate_to);
et_dateto.setText(LoadPreferences("date_to", ""));
dialog1.dismiss();
}
});

dialog1.show();
    }


I put the dialog code inside the function, so i just call the function when i click a button or whatsoever. In this example i put the datepicker view inside the dialog. Put this code into your Activity.java.

To call the function in a button for example. In your onCreate Method or whatsoever. Here's the code.

Button your_button_name = (Button)findViewById(R.id.button_id);
your_button_name.setOnClickListener(new OnClickListener(){
date_to();
});

Next is the XML for the customized dialog. See code below.

dialog.xml

<?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="match_parent"
    android:layout_gravity="center_horizontal"
    android:background="#FFFFFF"
    android:paddingTop="5dp" >

    <LinearLayout
        android:id="@+id/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <DatePicker
            android:id="@+id/dp_date"
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        
    </LinearLayout>


    <LinearLayout
        android:id="@+id/ll_date_ok"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/header"
        android:layout_marginTop="14dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="5dp"
        android:weightSum="100" >

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="48"
            android:background="@drawable/btn_style"
            android:gravity="center"
            android:padding="10dp"
            android:shadowRadius="0.6"
            android:drawableLeft="@drawable/back"
            android:text="OK"
            android:textColor="#FFFFFF" />
    </LinearLayout>


</RelativeLayout>

btn_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true" >
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#000000" />
             <gradient  android:angle="-90"  android:startColor="#800000" android:endColor="#FF0000"  />            
         </shape>
     </item>
    <item android:state_focused="true">
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#000000" />
             <solid  android:color="#8a7246"/>       
         </shape>
     </item>  
    <item >
        <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#000000" />
             <gradient  android:angle="-90"  android:startColor="#FF0000" android:endColor="#800000" />            
         </shape>
     </item>

</selector>

Here's the sample output below:

That's All. Enjoy Coding...!