Create Rounded Shapes to apply Button background dynamically

Create Rounded Shapes with colours, and apply Button stateslist as background dynamically

While working on applying dynamic themes to app screens, I happen to work on applying Rounded Shapes with the colours dynamically, to display button states (i.e. default, pressed or focused etc) and also Text colors based on the colour codes in API response.

Rounded Shapesrounded_gray

below is the sample XML API response which shows color codes and XML data.

XML Color codes

 <!-- sample xml data -->
<DefBtnColour>#24014c</DefBtnColour>
<SelBtnColour>#5656ff</SelBtnColour>
<DefBtnFontColour>#afdbb6</DefBtnFontColour>
<SelBtnFontColour>#aa0197</SelBtnFontColour>

Applying shapes and button colour states is easy by creating a selector xml file in drawable folder. but applying dynamically need some more insight to implement in code.

Here is the code snippet… for it

First implemented two rounded shapes with <DefBtnColour> and <SelBtnColour> colours data, using ShapeDrawable class.

Rounded Shapes drawables using ShapeDrawable class

float[] radii = new float[8];
radii[0] = getResources().getDimension(R.dimen.spacing_10); //spacing_10 is 10dp
radii[1] = getResources().getDimension(R.dimen.spacing_10);
radii[2] = getResources().getDimension(R.dimen.spacing_10);
radii[3] = getResources().getDimension(R.dimen.spacing_10);

radii[4] = getResources().getDimension(R.dimen.spacing_10);
radii[5] = getResources().getDimension(R.dimen.spacing_10);
radii[6] = getResources().getDimension(R.dimen.spacing_10);
radii[7] = getResources().getDimension(R.dimen.spacing_10);

ShapeDrawable selShape = new ShapeDrawable();
selShape.setShape(new RoundRectShape(radii, null, null));
selShape.getPaint().setColor(selectedColour);

ShapeDrawable defShape = new ShapeDrawable();
defShape.setShape(new RoundRectShape(radii, null, null));
defShape.getPaint().setColor(defaultcolour);

now add these shapes to the StateListDrawable for default and pressed states..

StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[] {android.R.attr.state_pressed}, selShape);
stateListDrawable.addState(new int[] {}, defShape);

now you can return this stateListDrawable object to apply button background drawable.

whole code snippets is below

 //step 1
protected StateListDrawable applyButtonSelector(int defaultcolour,int selectedColour){
    float[] radii = new float[8];
    radii[0] = getResources().getDimension(R.dimen.spacing_10);
    radii[1] = getResources().getDimension(R.dimen.spacing_10);
    radii[2] = getResources().getDimension(R.dimen.spacing_10);
    radii[3] = getResources().getDimension(R.dimen.spacing_10);

    radii[4] = getResources().getDimension(R.dimen.spacing_10);
    radii[5] = getResources().getDimension(R.dimen.spacing_10);
    radii[6] = getResources().getDimension(R.dimen.spacing_10);
    radii[7] = getResources().getDimension(R.dimen.spacing_10);

    ShapeDrawable selShape = new ShapeDrawable();
    selShape.setShape(new RoundRectShape(radii, null, null));
    selShape.getPaint().setColor(selectedColour);

    ShapeDrawable defShape = new ShapeDrawable();
    defShape.setShape(new RoundRectShape(radii, null, null));
    defShape.getPaint().setColor(defaultcolour);

    StateListDrawable stateListDrawable = new StateListDrawable();
    stateListDrawable.addState(new int[] {android.R.attr.state_pressed}, selShape);
    stateListDrawable.addState(new int[] {}, defShape);
    return stateListDrawable;
}

apply to button background as below

//step 2
themeBtn.setBackgroundDrawable(applyButtonSelector(convertToColorInt(DefaultButtonColour), convertToColorInt(SelectedButtonColour)));

below is the code to convert response colour code text to integer colour code

public static int convertToColorInt(String argb) throws IllegalArgumentException {
   if (!argb.startsWith(HASH)) {
      argb = HASH + argb;
   }
   return Color.parseColor(argb);
}

with this code (step 1,2) you can see,  shape and states drawable applied to button dynamically.

To apply ColorStates for button text you can see this post or SO ref link.

Hope this helps somebody…

ref links: http://stackoverflow.com/a/16502692/341443
http://stackoverflow.com/a/5963179/341443

🙂

You may be also interested in

 

Apply Button background color dynamically Android

Different ways of applying Button background color

To apply basic Colors as Button background, you can use default Color class

btn.setBackgroundColor(R.color.green);
(here btn is instance of a Button view).

To apply Colors using color resources in color.xml file

btn.setBackgroundColor(getResources().getColor(R.color.green));

your color.xml look like

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#088e0b</color>
</resources>

and To apply background as color drawable, using color resources in color.xml file

Drawable drawable = resources.getDrawable(R.color.green);
btn.setBackgroundDrawable(drawable);
btn.setBackground(drawable);

your color.xml look like

<?xml version="1.0" encoding="utf-8"?>
<resources>
<drawable name="green">#088e0b</color>
</resources>

Hope it helps somebody

Cheers 🙂