Highlighting a panel in scrollview on click

barx

Well-Known Member
Licensed User
Longtime User
Hey guys

I'm creating a sort of preference screen as the PreferenceActivity Lib doesn't do what i need.

To create it I use a scrollview and panel containing required views for that item (e.g. 2 labels and a checkbox for a checkbox item). Got these adding nicely. Now, when an item is clicked / tapped, i want it to highlight to the touch like a listview does, I use the following code and it seems to work nice on a emulator running 2.2 froyo, but when run on a real device the color flashes for a brief second and then returns to black. Any ideas why this happens and how to get it working correctly. It's almost as though the _touch event needs 'de-bouncing'? android version tried on real device are 2.3.3. I very nearly put 2.1 as well but just remembered i flashed the backside off my x10 mini pro and put 2.3.3 on it :eek:

B4X:
Sub Panel_Touch (Action As Int, X As Float, Y As Float) As Boolean
   Dim p As Panel
   p = Sender
   
   If Action = Activity.ACTION_DOWN Then
      p.Background = StockDrawable.GetAndroidDrawable("list_selector_background_pressed")
   Else
      p.Color = Colors.Black
   End If
   Return True
End Sub

Thanks
 

stevel05

Expert
Licensed User
Longtime User
It's probably just down to the speed (or lack of) on the emulator. The best way to ensure consistency would be to use a timer to reset the background.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
The behaviour you describle looks normal to me, you change the color when ACTION_DOWN = True but as soon as you move the finger you set back the 'standard' background.
But to give you a concrete answer you need to give some more information.
Are the Labels and the CheckBox for each entry on a Panel ?
What happens if you click on a Label or on a CheckBox ?
For me you shouldn't use the Panel_Touch event but either the Click events of the Labels or the Click event of the Panel.
Are the Label and CheckBox backgrounds transparent ?
etc.

The BEST would be to post your project as zip file or at least a smaller project showing the problem so we could test it in the same conditions as you do.

Best regards.
 
Upvote 0

barx

Well-Known Member
Licensed User
Longtime User
Ok, thanks for the quick responses. Klaus wouldn't the click event only trigger one way, i.e it wouldn't return to black when you lift your finger?

Anyways, .zip attached, it's nothing special, more of a mock up to see if I could produce the prefs screen.

I changed the Action line to

B4X:
If Action <> Activity.ACTION_UP Then

and it is very nearly there now, only issue now is if you tap and then drag, it doesn't return black when lifting finger up. If you tap and then release without dragging the the desired effect is produced ;)
 

Attachments

  • PrefScreen.zip
    8.6 KB · Views: 277
Upvote 0

NJDude

Expert
Licensed User
Longtime User
Assuming you tap on the panel only, the attached sample might do what you need, or give you an idea.

I'm using a timer to delay the color resetting.
 

Attachments

  • DelaySample.zip
    6.7 KB · Views: 307
Upvote 0

barx

Well-Known Member
Licensed User
Longtime User
Cheers for the sample NJDude but unfortunately it doesn't give the required effect. I want to tap and the panel changes color while the finger is on the screen and not change back until the finger is lifted. Would have thought it would be an easy task, but as usual with everything i try.....
 
Upvote 0

thedesolatesoul

Expert
Licensed User
Longtime User
Hi Barx,
I know the effect you want is similar to what a listview has.
The 'highlight' is removed when either:
a. The touch is removed
b. The listview is scrolled a certain amount

The correct solution is to create and stored a deltaX and deltaY, and when the drag is greater than a threshold (for e.g. 5 pixels) then remove the highlight.

To give you an idea:
B4X:
Sub Panel_Touch (Action As Int, X As Float, Y As Float) As Boolean
    Dim p As Panel
    p = Sender
    
    If Action = Activity.ACTION_DOWN Then
        state = HIGHLIGHTED
    Else if state = HIGHLIGHTED and Action = Activity.ACTION_MOVE then
        deltaX = abs(X - LastX)
        deltaY = abs(Y - LastY)
  
        'On a larger drag remove the highlight
        if deltaX > 5dip or deltaY > 5dip then    
           state = UNHIGHLIGHTED
        end if
    Else if Action = Activity.ACTION_UP then
        state = UNHIGHLIGHTED
    End If

    if state = HIGHLIGHTED then
        p.Color = Colors.White
    else
        p.Color = Colors.Black
    end if
     LastX = X
     LastY = Y
    Return True
End Sub
 
Upvote 0

barx

Well-Known Member
Licensed User
Longtime User
OK, sorry for the sudden quietness last night. Computer decided it was going to connect to any devices last night so turned off and went bed.

@NJDude - You example works fine..........................until used on a panel that is held in a scrollview. It then becomes same as my best effort which is if you scroll the scollview whilst an item is highlighted then the highlight sticks. I'm assuming its to do with the scrollview consuming the touch event or effecting the panels touch event. When i log the touches, after a MOVE, no UP is registered. Any ideas dude?

@tds - I see what you are doing in the code, and think i will try to implement it to test. It doesn't look as though it would work as is. There is no LastX and LastY for example. Also, without sounding cynical, you should be looking at this issue too as your Clo*****es app suffers the same fate.

Going to keep at it once I get in from work.

Thanks again
 
Upvote 0

thedesolatesoul

Expert
Licensed User
Longtime User
@tds - I see what you are doing in the code, and think i will try to implement it to test. It doesn't look as though it would work as is. There is no LastX and LastY for example. Also, without sounding cynical, you should be looking at this issue too as your Clo*****es app suffers the same fate.

Thanks again
I know, but this is fairly low on my priority list since it doesnt look too bad.
I havent tested anything yet, but when the scrollview starts scrolling I think it takes all the events. I *may* get some time today to look at it.
Clo*****es = ClogPuppies
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
Sorry, in my previous post I misunderstoud your question.
The attached version should do what you expect.
You are right the Touch UP event is consumed by the ScrollView .
So I added a Timer that sets the background to black, the Timer is fired by the ScrollView position change.

Best regards.
 

Attachments

  • PrefScreen1.zip
    8.7 KB · Views: 351
Upvote 0

barx

Well-Known Member
Licensed User
Longtime User
I know, but this is fairly low on my priority list since it doesnt look too bad.
I havent tested anything yet, but when the scrollview starts scrolling I think it takes all the events. I *may* get some time today to look at it.
Clo*****es = ClogPuppies

Didn't know if the name was public yet and didn't want to give the game away ;)
 
Upvote 0

barx

Well-Known Member
Licensed User
Longtime User
Sorry, in my previous post I misunderstoud your question.
The attached version should do what you expect.
You are right the Touch UP event is consumed by the ScrollView .
So I added a Timer that sets the background to black, the Timer is fired by the ScrollView position change.

Best regards.

Appears to work nice klaus, thanks for your input ;)
 
Upvote 0
Top