# \[Android\] Can you make a slide for the screen?

**URL:** https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284
**Category:** Processing for Android
**Created:** [February 19, 2022, 2:23am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284 "2022-02-19T02:23:27Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 19, 2022, 2:23am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/1 "2022-02-19T02:23:27Z")

</div>

![fig3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/db4fa6b05d27e7e47605eb583ddbafaf7a9be576.jpeg)

Can you make a slide for the screen?

Hello. I want to put a slide function on the screen like the picture above.

Is it possible to create a slide view in ‘android’ using ‘processing’?

---

<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: [February 19, 2022, 4:26am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/2 "2022-02-19T04:26:38Z")

</div>

hi

this is close for what you want

> **[Scrollbar / Examples](https://processing.org/examples/scrollbar.html)**
>
> Move the scrollbars left and right to change the positions of the images.

you can adapt it for up down

---

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 19, 2022, 9:33am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/3 "2022-02-19T09:33:35Z")

</div>

@jafal

Thank you for your kind and quick reply.

1. First off, the example file is a solution for landscape.

2. Is it correct to weave the solution for vertical as above? Or is there another way?

---

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 19, 2022, 11:02am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/4 "2022-02-19T11:02:56Z")

</div>

Link : [Scrollbars up and down to change the positions of the text - #10 by Chrisir](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/10)

@Chrisir

If you look at the link above, you see the code for ‘Chrisir’.

Is there no ‘library’ or other method other than how to create a scrollbar through the code above?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 19, 2022, 11:27am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/5 "2022-02-19T11:27:20Z")

</div>

See also [Scrollbar / Examples / Processing.org](https://processing.org/examples/scrollbar.html)

See also libraries and GUI section therein

---

<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: [February 19, 2022, 10:04pm UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/6 "2022-02-19T22:04:48Z")

</div>

hi  
change this line the image moves up/down

```auto
 image(img2, height/2, width/2-img2.width/2 + img2Pos*1.5);

```

---

<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: [February 19, 2022, 10:13pm UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/7 "2022-02-19T22:13:36Z")

</div>

```auto
/**
 * Scrollbar. 
 * 
 * Move the scrollbars left and right to change the positions of the images. 
 */

HScrollbar hs1, hs2; // Two scrollbars
PImage img1, img2; // Two images to load

void setup() {
  size(640, 360);
  noStroke();
  
  hs1 = new HScrollbar(0, height/2-8, width, 16, 16);
  hs2 = new HScrollbar(0, height/2+8, width, 16, 16);
  
  // Load images
  img1 = loadImage("seedTop.jpg");
  img2 = loadImage("seedBottom.jpg");
}

void draw() {
  background(255);
  
  // Get the position of the img1 scrollbar
  // and convert to a value to display the img1 image 
  float img1Pos = hs1.getPos()-width/2;
  fill(255);
  image(img1, width/2-img1.width/2 + img1Pos*1.5, 0);
  
  // Get the position of the img2 scrollbar
  // and convert to a value to display the img2 image
  float img2Pos = hs2.getPos()-width/2;
  fill(255);
  //image(img2, width/2-img2.width/2 + img2Pos*1.5, height/2);
 image(img2, height/2, width/2-img2.width/2 + img2Pos*1.5);
  hs1.update();
  hs2.update();
  hs1.display();
  hs2.display();
  
  stroke(0);
  line(0, height/2, width, height/2);
}

class HScrollbar {
  int swidth, sheight; // width and height of bar
  float xpos, ypos; // x and y position of bar
  float spos, newspos; // x position of slider
  float sposMin, sposMax; // max and min values of slider
  int loose; // how loose/heavy
  boolean over; // is the mouse over the slider?
  boolean locked;
  float ratio;

  HScrollbar (float xp, float yp, int sw, int sh, int l) {
    swidth = sw;
    sheight = sh;
    int widthtoheight = sw - sh;
    ratio = (float)sw / (float)widthtoheight;
    xpos = xp;
    ypos = yp-sheight/2;
    spos = xpos + swidth/2 - sheight/2;
    newspos = spos;
    sposMin = xpos;
    sposMax = xpos + swidth - sheight;
    loose = l;
  }

  void update() {
    if (overEvent()) {
      over = true;
    } else {
      over = false;
    }
    if (mousePressed && over) {
      locked = true;
    }
    if (!mousePressed) {
      locked = false;
    }
    if (locked) {
      newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
    }
    if (abs(newspos - spos) > 1) {
      spos = spos + (newspos-spos)/loose;
    }
  }

  float constrain(float val, float minv, float maxv) {
    return min(max(val, minv), maxv);
  }

  boolean overEvent() {
    if (mouseX > xpos && mouseX < xpos+swidth &&
       mouseY > ypos && mouseY < ypos+sheight) {
      return true;
    } else {
      return false;
    }
  }

  void display() {
    noStroke();
    fill(204);
    rect(xpos, ypos, swidth, sheight);
    if (over || locked) {
      fill(0, 0, 0);
    } else {
      fill(102, 102, 102);
    }
    rect(spos, ypos, sheight, sheight);
  }

  float getPos() {
    // Convert spos to be values between
    // 0 and the total width of the scrollbar
    return spos * ratio;
  }
}

```

---

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 20, 2022, 1:44am UTC](https://discourse.processing.org/t/android-can-you-make-a-slide-for-the-screen/35284/8 "2022-02-20T01:44:31Z")

</div>

@jafal@Chrisir

> [@Scrollbars up and down to change the positions of the text](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/9):
>
> From the example you need to init the class and display the scroll bar This is the core line: // Get the position of the img1 scrollbar // and convert to a value to display the img1 image float img1Pos = hs1.getPos()-width/2; When you say println(img1Pos); you will see the values Now use this value before text() command: translate (0, img1Pos); text( „Hello“, 22, 100);

If you look at the link above, there is a ‘vertical’ source code made by ‘Chrisir’.

However, I wonder if it is actually made using this way. Is it to make vertical scrolling like this in ‘Android’? Or is there another way?
