Android Question Change button colors

Zeev Goldstein · Jan 15, 2023

Hi
I'm using a simple button. When pressed on the click action I'd like to change its color for a second, set it back to the original and only then execute the rest of click actions.
This is to give look & feel of the click.
Is there is simple way to do that?
I manage to change the color but it doesn't wait so the user can see the color change and back...

Anyone?

Thanks

Zeev Goldstein · Jan 16, 2023

Folks - PROBLEM SOLVED!
i just used resumable sub on the sub that changes the color and it is all works like charm
thank you for your good will and ideas

Mahares · Jan 15, 2023

Zeev Goldstein said:
I manage to change the color but it doesn't wait so the user can see the color change and back.

Did you give SwiftButton a try: It has- ButtonUp and ButtonDown events. You need to tick XUI Views lib

BlueVision · Jan 15, 2023

Simple solution:
Start a timer when the button get's a click and change the colour. The remaining actions for the button_click event transfer to the timer event. When the timer raises, reset first the buttons colour and execute then the code for the button_click.

klaus · Jan 15, 2023

I would insert a Sleep(1000) after the first color change.

ilan · Jan 15, 2023

there are many ways to do that. if you would use a panel and add a label to it you can use the TOUCH event to get the results you are asking.
but there are many other ways to do that.

here is an example using panel and touch event:

B4X:

#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private xui As XUI
    Private btn(12),lbl(12) As B4XView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
    createButtonsAndLabels
End Sub

Private Sub createButtonsAndLabels
    Dim width=100, height=50 As Float
    Dim startX=50, startY=50,x=0, y=0,space=20 As Float
    Dim rows As Int = 3
    Dim col As Int = btn.Length/rows
    For i = 0 To btn.Length-1
        x = (width*(i Mod col))+(space*(i Mod col))+startX
        y = Floor(i/col)*(height+space)+startY
        btn(i) = xui.CreatePanel("btn")
        btn(i).SetColorAndBorder(xui.Color_White,1,xui.Color_ARGB(255,91,91,91),5)
        lbl(i) = createLabel("")
        lbl(i).Text = $"Button${i+1}"$
        lbl(i).SetTextAlignment("CENTER","CENTER")
        btn(i).AddView(lbl(i),0,0,width,height)
        MainForm.RootPane.AddNode(btn(i),x,y,width,height) '<- Change according to B4X IDE (b4a -> Activity.Addview(....))
    Next
End Sub

Private Sub createLabel(Event As String) As B4XView
    Dim newlbl As Label
    newlbl.Initialize(Event)
    Return newlbl
End Sub

Private Sub btn_Touch (Action As Int, X As Float, Y As Float)
    Dim senderBtn As B4XView = Sender
    Select Action
        Case 0 'down
            senderBtn.Color=xui.Color_ARGB(255,Rnd(0,256),Rnd(0,256),Rnd(0,256))
        Case 1 'up
            Sleep(200)
            senderBtn.Color=xui.Color_White
        Case 2 'move
            'do nothing     
    End Select
End Sub

it is b4j but xui language so 99% will work with b4a/b4i
the advantage using this method is that the color will stay as long as the user touches the button. only after releasing it will change back to the original color. this is different than the button click behavior!

Zeev Goldstein · Jan 15, 2023

Mahares said:
Did you give SwiftButton a try: It has- ButtonUp and ButtonDown events. You need to tick XUI Views lib

Thanks, I didn't, it's an old app so i can't go change it all.

Zeev Goldstein · Jan 15, 2023

BlueVision said:
Simple solution:
Start a timer when the button get's a click and change the colour. The remaining actions for the button_click event transfer to the timer event. When the timer raises, reset first the buttons colour and execute then the code for the button_click.

Thanks, that looks interesting, I'll try it

Zeev Goldstein · Jan 15, 2023

klaus said:
I would insert a Sleep(1000) after the first color change.

Tried this, doesn't work as it won't wait for the second change back

klaus · Jan 15, 2023

You need to explain more in detail what exactly you want to achieve.
Without seeing your code it is impossible to give a concrete advice.

Zeev Goldstein · Jan 15, 2023

ilan said:

there are many ways to do that. if you would use a panel and add a label to it you can use the TOUCH event to get the results you are asking.
but there are many other ways to do that.

here is an example using panel and touch event:

B4X:

#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private xui As XUI
    Private btn(12),lbl(12) As B4XView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
    createButtonsAndLabels
End Sub

