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

 

Get a Dialog style activity window to fill the screen-Android

Applying Dialog Style to Activity

Generally when we set Activity theme as dialog style,

<activity
android:label="@string/app_name"
android:name=".DialogActivity"
android:theme="@android:style/Theme.Dialog" />
<activity/>

its just display at the center of the screen, with specific width and height set in the XML Layout file or as per the Content. as shown below.

Dialog style

At times you may want to display Dialog activity as Full screen like a Child screen over a Parent screen. To do that, here is snippet code…

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);
    getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
}

here Important point is, you should place the getWindow().setLayout() method statement after setContentView() method, otherwise it won’t work.

Ref link http://stackoverflow.com/questions/1362723/how-can-i-get-a-dialog-style-activity-window-to-fill-the-screen/1693716#1693716

Hope it helps somebody.

Themes not applying to ListView items Android

I applied themes for an app, Its worked fine for all screens except few screen which are having ListView custom items. Here is the cropped image of a ListView item row showing theme not apply to it

ListView

Solution:

Here is the solution for it, I implemented a custom ArrayAdapter class and i call that class like this

CustomListAdapter adapter = new CustomListAdapter(getApplicationContext(), R.layout.listitem);

after so much search, I find the issue is with above line at

getApplicationContext()

. See this link to know few more details.

So, I changed it to like this

CustomListAdapter adapter = new CustomListAdapter(ActivityName.this, R.layout.listitem);

Fixes the issue.. after that theme working fine with ListView item. and It shows like this below

list_item2

Hope It helps somebody out there 🙂