Android Question ImageSlider is initially empty

[Martin Larsen]

I am working with ImageSlider. It shows up initially empty but the dot indicator indicates the first image. I can call ImageSlider1.NextImage but then it actually shows image #2.

How can I make it start showing the first image?

It's the same with Erel's official demo. If you out comment the btnNext_Click in UpdateState, the slider shows up empty. And with the btnNext_Click, it shows image #2.

Often it really doesn't matter where you start in the carousel, but in my case I need to start with the first image.

Of cource I could call NextImage + PrevImage but that is a workaround. I am sure it must be possible to make the first image show up.

 

[Erel]

I cannot currently debug it. Try to set CurrentIndex to -1 and call NextImage.

 

[Martin Larsen]

Thanks, that works. It's still a workaround, but better than the other option.

I have some other issues with image slider of which I have solved two of them:

1)
I need to update a label showing the image title. The title comes from a JSON structure together with the image source and a target url. Updating the label in the GetImage handler does not work because of caching.

I have solved it by creating a new handler, OnShow. In the end of ShowImage I have added:

CallSub2(mCallBack, mEventName & "_OnShow", CurrentIndex)

And the handler is then:

Sub ImageSlider1_OnShow (Index As Int)
    Dim image As Map
    image = Starter.imageList.Get(Index)
    lblSlider.Text = image.get("title")
End Sub

May I propose that you update the library with such a handler as I think it could be useful for many developers?

2)
My next issue is that I would like a click handler for the current image. So if you press it, some action will happen such as opening an url in my case.

I found a solution here (please note that there is a typo in your post, a missing double quote)

Again, wouldn't it be a good idea to add this handler to the library? I have spent a couple of hours trying different solutions until I stumpled upon this post. It would be nice if this worked "out of the box" so to speak. And for developers who don't need, it doesn't do any harm.

Edit: This version is probably better because you get the index

3)
Lastly, I would like the slider to have rounded corners. If I add a corner radius, it shows up initially, but as soon as the first image is loaded, the rounded corners are gone. Then I though I was smart and added a background panel and gave that rounded corners. But alas, again as soon as the image shows up, the rounded corners disappear.

I can't figure out why, so how do I add permanent rounded corners to the image slider?

 

[Erel]

You will need to create images with round corners: https://www.b4x.com/android/forum/t...gle-image-with-rounded-corners.86285/#content

 

[Martin Larsen]

You will need to create images with round corners: https://www.b4x.com/android/forum/t...gle-image-with-rounded-corners.86285/#content

Hmmm, ok. I find it strange that the content of a panel can change the panels look. Maybe because I am used to html/css.

What about the two event handlers? Would you consider adding the to the library? They are very useful and does not interfere if the developer don't need them. I am fine for now, but no reason for other devs to spent a couple of hours finding a solution to a common problem.

 

[Erel]

Might be added. You could also solve it in other ways, for example make GetImage event return an ImageSliderImage object and add the text to this type.

ImageSlider will never be a closed library like most other libraries as each developer will want to customize it based on their specific requirements.
Overall the code is simple enough so it shouldn't be too difficult to make changes.

 

[Martin Larsen]

I found that GetImage was not called every time because of caching. So the image titles came out of sync with the images. But you mean returning a custom type with a text and bitmap?

 

[Erel]

Yes. Though your solution is also fine.

 

[Martin Larsen]

You will need to create images with round corners: https://www.b4x.com/android/forum/t...gle-image-with-rounded-corners.86285/#content

That works partly. One thing is that the corners of the slider itself is not rounded when the images are sliding. But that is admittedly a minor issue.

Worse is that I have some overlayed semi-transparent labels which don't get rounded:

But I found another way which is surprisingly simple. I simply add an overlaying transparent PNG with only the corners filled. These corners have the same color as the background:

I initially didn't think this would work because I thought that the ImageView would steal the touch events. But it doesn't.

This is the overlay:

It is actually not easy to create the overlay because to get it perfect, it must have the same dimension as the physical size of the ImageSlider. If you look carefully at pic #2, I need to adjust it a bit more.

So now my question:

Is it possible to modify CreateRoundRectBitmap so that it creates the overlay in code? That would be really awesome, and I would appreciate if you could lead me in the right direction.

 

[Erel]

Start a new thread (not related to ImageSlider) and I'll show you how to do it.