Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Android: Create a simple color picker

28.09.2018 (πŸ‘9377)

Android: simple color picker

 

How to Create a Simple Color Picker in Android App?

 

I need a small color palette or selection of colors for an app, which I can choose.

For this you can create a simple color picker.

 

 

Solution:

You store a string array of color values ​​under values.

Then you create a list with buttons, which invokes the color values.

 

Simple color selection with a custom color picker

 

 

String array

You created a string array file under Resources.

The trick is to define the array as resources-> string-array-> item in the file

 

Under res / values ​​/ colors_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <
string-array name="color_picker">
        <
item name="picker_1">#F6402C</item>
        <
item name="picker_2">#EB1460</item>
        <
item name="picker_3">#9C1AB1</item>
        <
item name="picker_4">#6633B9</item>
        <
item name="picker_5">#3D4DB7</item>
        <
item name="picker_6">#1093F5</item>
        <
item name="picker_7">#00A6F6</item>
        <
item name="picker_8">#00BBD5</item>
        <
item name="picker_9">#009687</item>
        <
item name="picker_10">#46AF4A</item>
        <
item name="picker_11">#88C440</item>
        <
item name="picker_12">#CCDD1E</item>
        <
item name="picker_13">#FFEC16</item>
        <
item name="picker_14">#FFC100</item>
        <
item name="picker_15">#FF9800</item>
        <
item name="picker_16">#FF5505</item>
        <
item name="picker_17">#7A5547</item>
        <
item name="picker_18">#9D9D9D</item>
        <
item name="picker_19">#5E7C8B</item>
    </
string-array>
</
resources>

 

 

 

 

Java code:

In the runtime Java code you first load the array that contains the colors

String[] colors = getResources().getStringArray(R.array.color_picker);

 

Then you go through the array and create a button for each color entry and add it to the list

Integer iMax=colors.length;
for( Integer iColor=0;iColor< colors.length;iColor++) {
   
//-< create Color_Button >-
   
String color = colors[iColor];
    Button btn =
new Button(this);
    btn.setBackgroundColor(Color.parseColor(color));
    btn.setOnClickListener(
onButton_clicked);
   
//-< create Color_Button >-

    //< add >
   
LinearLayout panel_color = findViewById(R.id.panel_ColorPicker);
    panel_color.addView(btn);
   
//</ add >
}

 

Java MainActivity

 

 

 

Activity Code

Res / layout / activity_main.xml

In the activity you create a ScrollView with an embedded LinearLayout as stack memory

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:app="http://schemas.android.com/apk/res-auto"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
tools:context=".MainActivity">
    <
ScrollView
       
app:layout_constraintStart_toStartOf="parent"
       
app:layout_constraintTop_toTopOf="parent"
       
android:layout_width="110dp"
       
android:layout_height="392dp"
       
android:layout_marginStart="96dp"
       
android:layout_marginTop="36dp"
       
>
    <
LinearLayout
       
android:id="@+id/panel_ColorPicker"

       
android:orientation="vertical"
       
android:layout_height="match_parent"
       
android:layout_width="match_parent">

    </
LinearLayout>
    </
ScrollView>

</
android.support.constraint.ConstraintLayout

 

 

 

 

 

Complete Java code

Java code

App / java / project / Main Activity

package com.codedocu.demo06_colorpicker;

import android.app.AlertDialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TableRow;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        load_Color_Picker();
    }

   
public void load_Color_Picker() {
       
//------------< load_Color_Picker() >-----------
        //< init >
        //*Colors from file colors_picker.xml
       
String[] colors = getResources().getStringArray(R.array.color_picker);
       
//</ init >
       
        //----< @Loop: Colors-Array >----
       
Integer iMax=colors.length;
       
for( Integer iColor=0;iColor< colors.length;iColor++) {
           
//-< create Color_Button >-
           
String color = colors[iColor];
            Button btn =
new Button(this);
            btn.setBackgroundColor(Color.parseColor(color));
            btn.setOnClickListener(
onButton_clicked);
           
//-< create Color_Button >-
           
            //< add >
           
LinearLayout panel_color = findViewById(R.id.panel_ColorPicker);
            panel_color.addView(btn);
           
//</ add >
        
}
       
//----</ @Loop: Colors-Array >----
        //------------</ load_Color_Picker() >-----------
   
}

    View.OnClickListener
onButton_clicked = new View.OnClickListener() {
       
public void onClick(View view) {
           
//-----------< onButton_clicked() >------------
            //< get_button >
           
Button btn=(Button) view;
            ColorDrawable viewColor = (ColorDrawable) btn.getBackground();
           
int colorId = viewColor.getColor();
            String sColor=String.valueOf(colorId);
           
//</ get_button >
           
            //< show_Message >
           
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
            builder.setMessage(
"Color=" + sColor)
                    .setTitle(
"Color-Picker");
            AlertDialog dialog = builder.create();
            dialog.show();
           
//</ show_Message >
            //-----------</ onButton_clicked() >------------
       
}
    };

}