How to create gradiant button then transparent button?

B

BarrySumpter

Active Member
Licensed User
Longtime User
I'd like to memic the button on the attached graphic.

Whats the secret to setting up a gradiant button thru code?
Then setting up a gradiant button with transparancy?

I've got the gradiant transparent panel working.
But the same doesn't work for the button.

tia

B4X: 
Sub Process_Globals
End Sub

Sub Globals
    Dim MapView1 As MapView
    
    Dim SeekBar1 As SeekBar
    Dim Panel1 As Panel
  Dim Label1 As Label
  Dim Label2 As Label
  Dim btnEdit As Button
  Dim btnList As Button
    
    
    
        Dim gd1 As GradientDrawable
        Dim gd2 As GradientDrawable
             Dim cols1(2) As Int 
             Dim cols2(2) As Int 

    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    
    If File.ExternalWritable=False Then
        '    OSMDroid requires the use of external storage to cache tiles
        '    if no external storage is available then the MapView will display no tiles
        Log("WARNING NO EXTERNAL STORAGE AVAILABLE")
    End If
        
    Activity.LoadLayout("main")
    

    '    no EventName is required as we don't need to listen for MapView events
    MapView1.Initialize("")
    Activity.AddView(MapView1, 0, 0, 100%x, 80%y)
    
    '    by default the map will zoom in on a double tap and also be draggable - no other user interface features are enabled
    
    '    enable the built in zoom controller - the map can now be zoomed in and out
    MapView1.SetZoomEnabled(True)
    
    '    enable the built in multi touch controller - the map can now be 'pinch zoomed'
    MapView1.SetMultiTouchEnabled(True)
    
    '    set the zoom level BEFORE the center (otherwise unpredictable map center may be set)
    MapView1.Zoom=14
    MapView1.SetCenter(-37.85091702146988, 145.05743605518342)

  
            'cols1(1) = Colors.Gray
'        Gray A = 255
'        Gray R = 136
'        Gray G = 136
'        Gray B = 136
    
        'cols1(1) = Colors.Black

        cols1(0) = Colors.argb ( 200, 136, 136, 136)
        cols1(1) = Colors.argb ( 200, 0, 0, 0)
        
        gd1.Initialize("TOP_BOTTOM",cols1)
        gd1.CornerRadius=5

    
    
    
    
    
    
    
    Panel1.Initialize("Panel1")
  Activity.AddView(Panel1, 10dip, 50%y, 300dip, 35dip)

    Dim TimeNewRomanBold As Typeface
    TimeNewRomanBold = Typeface.LoadFromAssets("Times.ttf")
    TimeNewRomanBold = Typeface.CreateNew(TimeNewRomanBold, Typeface.STYLE_BOLD)

    btnList.Initialize("btnList")
    Panel1.AddView(btnList, 1dip, 2dip, 60dip, 35dip)
    btnList.Text = "List"
    
    btnEdit.Initialize("btnEdit")
    btnEdit.Text = "Edit"
    Panel1.AddView(btnEdit,  240dip, 2dip,  60dip, 35dip)
    'btnEdit.Color = Colors.ARGB ( 50, 0, 0, 0)
    
    
    
    
        Panel1.Background=gd1

        
        
        Label1.Initialize("Lable1")
        Label1.textsize = Label1.TextSize -3
        'Label1.Typeface = TimeNewRomanBold
        Label1.Text = "Selected address:"
        Label1.Gravity = Gravity.CENTER
        Label1.TextColor = Colors.argb ( 255, 255, 255, 255)

        Activity.AddView(Label1, Panel1.Left, Panel1.top,  Panel1.Width, Panel1.Height - 30)
        
        Label2.Initialize("Lable2")
        Label2.textsize = Label2.TextSize + 5
        'Label2.Typeface = TimeNewRomanBold
        Label2.Text = "55a Iris Rd"
        Label2.Gravity = Gravity.CENTER
        Label2.TextColor = Colors.argb ( 255, 255, 255, 255)

        Activity.AddView(Label2, Panel1.Left, Panel1.top + 15,  Panel1.Width, Panel1.Height - 15)

        btnList.Color = Colors.Transparent
        btnList.TextColor = Colors.White
        
        btnEdit.Color = Colors.Transparent
        btnEdit.TextColor = Colors.White
        
        
        cols2(0) = Colors.argb ( 255, 136, 136, 136)
        cols2(1) = Colors.argb ( 255, 0, 0, 0)
        
        gd2.Initialize("TOP_BOTTOM",cols1)
        gd2.CornerRadius=5

        'btnEdit.Color = gd2   'Errors on execution
        
        
'  Dim argb() As Int
'  
'    argb = GetARGB(Colors.White)
'  
'    Log("White A = " & argb(0))
'  Log("White R = " & argb(1))
'  Log("White G = " & argb(2))
'  Log("White B = " & argb(3))

    'SetNinePatchDrawable(Panel1, "Panel1")