Private Sub createButtonsAndLabels
    Dim width=100, height=50 As Float
    Dim startX=50, startY=50,x=0, y=0,space=20 As Float
    Dim rows As Int = 3
    Dim col As Int = btn.Length/rows
    For i = 0 To btn.Length-1
        x = (width*(i Mod col))+(space*(i Mod col))+startX
        y = Floor(i/col)*(height+space)+startY
        btn(i) = xui.CreatePanel("btn")
        btn(i).SetColorAndBorder(xui.Color_White,1,xui.Color_ARGB(255,91,91,91),5)
        lbl(i) = createLabel("")
        lbl(i).Text = $"Button${i+1}"$
        lbl(i).SetTextAlignment("CENTER","CENTER")
        btn(i).AddView(lbl(i),0,0,width,height)
        MainForm.RootPane.AddNode(btn(i),x,y,width,height) '<- Change according to B4X IDE (b4a -> Activity.Addview(....))
    Next
End Sub

Private Sub createLabel(Event As String) As B4XView
    Dim newlbl As Label
    newlbl.Initialize(Event)
    Return newlbl
End Sub

Private Sub btn_Touch (Action As Int, X As Float, Y As Float)
    Dim senderBtn As B4XView = Sender
    Select Action
        Case 0 'down
            senderBtn.Color=xui.Color_ARGB(255,Rnd(0,256),Rnd(0,256),Rnd(0,256))
        Case 1 'up
            Sleep(200)
            senderBtn.Color=xui.Color_White
        Case 2 'move
            'do nothing    
    End Select
End Sub

it is b4j but xui language so 99% will work with b4a/b4i
the advantage using this method is that the color will stay as long as the user touches the button. only after releasing it will change back to the original color. this is different than the button click behavior!

thanks, it is an old app that uses simple b4a buttons, i can't go change it all now so i want to revive the look and feel by adding this activity
i am using panels and buttons

Zeev Goldstein · Jan 15, 2023

klaus said:
You need to explain more in detail what exactly you want to achieve.
Without seeing your code it is impossible to give a concrete advice.

i have a button, simple b4a button.
when the user clicks it i want to change the colors, wait a second, change back the colors and only then continue with the click actions.
i manage to change the color
but it goes immediatelly to the actions without even wait so the color change does not take effects
with sleep in the middle it did not work as it did not wait
so maybe the timer solution proposed above will work

or any other interesting solution...

klaus · Jan 15, 2023

Can you post your code ?

Zeev Goldstein · Jan 15, 2023

klaus said:
Can you post your code ?

here's the relevant part - that click sub and the sub to change the colors

Private Sub btn_DoTransaction_Click

ShowButtonPressed(btn_DoTransaction)

HideAllPages
ShowTransactionPage

End Sub

Sub ShowButtonPressed(btn As Button)

Return

Dim tColorClick As Int = White
Dim bColorClick As Int = Black
Dim tColorRelease As Int = Black
Dim bColorRelease As Int = White
Dim cdClick As ColorDrawable
Dim cdRelease As ColorDrawable
Dim i As Int

cdClick.initialize2(bColorClick,50,3,tColorClick)
cdRelease.Initialize2(bColorRelease,50,3,tColorRelease)

Try

btn.color = bColorClick
btn.TextColor = tColorClick
btn.Background = cdClick

Sleep(1000)

btn.color = bColorRelease
btn.TextColor = tColorRelease
btn.Background = cdRelease

Sleep(1000)

Catch

End Try

End Sub

teddybear · Jan 15, 2023

Zeev Goldstein said:
Sub ShowButtonPressed(btn As Button)

Return

...

End Sub

Your sub does return directly not go to sleep(1000)

klaus · Jan 15, 2023

In your routine you have a Return at the beginning of Sub ShowButtonPressed(btn As Button).
This means the the rest of the code is not executed.
teddybear was fater.

Zeev Goldstein · Jan 15, 2023

teddybear said:
Your sub does return directly not go to sleep(1000)

right - why??

Zeev Goldstein · Jan 15, 2023

klaus said:
In your routine you have a Return at the beginning of Sub ShowButtonPressed(btn As Button).
This means the the rest of the code is not executed.
teddybear was fater.

yes i added it to ignore the sub as it didn't work, i forgot to remove it before uploading here

teddybear · Jan 15, 2023

Zeev Goldstein said:
right - why??

I quoted your code

Zeev Goldstein · Jan 15, 2023

teddybear said:
Your sub does return directly not go to sleep(1000)

yeh, ignore the return as i added it to ignore the sub as it did not work and forgot to remove it before uploading here

klaus · Jan 15, 2023

I made a small test project and this code works:

B4X:

Private Sub btn_DoTransaction_Click

    Log("Wait")
    btn_DoTransaction.Background = cdClick
    btn_DoTransaction.TextColor = tColorClick

    Sleep(1000)
    
    btn_DoTransaction.Background = cdRelease
    btn_DoTransaction.TextColor = tColorRelease
    
    Log("Done")
'    HideAllPages
'    ShowTransactionPage

End Sub

Be aware that if the user clicks on the button before the second is passed the code will be executed once more.
The logs are just there to see that the program holds for 1 second.

Android Question Change button colors

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency