Spinner to select Color

Posted on

Question :

Good night,
   I am developing a Personal Finance APP and in my Category register he has to select a color, and I would like to do the same as the image. Does anyone know how I can do or any tutorial that comes close to this.


Answer :

In the res / drawable folder create a Drawable in the form of a circle:

res / drawable / circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns_android="http://schemas.android.com/apk/res/android"

In the res / layout folder, create the layout of the Spinner

res / layout / spinner_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_orientation="vertical" android_layout_width="wrap_content"



In the values folder, create a resource where you declare a string-array with the list of colors to use in Spinner em>

values / colors_array

<?xml version="1.0" encoding="utf-8"?>
    <string-array name="colors">

Create the Adapter to be used by Spinner


public class ColorsAdapter extends ArrayAdapter<String> {
    private final LayoutInflater inflater;

    public ColorsAdapter(Context context, int resource, String[] colors) {
        super(context, resource, colors);
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    public View getDropDownView(int position, View cnvtView, ViewGroup prnt) {
        return getCustomView(position, cnvtView, prnt);

    public View getView(int pos, View cnvtView, ViewGroup prnt) {
        return getCustomView(pos, cnvtView, prnt);

    public View getCustomView(int position, View convertView, ViewGroup parent) {
        View row = inflater.inflate(R.layout.spinner_row, parent, false);
        ImageView image = (ImageView)row.findViewById(R.id.imageView);

        //Obtém a cor referente a esta posição
        int color = getColor(position);
        // Obtém a referência ao circlo
        Drawable circle = image.getDrawable();
        //Atribui a cor
        circle.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
        return row;

    public String getItem(int position) {
        return super.getItem(position);

    public int getColor(int position){
        return Color.parseColor(getItem(position));

In the% method of Activity put the following code to use Spinner

// Variável para guardar a cor seleccionada no Spinner
private int selectedColor;

protected void onCreate(Bundle savedInstanceState) {

    // Obtém  o array de cores.
    String[] colors = getResources().getStringArray(R.array.colors);

    //Cria o adapter.
    final ColorsAdapter adapter = new ColorsAdapter(this, R.layout.spinner_row, colors);

    //Obtém a referência ao Spinner
    Spinner mySpinner = (Spinner) findViewById(R.id.spinner);
    //Atribui o adapter.

    //Listener a ser chamado quando uma cor for seleccionada no Spinner
    mySpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
            //Obtém e guarda a cor seleccionada
            selectedColor = adapter.getColor(position);

            //A partir daqui use a cor da forma como entender


        public void onNothingSelected(AdapterView<?> parent) {



Leave a Reply

Your email address will not be published. Required fields are marked *