Android Question Panel Views Rounded Corners

Michael Mejias

Member
Licensed User
How can I make child views match the rounded corners of the parent view?
 

Attachments

  • android.png
    android.png
    7.8 KB · Views: 451

Erel

Administrator
Staff member
Licensed User
upload_2016-8-11_8-26-42.png


See the attached project. It creates an ImageView that acts as a mask. Note that the background color must be known.

The important code:
B4X:
Sub CreateMask (pnl As Panel, radius As Float, BackgroundColor As Int) As ImageView
   Dim bmp As Bitmap
   bmp.InitializeMutable(pnl.Width, pnl.Height)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   cvs.DrawColor(BackgroundColor)
   Dim p As Path
   p.Initialize(0, 0)
   Dim jo As JavaObject = p
   Dim left = 0, top = 0, right = pnl.Width, bottom = pnl.Height As Float
   jo.RunMethod("addRoundRect", Array(left, top, right, bottom, radius, radius, "CW"))
   cvs.ClipPath(p)
   cvs.DrawColor(Colors.Transparent)
   Dim iv As ImageView
   iv.Initialize("")
   iv.Bitmap = bmp
   Return iv
End Sub
 

Attachments

  • PanelWithMask.zip
    7.9 KB · Views: 526
Upvote 0

awakenblueheart

Member
Licensed User
How to make the white panel as shown above has gradient color (statelist drawable)? Please help...
 
Last edited:
Upvote 0

awakenblueheart

Member
Licensed User
I am trying to pass gradient color to the mask which have statelistdrawable color.
This is my code:

B4X:
' Define two gradient colors for Enabled state
    Dim colsEnabled(2) As Int

    'hijau
    colsEnabled(0) = Colors.RGB(20, 200, 161)
    colsEnabled(1) = Colors.RGB(20, 130, 120)
   
    ' Define a GradientDrawable for Enabled state
    Dim gdwEnabled As GradientDrawable
    gdwEnabled.Initialize("TOP_BOTTOM",colsEnabled)
    gdwEnabled.CornerRadius = 20
   
    ' Define two gradient colors for Pressed state
    Dim colsPressed(2) As Int
   
    colsPressed(0) = Colors.RGB(6, 122, 106)
    colsPressed(1) = Colors.RGB(6, 102, 106)   
   
    ' Define a GradientDrawable for Pressed state
    Dim gdwPressed As GradientDrawable
    gdwPressed.Initialize("TOP_BOTTOM",colsPressed)
    gdwPressed.CornerRadius = 20
   
    ' 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)   
   
    LayoutPanel.AddView(CreateMask(panel, 15dip, stdGradient), panel.Left, panel.Top, panel.Width, panel.Height)
 
Upvote 0

Erel

Administrator
Staff member
Licensed User
I see the problem. This method was added in Android 5.0.

You can use this code instead, based on XUI library:
B4X:
Sub CreateMask (pnl As Panel, radius As Float, BackgroundColor As Int) As ImageView
   Dim bmp As Bitmap
   bmp.InitializeMutable(pnl.Width, pnl.Height)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   cvs.DrawColor(BackgroundColor)
   Dim p As B4XPath
   Dim r As B4XRect
   r.Initialize(0, 0, pnl.Width, pnl.Height)
   p.InitializeRoundedRect(r, radius)
   cvs.ClipPath(p)
   cvs.DrawColor(Colors.Transparent)
   Dim iv As ImageView
   iv.Initialize("")
   iv.Bitmap = bmp
   Return iv
End Sub
 
Upvote 0
Top