# Dropdown Scrollable List needs two taps to open or select an item

**URL:** <https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700>\
**Category:** Processing for Android\
**Created:** [February 3, 2025, 12:51am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700 "2025-02-03T00:51:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 3, 2025, 12:51am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/1 "2025-02-03T00:51:01Z")

</div>

Hi guys, beginner here. This test code aims at opening a list with 3 items and when one of them is selected, the list should close. also when tapping outside the list, it should close.  
but what I am seeing is that the list opens the first time I tap it when I open the app, but if I tap outside the list while it is open, all seems to get out of sync, and I need to tap twice. after that, sometimes I also need to tap the items twice. There is obviously something I am missing and I cannot figure out why this is happening.  
It seems to me that when I tap the list the first time, it might register as if an item was tapped? Anyway, here is the code, and please be gentle, as I said I am a beginner. Thank you in advance for your help.

```auto
import io.inventit.processing.android.serial.Serial;
//import java.io.File;
import controlP5.*;
import java.util.*;
ControlP5 cp5;

Serial myPort;

PFont font, font1, font2, font3, font4, font5;

//ListBox Menu1;
ScrollableList Menu1;

int read_data[];

void setup() {
  clear();
  read_data = new int[8192];
  size(1024, 2048); // Create Window

  font = createFont("Arial Bold", 18);
  font1 = createFont("Arial Bold", 10);
  font2 = createFont("Arial Bold", 13);
  font3 = createFont("Arial Bold", 12);
  font4 = createFont("Arial Bold", 19);
  font5 = createFont("Arial Bold", 26);

  cp5 = new ControlP5(this);
  //cp5.getWindow().setPositionOfTabs(71, 0);
  List l = Arrays.asList("Open Eeprom", "Save Eeprom", "Exit");
  // **********************MENU LISTS**************************

  Menu1 = cp5.addScrollableList("File Menu")
    .setType(ScrollableList.LIST)

    .setPosition(1, 1)
    .setSize(200, 500)
    .setBarHeight(100)
    //.setHeight(500)
    .setItemHeight(100)
    .addItems(l)

    .setFont(font5)

    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setColorValueLabel(color(0, 0, 0))
    .setColorCaptionLabel(color(0, 0, 0))
    .setOpen(false);
  ;

  //Menu1.bringToFront();
  Menu1.getCaptionLabel().toUpperCase(true);
  //Menu1.getCaptionLabel().set("File Menu");
  Menu1.getCaptionLabel().align(CENTER, CENTER);
}

// *****************************MAIN LOOP*********************************

void draw() {
  background(0, 120, 255); // Background Color (r, g, b) or (0 to 255)
  textFont(font4);

  //if (Menu1.isMousePressed()) {

  // Menu1.bringToFront();
  //}
}

void controlEvent(ControlEvent theControlEvent) {
  if (theControlEvent.isController()) {

    if (theControlEvent.isFrom(Menu1)) {

      int MenuItem = int(theControlEvent.getController().getValue());

      if (MenuItem == 0) {

        Menu1.close();
      }
      if (MenuItem == 1) {

        Menu1.close();
      }
      if (MenuItem == 2) {
        Menu1.close();

        System.exit(0);
      }
    }
  }
}

void mouseReleased() {
  if (Menu1.isMouseOver()) {
    if (!Menu1.isOpen()) {
      delay(100); // Small delay to prevent immediate close
      Menu1.open();
    }
  } else {
    Menu1.close();
  }
}

```

---

<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:** [February 3, 2025, 1:24am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/2 "2025-02-03T01:24:39Z")

</div>

It seems like you have had a problem with this before: [Android controlP5 button issue - #12 by jafal](https://discourse.processing.org/t/android-controlp5-button-issue/27001/12)  
If you just can’t use it then you may want to find an alternative: roll your own or use other android controls.  
**More complex alternative:**

```auto
import android.app.Activity;
import android.content.Context;
import android.widget.ListView;
import android.widget.TextView;
import android.view.View;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.FrameLayout;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.RelativeLayout;
import android.widget.ArrayAdapter;
import android.widget.AdapterView;
import android.R;

color WHITE = color(255, 255, 255);
Activity activity;
Context ctx;

void setup() {
 fullScreen();
 orientation(LANDSCAPE);    
  activity = this.getActivity();
  ctx = activity.getApplicationContext();
  runOnUiThread(new Runnable() {
    void run() {      
      listView(200, 300, 500, 800, WHITE, 26.0, Gravity.CENTER);
    }
  }
  );
}

void draw() {
 background(0,0,255);  

}

void listView(int x, int y, int w, int h, color txtColor, float txtSize, int alignment) {

  ListView listView = new ListView(ctx);
  listView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  listView.setX(x);
  listView.setY(y);
  ViewGroup.LayoutParams params = listView.getLayoutParams();
  params.width = w;
  params.height = h;
  listView.setLayoutParams(params);

  String[] osArray = {"Android", "iOS", "WindowsMobile", "WebOS", "Ubuntu", "Mac OS"};
  ArrayAdapter adapter = new ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, android.R.id.text1, osArray) {
    @Override
      public View getView(int position, View convertView, ViewGroup parent) {
      TextView textView = (TextView) super.getView(position, convertView, parent);
      textView.setTextColor(txtColor);
      textView.setTextSize(txtSize);
      textView.setGravity(alignment);
      return textView;
    }
  };
  listView.setAdapter(adapter);
  listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      println("position = ", position);
      println("item = ", listView.getItemAtPosition(position));
    }
  }
  );

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

```

**Another source you might be able to use:**

> **[GitHub - EmmanuelPil/Android-java-code-utilities-widgets-for-Processing-for-Android: Android code for Processing for Android](https://github.com/EmmanuelPil/Android-java-code-utilities-widgets-for-Processing-for-Android)**
>
> Android code for Processing for Android

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 3, 2025, 5:10pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/3 "2025-02-03T17:10:50Z")

</div>

Thank you very much for your answer. I didn’t remember anymore that I had similar issue, I am sorry. Thanks for the links. I would like to learn more about Processing for Android. I think it might be a bit different than Processing for windows?  
I had trouble making it run with my phone, but I did some research and now I can at least try the sketches. So, this is already a victory 🙂  
Thank you again.

---

<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:** [February 3, 2025, 5:30pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/4 "2025-02-03T17:30:56Z")

</div>

> [@jhsa](#):
>
> I think it might be a bit different than Processing for windows?

You’re probably used to using Java mode. Mobile devices require Android mode and it’s another cat. Some of the code will transfer, but most of it is different. If you start with simple things and move your way up it’s doable.

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 4, 2025, 6:20pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/5 "2025-02-04T18:20:36Z")

</div>

I Think I need some simple things for my project. a couple Tabs, a list, a couple DropDown lists a few sliders and to write some text (Preset Names). Then I will need serial communication through USB or even BT. I am trying to communicate with an ESP32-S2 (Arduino) board. I hope I can learn to do all this…

---

<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 4, 2025, 6:47pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/6 "2025-02-04T18:47:56Z")

</div>

> [@jhsa](#):
>
> but if I tap outside the list while it is open, all seems to get out of sync, and I need to tap twice. after that, sometimes I also need to tap the items twice. There is obviously something I am missing and I cannot figure out why this is happening.

you are not missing any thing thats how it’s going On touch Android screen

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 4, 2025, 7:57pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/7 "2025-02-04T19:57:49Z")

</div>

I have been looking at the skatolo library because you said on other thread that you have fixed this problem with this library. But I am still trying to create a font with it. it seems that pfont is not supported. The problem is that I cannot find any info about this library online ☹  
Any suggestions? Thanks

---

<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 4, 2025, 9:08pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/8 "2025-02-04T21:08:17Z")

