Scrollthumb customize to a smaller icon

102 views
Skip to first unread message

ehc

unread,
Aug 26, 2015, 5:03:00 PM8/26/15
to CodenameOne Discussions
Hello,

I have customized my scroll thumb to be just an circle that moves up and down my scroll bar as i scroll. However I think that the circle is is at the "center" of what used to be the bar scroll thumb. 

So when I am at the top of my list, the circle is not at the top of the scrollbar. When I am at the bottom of the list, the circle is not at the bottom, as if there is spacing above and below my scrollthumb. Is there a way I can get the scroll thumb to scroll appropriately with just the circle image as the thumb?

Shai Almog

unread,
Aug 27, 2015, 12:40:51 AM8/27/15
to CodenameOne Discussions, ec...@abaltatech.com
Hi,
how did you do the customization?
Did you define ScrollThumb only, did you change any properties there?

The code assumes scroll thumb grows so a circle might be problematic.

Elaine Chao

unread,
Aug 27, 2015, 2:04:55 PM8/27/15
to Shai Almog, CodenameOne Discussions
Well I defined the scroll thumb to be this circle image. And I also defined the scroll itself to be a custom image that is basically just a white line. 

Elaine Chao

unread,
Aug 27, 2015, 3:12:42 PM8/27/15
to Shai Almog, CodenameOne Discussions
Also I am trying to add up and down arrows as scroll buttons. I was going to manually add them so that they appear basically on top of the list in the appropriate positions. However when I press the list, those buttons disappear. Am I missing something?

On Wed, Aug 26, 2015 at 9:40 PM, Shai Almog <shai....@gmail.com> wrote:

Shai Almog

unread,
Aug 28, 2015, 12:54:32 AM8/28/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
Making the scroll behave like a desktop scroll would probably be pretty hard since it was designed for mobile scrollbars that don't interact and grow to represent size.

I would just create a custom component and add it to the right side of the actual component and use it to scroll the "real" component. I'd make the scroll in the real component hidden.

Elaine Chao

unread,
Aug 28, 2015, 1:23:04 PM8/28/15
to Shai Almog, CodenameOne Discussions
Okay thanks. I am doing that now and it seems to be working alright. However I do have a question about the scroll thumb now. What would be the best way to implement that scroll effect from this new scroll thumb?

Elaine Chao

unread,
Aug 28, 2015, 1:26:07 PM8/28/15
to Shai Almog, CodenameOne Discussions
Right now I am just calling a repaint on the scroll thumb by setting its y coordinate as I scroll up and down, but it is repainting and leaving the original image there. It is also not too smooth

Shai Almog

unread,
Aug 29, 2015, 1:25:48 AM8/29/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
Its unclear to me which component isn't getting repainted, the scroll bar or the scrolled component.
To implement scrolling just make the scroll bar component focusable and override the pointerDragged/pressed/released events to allow a user to drag the scrollbar.

Shai Almog

unread,
Aug 29, 2015, 1:28:13 AM8/29/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
Silly of me not to think about it.... You can use the Slider component and set it to vertical. It already supports dragging so you can just place it next to the scrollable container and use a DataChangeListener on it to allow scrolling.
It supports a round scroll thumb and it should be trivial to do.

Elaine Chao

unread,
Aug 31, 2015, 12:39:51 PM8/31/15
to Shai Almog, CodenameOne Discussions
Okay I am trying out the slider, but I'm having some trouble. I set my scroll thumb image to be the ThumbImage of the slider. However this icon remains at the bottom of the slider, no matter what I change the progress to. 

My original setup of having the scoll bar and scroll thumb with two buttons seems okay. I am just having trouble repainting the scroll thumb. The code is as follows when I click one of the scolling arrows:

             findScrollThumb(c).setY(SCROLL_THUMB_Y + m_scrollFactor); // set the new scroll thumb y so move down
             findScrollThumb(c).repaint();
             m_scrollFactor += 50;

The new scroll thumb repaints, but the old scroll thumb remains there as well. What is the best and smoothest way to simulate this scrolling?

Shai Almog