End Sub
Sub SeekBar1_ValueChanged (Value As Int, UserChanged As Boolean)
    
    
    btnList.Color = Colors.ARGB ( Value, 0, 0, 0)

  Log("Panel1.opacity: " & Value)

End Sub


Sub GetARGB(Color As Int) As Int()
    Dim res(4) As Int
    res(0) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff000000), 24)
    res(1) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff0000), 16)
    res(2) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff00), 8)
    res(3) = Bit.And(Color, 0xff)
    Return res
End Sub
Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub
 

Attachments

  • Transparent Gradiant Panel.png
    Transparent Gradiant Panel.png
    6.4 KB · Views: 452
Last edited:
Sort by date Sort by votes
B

BarrySumpter

Active Member
Licensed User
Longtime User
Well that was embarassing finding this in the users guide.

Example code for a Button with a GradientDrawable :
B4X: 
'Activity module
Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
Dim btnGradient As Button

End Sub

Sub Activity_Create(FirstTime As Boolean)

    btnGradient.Initialize("btnGradient")
    Activity.AddView(btnGradient, 20dip, 180dip, 100dip, 60dip)
    btnGradient.Text = "Gradient"
    
    ' Define two gradient colors for Enabled state
    Dim colsEnabled(2) As Int

    colsEnabled(0) = Colors.RGB(136, 136, 136)
    colsEnabled(1) = Colors.RGB(0, 0, 0)
    
    ' Define a GradientDrawable for Enabled state
    Dim gdwEnabled As GradientDrawable
    gdwEnabled.Initialize("TOP_BOTTOM",colsEnabled)
    gdwEnabled.CornerRadius = 5
    
    ' Define two gradient colors for Pressed state
    Dim colsPressed(2) As Int
    colsPressed(1) = Colors.RGB(136, 136, 136)
    colsPressed(0) = Colors.RGB(0, 0, 0)
    
    ' Define a GradientDrawable for Pressed state
    Dim gdwPressed As GradientDrawable
    gdwPressed.Initialize("TOP_BOTTOM",colsPressed)
    gdwPressed.CornerRadius = 5
    
    ' Define a StateListDrawable
    Dim stdGradient As StateListDrawable
    stdGradient.Initialize
    
    Dim states(2) As Int
    states(0) = stdGradient.state_enabled
    states(1) = -stdGradient.state_pressed
    stdGradient.addState2(states, gdwEnabled)
    
    Dim states(1) As Int
    states(0) = stdGradient.state_pressed
    stdGradient.addState2(states, gdwPressed)
    
    ' Set stdRedGradient to button background
    btnGradient.Background = stdGradient
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 
Last edited:
Upvote 0
B

BarrySumpter

Active Member
Licensed User
Longtime User
I'm sure there is probably a more efficient way but:

B4X: 
Sub Process_Globals
End Sub

Sub Globals

    Dim MapView1 As MapView
    
    Dim Panel1 As Panel
  Dim Label1 As Label
  Dim Label2 As Label
  Dim btnEdit As Button
  Dim btnList As Button
    
    
    
        Dim gd1 As GradientDrawable
        Dim gd2 As GradientDrawable
         Dim cols1(2) As Int 
         Dim cols2(2) As Int 

    
End Sub

Sub Activity_Create(FirstTime As Boolean)
    
    If File.ExternalWritable=False Then
        '    OSMDroid requires the use of external storage to cache tiles
        '    if no external storage is available then the MapView will display no tiles
        Log("WARNING NO EXTERNAL STORAGE AVAILABLE")
    End If
        
    'Activity.LoadLayout("main")
    

    '    no EventName is required as we don't need to listen for MapView events
    MapView1.Initialize("")
    Activity.AddView(MapView1, 0, 0, 100%x, 80%y)
    
    '    by default the map will zoom in on a double tap and also be draggable - no other user interface features are enabled
    
    '    enable the built in zoom controller - the map can now be zoomed in and out
    MapView1.SetZoomEnabled(True)
    
    '    enable the built in multi touch controller - the map can now be 'pinch zoomed'
    MapView1.SetMultiTouchEnabled(True)
    
    '    set the zoom level BEFORE the center (otherwise unpredictable map center may be set)
    MapView1.Zoom=14
    MapView1.SetCenter(-37.85091702146988, 145.05743605518342)

  
            'cols1(1) = Colors.Gray
'        Gray A = 255
'        Gray R = 136
'        Gray G = 136
'        Gray B = 136
    
        'cols1(1) = Colors.Black
