# Question about sliders in controlP5 library (in Android mode)

**URL:** <https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174>\
**Category:** Processing for Android\
**Created:** [December 15, 2022, 4:35pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174 "2022-12-15T16:35:56Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![David](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/david/32/8853_2.png) [@David](https://discourse.processing.org/u/David)\
**Post date:** [December 15, 2022, 9:49pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/21 "2022-12-15T21:49:30Z")

</div>

Is anyone still supporting Skatalo? There are two open issues on the Skatalo Github page, both opened in 2017 and not assigned to anybody. Looks like it’s orphanware too.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 15, 2022, 9:54pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/22 "2022-12-15T21:54:16Z")

</div>

> [@David](#):
>
> Is anyone still supporting Skatalo? There are two open issues on the Skatalo Github page, both opened in 2017 and not assigned to anybody. Looks like it’s orpanware too.

I I got stuck on the touch issue two years ago, and I didn’t find a solution other than this alternative library, and I haven’t followed up on it since then.

It was perfect for my project

---

<div class="post-metadata">

**Author:** ![David](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/david/32/8853_2.png) [@David](https://discourse.processing.org/u/David)\
**Post date:** [December 15, 2022, 9:57pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/23 "2022-12-15T21:57:27Z")

</div>

@jafal I understand, but I don’t want to invest a lot of my time in something that is no longer supported, even if it’s free. And although it’s open source and I could modify the source code myself, I don’t want to have to spend a lot of time trying to debug something if I run into another problem. I’m not really an expert in Java.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 15, 2022, 10:05pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/24 "2022-12-15T22:05:04Z")

</div>

@David

Yes sir I just commented and mentioned my experience with controlp5 library

Of course, what works for some may not be suitable for all. You have all my respect

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 15, 2022, 10:45pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/25 "2022-12-15T22:45:42Z")

</div>

`I don’t want to invest a lot of my time in something that is no longer supported`

