Android Question Change button colors

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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
 

BlueVision

Active Member
Licensed User
Longtime User
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.
 
Upvote 0

ilan

Expert
Licensed User
Longtime User
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!


 
Last edited:
Upvote 0

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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...
 
Upvote 0

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0

Zeev Goldstein

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
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.
 

Attachments

  • ButtonColor.zip
    9.2 KB · Views: 56
Upvote 0
Top