'        Black A = 255
'        Black R = 0
'        Black G = 0
'        Black B = 0

        cols1(0) = Colors.argb ( 200, 136, 136, 136)
        cols1(1) = Colors.argb ( 200, 0, 0, 0)
        
        gd1.Initialize("TOP_BOTTOM",cols1)
        gd1.CornerRadius=5

    
            
            
        Panel1.Initialize("Panel1")
      Activity.AddView(Panel1, 10dip, 50%y, 300dip, 40dip)

        Dim TimeNewRomanBold As Typeface
        TimeNewRomanBold = Typeface.LoadFromAssets("Times.ttf")
        TimeNewRomanBold = Typeface.CreateNew(TimeNewRomanBold, Typeface.STYLE_BOLD)

        btnList.Initialize("btnList")
        Panel1.AddView(btnList, 3dip, 3dip, 57dip, 35dip)
        btnList.Text = "List"
        
        btnEdit.Initialize("btnEdit")
        btnEdit.Text = "Edit"
        Panel1.AddView(btnEdit, 240dip, 3dip,   57dip, 35dip)
        
        Panel1.Background=gd1

        
        
        Label1.Initialize("Lable1")
        Label1.textsize = Label1.TextSize -3
        'Label1.Typeface = TimeNewRomanBold
        Label1.Text = "Selected address:"
        Label1.Gravity = Gravity.CENTER
        Label1.TextColor = Colors.argb ( 255, 255, 255, 255)

        Activity.AddView(Label1, Panel1.Left, Panel1.top,  Panel1.Width, Panel1.Height - 30)
        
        Label2.Initialize("Lable2")
        Label2.textsize = Label2.TextSize + 5
        'Label2.Typeface = TimeNewRomanBold
        Label2.Text = "55a Iris Rd"
        Label2.Gravity = Gravity.CENTER
        Label2.TextColor = Colors.argb ( 255, 255, 255, 255)

        Activity.AddView(Label2, Panel1.Left, Panel1.top + 15,  Panel1.Width, Panel1.Height - 15)

        'btnList.Color = Colors.Transparent
        btnList.TextColor = Colors.White
        
        'btnEdit.Color = Colors.Transparent
        btnEdit.TextColor = Colors.White
        
        Dim colorsEnabled(2) As Int

        colorsEnabled(0) = Colors.argb ( 200, 136, 136, 136)
        colorsEnabled(1) = Colors.argb ( 200, 0, 0, 0)
        

        ' Define a GradientDrawable for Enabled state
        Dim gradDrawEnabled As GradientDrawable
        gradDrawEnabled.Initialize("TOP_BOTTOM",colorsEnabled)
        gradDrawEnabled.CornerRadius = 5




        ' Define two gradient colors for Pressed state
        Dim colorsPressed(2) As Int
        colorsPressed(1) = Colors.aRGB(200, 136, 136, 136)
        colorsPressed(0) = Colors.aRGB(200, 0, 0, 0)
        
        ' Define a GradientDrawable for Pressed state
        Dim gradDrawPressed As GradientDrawable
        gradDrawPressed.Initialize("TOP_BOTTOM",colorsPressed)
        gradDrawPressed.CornerRadius = 5



        ' Define a StateListDrawable
        Dim stdGradient As StateListDrawable
        stdGradient.Initialize
        
        Dim states(2) As Int
        states(0) = stdGradient.state_enabled
        states(1) = -stdGradient.state_pressed
        stdGradient.addState2(states, gradDrawEnabled)
    
        Dim states(1) As Int
        states(0) = stdGradient.state_pressed
        stdGradient.addState2(states, gradDrawPressed)
        
        ' Set stdRedGradient to button background
        btnEdit.Background = stdGradient

        
        
        ' Define a StateListDrawable
        Dim stdGradient2 As StateListDrawable
        stdGradient2.Initialize
        
        Dim states(2) As Int
        states(0) = stdGradient2.state_enabled
        states(1) = -stdGradient2.state_pressed
        stdGradient2.addState2(states, gradDrawEnabled)
    
        Dim states(1) As Int
        states(0) = stdGradient2.state_pressed
        stdGradient2.addState2(states, gradDrawPressed)
        
        ' Set stdRedGradient to button background
        btnList.Background = stdGradient2



    
'  Dim argb() As Int
'  
'    argb = GetARGB(Colors.White)
'  
'    Log("White A = " & argb(0))
'  Log("White R = " & argb(1))
'  Log("White G = " & argb(2))
'  Log("White B = " & argb(3))

    'SetNinePatchDrawable(Panel1, "Panel1")

End Sub
Sub SeekBar1_ValueChanged (Value As Int, UserChanged As Boolean)
    
    
    btnList.Color = Colors.ARGB ( Value, 0, 0, 0)

  Log("Panel1.opacity: " & Value)

End Sub


Sub GetARGB(Color As Int) As Int()
    Dim res(4) As Int
    res(0) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff000000), 24)
    res(1) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff0000), 16)
    res(2) = Bit.UnsignedShiftRight(Bit.And(Color, 0xff00), 8)
    res(3) = Bit.And(Color, 0xff)
    Return res
End Sub
Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub
 
Upvote 0
You must log in or register to reply here.
Top