How to change color of Seekbar, Checkbox, and Switch in Sketchware?



The color of various widgets can be changed programmatically with simple codes. Provided below are a few codes which can be used in Sketchware to change the color of Seekbar, Checkbox and Switch.

Codes for Seekbar
To change color of Seekbar progress and Seekbar thumb use the codes provided below in add source directly block in onCreate event.

seekbar1.getProgressDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN);

seekbar1.getThumb().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN);

Note that in the code above seekbar1 is the name or id of the Seekbar inserted in VIEW area.

The Seekbar thumb can be made invisible by using 00 for AA in code #AARRGGBB in color code. So code for no thumb may look like:
seekbar1.getThumb().setColorFilter(Color.parseColor("#00FF00FF"), PorterDuff.Mode.SRC_IN);


We can also use an image as Seekbar progress and Seekbar thumb, by using following code:

seekbar1.setProgressDrawable(getResources().getDrawable(R.drawable.submit));

seekbar1.setThumb(getResources().getDrawable(R.drawable.i_black));

Note that in this code 'submit' and 'i_black' are name of images being used. The images have to be added using image manager, before using this code.

Codes for Checkbox
To change color of Checkbox button use the codes provided below in add source directly block in onCreate event.

checkbox1.getButtonDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN);

Note that here checkbox1 is id of the Checkbox widget inserted in VIEW area (xml).

Codes for Switch
To change color of Switch use the codes provided below in add source directly block in onCreate event.

switch1.getTrackDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN);

switch1.getThumbDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN);

For using a custom image as track or thumb of switch, add the image using image manager in your Sketchware project, then use following code in onCreate.

switch1.setTrackResource(R.drawable.image_name);
switch1.setThumbResource(R.drawable.image_name);

Note that here switch1 is id of the Switch widget inserted in VIEW area (xml).

Comments

  1. How to change color of title bar shown in recent apps

    ReplyDelete
  2. How to chang the zise of the seekbar tumb?

    ReplyDelete
    Replies
    1. Use an image of your required size as Seekbar thumb

      Delete
  3. The checkbox code gives me error when the app launches...
    Please help!

    ReplyDelete
    Replies
    1. The code works fine. Check if id of your CheckBox is checkbox1. What is the error?

      Delete
    2. Yes it is.
      The app compiles perfectly but when I open it the following error appears:

      Java.lang.NoSuchMethodError: No virtual method getButtonDrawable()Landroid/graphics/drawable/Drawable; in class Landroid/widget/CheckBox; or its super classes (declaration of 'android.widget.CheckBox' appears in /system/framework/framework.jar)


      And so forth... It's a lot of text!
      What surprises me is that the codes for changing the progress bar and the switch works great.

      Any advice would be welcomed.
      Thanks in advance.
      Cheers from Portugal!

      PS: my Android version is still Lollipop, could it make any difference?

      Delete
    3. You can use checkbox1.setButtonDrawable(getResources().getDrawable(R.drawable.image_check)); and set any image as Checkbox button.

      Delete
    4. Thanks, that workaround is just what I needed!

      Delete
  4. how to change the seekbar progress height please

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware