Android Question Why does View flicker when made visible

[Tim Green]

I need to cause a graphic of a “pushed” button to appear as an overlay on a “released” button graphic.

The normal Button view almost works for me, using the StatelistDrawable property and setting the Enabled Drawable bitmap to an all-transparent graphic image, and setting the Pressed Drawable to the “pushed” graphic image. This works fine with the “pushed” image appearing when the button is touched. There is no visible flicker.

But the button images I have are closely spaced and in complex shapes and attempting to tile the images into rectangular buttons would result in (greatly) overlapped buttons. So my alternative plan was to display the “pushed” image using a larger view as a container for the image and use a smaller transparent button view on top of the graphic image as the touchable area. When the transparent button is pushed (down event) the view containing the image is made visible. And when the transparent button is released (up event) the view containing the image is made invisible. This also works fine, except for a “flicker”.

When I change a view from invisible to visible (.Visible=True) the graphic becomes visible but seems to briefly “flicker” like the image is being drawn, erased, and the drawn again. I would guess that this occurs in about a quarter second. This does not sound like a big deal, but it is actually quite distracting.

I have tried using various types of views as the container for the graphic: Button, ImageView, Label, Panel. They all exhibit the “flicker”.

I have tried using DoEvents to cause the graphic to update after being set to visible.

I tried adding logical flags to prevent multiple down events, if that was the issue.

I boiled the issue down to a very simple example using two button views. The buttons use the normal defaults set by the VisualDesigner, including DefaultDrawable. In the Down event for the first button the second button is set to Visible=True. In the Up event for the first button the second button is set to Visible=False.

The image of the second button appears and flickers when it is set to Visible=True.

The target is a Nexus 10 tablet with Android 5.1

I have spent several hours searching for a solution in the forums and I apologize if this issue is already known or solved. Any assistance will be appreciated even if only to point me in the right direction.

Thanks.

Sub Process_Globals
End Sub

Sub Globals
Private Test_Button As Button
Private Visible_Invisible As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Test")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub Test_Button_Down()
Visible_Invisible.Visible = True
' Visible_Invisible becomes visible but briefly flickers
End Sub

Sub Test_Button_Up()
Visible_Invisible.Visible = False
End Sub

 

[RandomCoder]

Unfortunately we can't test your sample code because we don't have the "Test" layout file or any of the image files that I guess will be included for the states. It is better when providing an example to upload the project using the menu option File>Export As Zip>Include Shared Modules.

Also whenever posting code snippets please use code tags [ CODE] insert code here..[ /CODE] (remove the space after opening bracket) to display code like this...

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Test")
End Sub

Fortunately you have described the problem well and I think that I understand the problem. Now I wonder do you really need the Buttons? If you are using ImageViews then can you instead apply the StateListDrawable to it and use its touch events. Failing that I propose to place one large transparent Panel over the whole area and consume Touch events on the Panel, no need to alter its visible property! It will be possible to work out where on the Panel the user touched and then active the corresponding image for that position.

 

[Tim Green]

Thanks for the very rapid answer!
I had zipped the project (using a Windows zip utility) and tried to upload it but for some reason that zip file was not allowed. Thanks for letting me know the correct way to do this. The Test code is now uploaded.
Based on my prior VB experience, the "flicker" whenever changing some view to the Visible state is certain to be a issue for me unless I find a workaround.
Placing a large transparent panel over the entire area and then handling the Touch location separately from the graphics is a good idea.
But how best to then cause a "pressed" graphic to be displayed, other than setting the view containing the graphic to Visible (and back to the flicker issue)?
The graphic could be brought to the front (z-order) but transparent panel needs to remain the top view.

 

[Tim Green]

I have a better understanding of why I see a flicker when making a view visible when a button is touched (at button down event).

The issue seems to be due to some interaction between updating the button view which is touched, and updating the view which is being made visible.

I found that if a brief delay (using a timer) is added between the button down event and when the view is made visible, that the flicker can be eliminated.

I’ve uploaded a project with three simple test cases. Test case 1 shows the original flicker problem. Test case 2 proves that simply making a view visible does not cause any flicker. Test case 3 uses a timer to delay between the button down event and when the view is made visible.

I am satisfied that I can work around this issue. But I am curious about how common this is. I have tested on only one type of tablet and one version of Android.

 

[RandomCoder]

The problem is not to do with the views but rather the event handling of the Buttons. In your sample project Test123.zip I also see the flicker occasionally even with the delay present using test case 3. The problem has been discussed before here Button down and button up event handlers execute while user keeps finger on a button.
The recommendation from Erel was to use Panels instead, however a couple of posts further down is another solution although I have not tried it myself.

PS. Thanks for posting the sample it was very useful in being able to provide reliable advice.