</div>

> [@jhsa](#):
>
> Any suggestions? Thanks

on my topic @paulgoux wrote:

try this release and drag the jar file to your sketch

[https://github.com/sojamo/controlp5/releases/download/v2.2.5/controlP5-2.2.5.zip](https://github.com/sojamo/controlp5/releases/download/v2.2.5/controlP5-2.2.5.zip)

i didn’t try it …try it your self might be solution

edit @jhsa i meant solution for touch conflict

[https://www.rubydoc.info/gems/skatolo/1.1.3/index](https://www.rubydoc.info/gems/skatolo/1.1.3/index)

[https://rubygems.org/gems/skatolo?locale=zh-CN](https://rubygems.org/gems/skatolo?locale=zh-CN)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 4, 2025, 9:37pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/9 "2025-02-04T21:37:51Z")

</div>

> [@jhsa](#):
>
> The problem is that I cannot find any info about this library online

Hello @jhsa ,

Does this help?

- [GitHub - sojamo/controlp5: A gui library for processing.org](https://github.com/sojamo/controlp5)
- [GitHub - natar-io/Skatolo: Skatolo a ControlP5 for for MultiTouch, Augmented Reality and JRubyArt](https://github.com/natar-io/Skatolo)

`:)`

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 4, 2025, 11:09pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/10 "2025-02-04T23:09:31Z")

</div>

@glv Thank you. Is the Controlp5 the normal library that we can install from within Processing?

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 4, 2025, 11:15pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/11 "2025-02-04T23:15:13Z")

</div>

Well, with the help from our friend Chat GPT, and after some fighting 😉 I think we found something that is working with the ControlP5 library.

```auto
import controlP5.*;

ControlP5 cp5;
DropdownList dropdown;
boolean dropdownOpen = false; // Track if it's open

// Set font for the dropdown button (caption label)
  PFont font = createFont("Arial", 20); // Create larger font

void setup() {
  fullScreen();
  
  cp5 = new ControlP5(this);

  // Create Dropdown List
  dropdown = cp5.addDropdownList("Select an option")
    .setPosition(width / 4, height / 4)
    .setSize(200, 500) // Width, Height
    .setBarHeight(100) // Button height
    .setItemHeight(100) // List item height
    .setFont(font) // Apply font to dropdown items
    .addItem("Option 1", 1)
    .addItem("Option 2", 2)
    .addItem("Option 3", 3);

  
  dropdown.getCaptionLabel().setFont(font); // Apply font to button text

  // Start with the dropdown closed
  dropdown.close();
}

void draw() {
  background(220);
}

void mousePressed() {
  // Check if the tap is inside the dropdown list area
  boolean clickedInsideDropdown = mouseX > dropdown.getPosition()[0] && 
                                  mouseX < dropdown.getPosition()[0] + dropdown.getWidth() &&
                                  mouseY > dropdown.getPosition()[1] && 
                                  mouseY < dropdown.getPosition()[1] + dropdown.getBarHeight();

  if (clickedInsideDropdown) {
    if (!dropdownOpen) {
      dropdown.open();
      dropdownOpen = true;
    } else {
      dropdown.close();
      dropdownOpen = false;
    }
  } else {
    dropdown.close();
    dropdownOpen = false;
  }
}

// Handle selection
void controlEvent(ControlEvent event) {
  if (event.isFrom(dropdown)) {
    int selected = (int) event.getValue();
    println("Selected: " + selected);
    dropdown.close(); 
    dropdownOpen = false;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 5, 2025, 12:25am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/12 "2025-02-05T00:25:15Z")

</div>

> [@jhsa](#):
>
> Is the Controlp5 the normal library that we can install from within Processing?

I believe so and the versions match.

The _ControlP5 2.2.6_ link in the Processing Contribution Manager for the library:

> **[processing GUI, controlP5](https://sojamo.de/libraries/controlP5/)**
>
> a GUI library for the programming environment processing, controlP5.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/9/89315bf4befcd0735be5cda7669117fc61cf041a.png)

These links are often overlooked!

`:)`

---

<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:** [February 5, 2025, 12:58am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/13 "2025-02-05T00:58:41Z")

</div>

I never see any console output for selections made and clicking on the window closes the menu; is that the way you want it to work?

---

<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 5, 2025, 1:56am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/14 "2025-02-05T01:56:25Z")

</div>

> [@jhsa](#):
>
> Well, with the help from our friend Chat GPT, and after some fighting 😉 I think we found something that is working with the ControlP5 library.

what about touch conflict?

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 5, 2025, 1:58am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/15 "2025-02-05T01:58:19Z")

</div>

Yes, just like when we hit the “File” button on processing for example, and select an option. The list will close.

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 5, 2025, 2:00am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/16 "2025-02-05T02:00:39Z")

</div>

> [@jafal](#):
>
> what about touch conflict?

Not sure what you mean, for now I have been trying to get this “List” thing to work the way I want it to. But I do remember you mentioning something about sliders?

---

<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 5, 2025, 2:09am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/17 "2025-02-05T02:09:17Z")

</div>

@jhsa  
That’s fine i thought that you are facing touch issue on Android with controlp5 upon @svan first reply. have nice time

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 5, 2025, 2:15am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/18 "2025-02-05T02:15:01Z")

</div>

> [@jafal](#):
>
> That’s fine i thought that you are facing touch issue on Android with controlp5 upon @svan first reply. have nice time

I will have to add sliders as well. Will let you know if I find strange behavior. Thank you for your help.

---

<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:** [February 5, 2025, 3:02am UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/19 "2025-02-05T03:02:38Z")

</div>

When I look at the cp5 example for DropdownList I see this:

 ![ddlist](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/f/1f95541a670b05aa48d74e0a362c53320dab5f33.png)

The cp5 code for ScrollableList functions like a dropdown list, won’t catch stray touches on the window, and appears to be more stable:

```auto
import controlP5.*;
import java.util.*;

ControlP5 cp5;
ScrollableList dropdown;
List mItems;

PFont font = createFont("Arial", 30); // Create larger font

void setup() {
  fullScreen();
  cp5 = new ControlP5(this);
  mItems = Arrays.asList("Option 1", "Option 2", "Option 3");
  /* add a ScrollableList, by default it behaves like a DropdownList */
  dropdown = cp5.addScrollableList("dropdown")
     .setPosition(width/4, height/4)
     .setSize(250, 400)
     .setBarHeight(100)
     .setItemHeight(100)
     .addItems(mItems)
     .setType(ScrollableList.DROPDOWN) // currently supported DROPDOWN and LIST
     ;
  dropdown.setFont(font);
}

void draw() {
  background(240);
}

void dropdown(int n) {
  /* request the selected item based on index n */
  cp5.get(ScrollableList.class, "dropdown").getItem(n);
  println("You selected ", n);
}

```

---

<div class="post-metadata">

**Author:** ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)\
**Post date:** [February 5, 2025, 8:02pm UTC](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700/20 "2025-02-05T20:02:38Z")

</div>

This code doesn’t work well on android. I need to touch multiple times for it to register the touch and do something.

[Next page](https://discourse.processing.org/t/dropdown-scrollable-list-needs-two-taps-to-open-or-select-an-item/45700.md?page=2)