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 ColorStateList for TextView to show when click on it

Using ColorStateList for Textiew we can display colours when click on it.

When we need to display a text as a link, and clicked on the text starts another activity or do some action. It looks good if we display text color states, so User can know text is clicked. Here is how we can do it…

Create file in res/drawable/text_selector_red_black.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:color="@color/black" />
    <item android:state_focused="true" android:state_pressed="true" android:color="@color/black" />
    <item android:state_focused="false" android:state_pressed="true" android:color="@color/black" />
    <item android:color="@color/red" />
</selector>

and in color.xml file add these colors

#000000
#ff0000

Then use apply textColor property for TextView as “@drawable/text_selector_red_black” in design window. Or you can apply in coding as below

textViewObj.setTextColor(getResources().getColorStateList(R.drawable.text_selector_red_black));

Hope this helps. 🙂