Friday, 18 July 2014

Custom Spinner Design

Hi!

In android we can custom spinner background and text align very  easily.

In your XML file create the spinner normally as fallow


main.xml

<Spinner
                android:id="@+id/sp_cal_doc"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="#40000000"
                android:popupBackground="#000000" />


the " popupBackground " is used to drop down background and #40000000 is the color range for black transparent.

Now have to create a TextView in your XML file

spiner_tv.xml


<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:gravity="center"
    android:text="TextView"
    android:textColor="@color/wit"
    android:textSize="18sp"
    android:typeface="normal" >

</TextView>

Now you can declare and create your own ArrayAdapter<String> & ArrayList<String> as fallow. But the layout should be your custom TextView Layout only.

Main.Java

Spinner sp_doctr;
sp_doctr = (Spinner) findViewById(R.id.sp_cal_doc);
ArrayList<String> lst_doctr = new ArrayList<String>();

lst_doctr.add("Doctors");
lst_doctr.add("Dr.Raj");
lst_doctr.add("Dr.Lee");
lst_doctr.add("Dr.Selva");
lst_doctr.add("Dr.Saranya");

ArrayAdapter<String> adr_doctr=adr_doctr = new ArrayAdapter<String>(this, R.layout.spiner_tv,
lst_doctr);

sp_doctr.setAdapter(adr_doctr);





Chang the font style on Spinner :


If you want to change the font style on your Spinner view fallow the below.

Custom ArrayAdapter insted of default ArrayAdapter:


package dcs.raj.dcspharma.adoptr;

import java.util.ArrayList;
import dcs.raj.dcspharma.R;
import android.content.Context;
import android.graphics.Typeface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class Spinner_A extends ArrayAdapter<String> {

Context context;
ArrayList<String> a_list;

public Spinner_A(Context context, int textViewResourceId,
ArrayList<String> objects) {
super(context, textViewResourceId, objects);
// TODO Auto-generated constructor stub
this.context = context;
this.a_list = objects;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
if (convertView == null) {
LayoutInflater lf = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = lf.inflate(R.layout.spiner_tv, null);
}
Typeface tf = Typeface.createFromAsset(context.getAssets(),
"font/fontsfile.otf");
TextView tv = (TextView) convertView.findViewById(R.id.tv);
tv.setText(a_list.get(position));
tv.setTypeface(tf);

return convertView;
}

}



Replace the ArrayAdapter:

Spinner_A adr_doctr = new Spinner_A(this, R.layout.spiner_tv, lst_doctr);


Thats all..,

Now you can enjoy with your custom spinner design..,

Thank You!

Please Leave Your Comment..,


Have A Happy Day..,