One option would be to use an Android control; the Android equivalent to a slider is called a seek bar. There is an example here: [https://github.com/vsquared/AndroidWidgets\_Processing4\_0\_1](https://github.com/vsquared/AndroidWidgets_Processing4_0_1)

Or you could ‘roll your own’ with something like this (just to give you an example):

```auto
color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);
color ORANGE = color(247,174,77);

Slider slider;
ValueField valueFld;

final float _initValue = 40;
final float _maxValue = 255;
final float _minValue = 0;

float value = _initValue;

boolean selected = false;

void setup() {
  fullScreen();
  orientation(LANDSCAPE);
  slider = new Slider(300, 200, 20, 600, 80, 80, WHITE, BLUE);
  valueFld = new ValueField(450, 340, 150, 80, WHITE, BLACK, 46.0);
}

void draw() {
  background(209);
  slider.display();
  valueFld.display(value);
}

void mousePressed() {
  if ((mouseX >= slider.thumbX) && (mouseX <= slider.thumbX + slider.thumbW) && (mouseY >= slider.thumbY) && (mouseY <= slider.thumbY + 2*slider.thumbH)) {
    selected = true;
  } else {
    selected = false;
  }
}

void mouseDragged() {
  if (selected) {
    slider.thumbY = constrain(mouseY,slider.barY, (slider.barY + slider.barH) - slider.thumbH);
    value = slider.thumbY;
    value = map(value, slider.barY, (slider.barY + slider.barH)-slider.thumbH, _minValue, _maxValue);
    valueFld.display(value);
  }
}

```

**Slider Class (separate tab)**

```auto
class Slider {
  float barX, barY, barW, barH;
  float thumbX, thumbY, thumbW, thumbH;
  color thumbColor, barColor;
  
  // Constructor
  Slider(float bx, float by, float bw, float bh, float thw, float thh, color barc, color thcolor ) {
    barX = bx;
    barY = by;
    barW = bw;
    barH = bh;
    thumbX = bx - thw/3 - 2; 
    thumbY = by + value;
    thumbW = thw;
    thumbH = thh;
    thumbColor = thcolor;
    barColor = barc;
  }

  void display() {
    // Bar
    fill(barColor); // Bar color
    rect(barX, barY, barW, barH, 15);
    // Thumb
    fill(thumbColor); //Thumb color
    rect(thumbX, thumbY, thumbW, thumbH, 15);
  }
}

```

**Value Field Class (separate tab)**

```auto
class ValueField {
  float x, y, w, h;
  color fldColor;
  color txtColor;
  float txtSize;
  
  // Constructor
  ValueField(float xpos, float ypos, float wt, float ht, color background, color foreground, float textSize) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    fldColor = background;
    txtColor = foreground;
    txtSize = textSize;
  }

  void display(float val) {
    fill(fldColor); // erase old value
    rect(x, y, w, h);
    fill(txtColor);
    stroke(0);
    textSize(txtSize);
    textAlign(CENTER,CENTER);
    String valStr = nf(val, 0, 1);
    text(valStr, x, y, w, h);
  }
}

```

---

<div class="post-metadata">

**Author:** ![David](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/david/32/8853_2.png) [@David](https://discourse.processing.org/u/David)\
**Post date:** [December 15, 2022, 11:11pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/26 "2022-12-15T23:11:44Z")

</div>

Thanks. I took a quick look at the Github page, it seems to be fairly new and I didn’t see any documentation, except for the source code itself. But I’ll give it a try, maybe tomorrow.

Maybe I’d be better off sticking to “plain vanilla” Processing and not using any third-party libraries, but I’m kinda lazy and wanted to avoid the extra work.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 16, 2022, 5:43am UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/27 "2022-12-16T05:43:48Z")

</div>

The following is an isolated demo of the Android SeekBar control so that you can see how it works:

```auto
import android.app.Activity;
import android.content.Context;
import android.R;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);
color ORANGE = color(237, 147, 29);

Activity activity;
Context ctx;
TextView valueView;
String s;

int seekBarVal = 50; // Initial value

void setup() {
  fullScreen();
  orientation(LANDSCAPE);
  background(BLUE);
  activity = this.getActivity();
  ctx = activity.getApplicationContext();
  runOnUiThread(new Runnable() {
    void run() {
      seekBar(130, 130, 930, 60, 255, ORANGE, LTGRAY);
      valueView(1110, 128, 600, WHITE, 26.0);
    }
  }
  );
}

void draw() {
}

```

**SeekBar (separate tab):**

```auto
void seekBar(int x, int y, int w, int h, int maxValue, color thumbColor, color barColor ) {
  
  SeekBar seekBar = new SeekBar(ctx);
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  
  seekBar.setX(x);
  seekBar.setY(y);
  layoutParams.width = w;
  layoutParams.height = h;
  seekBar.setLayoutParams(layoutParams);
  ShapeDrawable thumb = new ShapeDrawable(new OvalShape());
  thumb.setIntrinsicHeight(h); // same as bar height
  thumb.setIntrinsicWidth(h);
  thumb.getPaint().setColor(thumbColor);
  seekBar.setThumb(thumb);
  seekBar.setMax(maxValue);
  seekBar.setProgress(seekBarVal);
  seekBar.setBackgroundColor(barColor);

  seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
      seekBarVal = progress;
      s = String.valueOf(seekBarVal);
      valueView.setText(s);
    }
    void onStartTrackingTouch(SeekBar seekBar) {
    }
    void onStopTrackingTouch(SeekBar seekBar) {
    }
  }
  );

  FrameLayout flayout = (FrameLayout)activity.findViewById(R.id.content);
  flayout.addView(seekBar);
}

```

**ValueView (separate tab):**

```auto
void valueView(int x, int y, int w, color txtColor, float txtSize) {

  valueView = new TextView(ctx);
  valueView.setLayoutParams (new RelativeLayout.LayoutParams (RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
  valueView.setX(x);
  valueView.setY(y);
  valueView.setWidth(w);
  valueView.setTextColor(txtColor);
  valueView.setTextSize(txtSize);
  s = String.valueOf(seekBarVal);  
  valueView.setText(s);
  FrameLayout flayout = (FrameLayout)activity.findViewById(R.id.content);
  flayout.addView(valueView);
}

```

---

<div class="post-metadata">

**Author:** ![David](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/david/32/8853_2.png) [@David](https://discourse.processing.org/u/David)\
**Post date:** [December 16, 2022, 1:15pm UTC](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174/28 "2022-12-16T13:15:11Z")

</div>

Thanks, I think this is the way to go, rather than relying on 3rd. party libraries which may not work in Android mode, or may no longer be supported.

[Previous page](https://discourse.processing.org/t/question-about-sliders-in-controlp5-library-in-android-mode/40174.md?page=1)