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.

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

• HTML Tags Supported By TextView, Android
• Apply ColorStateList for TextView