unread,
Aug 31, 2015, 11:44:25 PM8/31/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
This seemed interesting so I tried this myself and got it to work:
private Container makeScrollable(final Component scrollable, Image thumb) {
    scrollable
.setScrollVisible(false);
   
final Slider scroll = new Slider();
    scroll
.setThumbImage(thumb);
   
Container sc = new Container(new BorderLayout());
    sc
.addComponent(BorderLayout.CENTER, scrollable);
    sc
.addComponent(BorderLayout.EAST, scroll);
    scroll
.setVertical(true);
    scroll
.setMinValue(0);
    scroll
.setEditable(true);
    scroll
.setMaxValue(scrollable.getScrollDimension().getHeight());
    scroll
.setProgress(scroll.getMaxValue());
   
final boolean[] lock = new boolean[1];
    scroll
.addDataChangedListener(new DataChangedListener() {
       
public void dataChanged(int type, int index) {
           
if(!lock[0]) {
               
lock[0] = true;
                scrollable
.scrollRectToVisible(0, scroll.getMaxValue() - index, 5, scrollable.getHeight(), scrollable);
               
lock[0] = false;
           
}
       
}
   
});
    scrollable
.addScrollListener(new ScrollListener() {
       
public void scrollChanged(int scrollX, int scrollY, int oldscrollX, int oldscrollY) {
           
if(!lock[0]) {
               
lock[0] = true;
                scroll
.setProgress(scroll.getMaxValue() - scrollY);
               
lock[0] = false;
           
}
       
}
   
});        
   
return sc;
}

Actually works rather nicely... The main issue was that the slider is reversed (values increase as it goes up) which makes sense for our original use case: a media player volume control. I just inverted the values, added a lock so when scroll happens it won't recurse/visa versa and it "just works".

Elaine Chao

unread,
Sep 1, 2015, 12:30:31 PM9/1/15
to Shai Almog, CodenameOne Discussions
Ah okay thanks so much. I am currently testing it out now. However I am having an issue compiling, and I remember coming across this problem before. It says that the compiler can't find the method addScrollListener for the component class. However when I test out other methods like adddragoverlistener it works fine. I am wondering if I have an outdated version of the codenameone jar maybe? how can I check this?

Shai Almog

unread,
Sep 1, 2015, 11:12:13 PM9/1/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
Right click the project and in the Codename One section select "Update Client Libs" it will fetch the latest version of the library for this project.

Elaine Chao

unread,
Sep 2, 2015, 12:17:09 PM9/2/15
to Shai Almog, CodenameOne Discussions
I don't see an option to update client libs. I'm working in eclipse so maybe that's why. I tried doing a refresh libs but it doesn't seem to be working since I have a custom build.xml. However I created a new codenameone project and tried to just copy the CodenameOne.jar file from there to my project. I can see in the CodenameOne_SRC.zip file that the addScrollListener method is in the Component class, but I am still getting a compile error using the CodenameOne.jar file. Is there another way I can obtain the most recent jar file?

Elaine Chao

unread,
Sep 2, 2015, 1:38:56 PM9/2/15
to Shai Almog, CodenameOne Discussions
Nvm fixed it eclipse was still referencing an old version of the jar file from somewhere else. Thanks for all your help Shai

Elaine Chao

unread,
Sep 2, 2015, 5:00:22 PM9/2/15
to Shai Almog, CodenameOne Discussions
Just another question about this..is the Scroll Thumb supposed to be located at the current progress of the bar? Right now I can see the slider full bar changes but the scroll thumb remains at the bottom, even when I set the progress to be the maximum value (height of the list). So basically the thumbimage is not moving. 

Shai Almog

unread,
Sep 2, 2015, 11:34:47 PM9/2/15
to CodenameOne Discussions, shai....@gmail.com, ec...@abaltatech.com
Its inverted. For me it scrolls property top to bottom but notice that I did max - location in the code since slider goes min == bottom and max == top unlike a scrollbar...

Elaine Chao

unread,
Sep 3, 2015, 4:45:29 PM9/3/15
to Shai Almog, CodenameOne Discussions
Okay I see got it to work. Thanks for all your help!
Reply all
Reply to author
Forward
0 new messages