Spinner to select Color

Question

Good night, I am developing a Personal Finance APP and in my Category registration it will need to select a color, and I would like to do the same as the image. Someone knows how I can do or how to do a tutorial to get close to this. Thank you!

Answer 1

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

res/drawable/Circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#FFFFFF"/>
    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>  

In the folder res/layout create the layout of the lines of 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"
    android:layout_height="wrap_content">

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

</LinearLayout>  

In the folder values create a Resource where declares a string-array with the color list to be used in Spinner

values/colors_array

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="colors">
        <item>#f44336</item>
        <item>#e91e63</item>
        <item>#9c27b0</item>
        <item>#2196f3</item>
        <item>#009688</item>
        <item>#4caf50</item>
        <item>#cddc39</item>
        <item>#ffeb3b</item>
        <item>#ff9800</item>
        <item>#795548</item>
        <item>#9e9e9e</item>
        <item>#000000</item>
    </string-array>
</resources>  

Create the Adapter to be used by Spinner

Colorsadapter.java

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);
    }

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

    @Override
    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;
    }

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

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

In the method onCreate() of Activity put the following code to use the Spinner

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

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 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.
    mySpinner.setAdapter(adapter);

    //Listener a ser chamado quando uma cor for seleccionada no Spinner
    mySpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        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

        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {

        }
    });
}