How to make border line visible around kivy layout and button

Question

I'm new in kivy, i'm trying to create a user profile page and I want the segment that hold the user infomation to be in gridlayout. My problem is that I've been trying to add border line to the gridlayout and actionbutton but couldn't, do to the lack of experience. please how can I add border line around the gridlayout and the actionbutton.

this is .py file

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.popup import Popup
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.lang import Builder


Builder.load_file('main.kv')

class MyWidget(BoxLayout):
    pass

class SpinApp(App):
    def build(self):
        return MyWidget()
        
if __name__ == '__main__':
    SpinApp().run()

this is .kv file

<MyWidget>:
    orientation: 'vertical'
    canvas:
        Color:
            rgb: (252/255, 245/255, 220/255, 1)
        Rectangle:
            size: self.size
            pos: self.pos
    
    
        #creating an actionbar
    ActionBar:
        size: root.width, root.height*0.11
        background_image: 'assets/images/bg_normal.png'
        background_color: (250/255, 235/255, 210/255, 1)
        pos_hint: {'top': 1}
        spacing: 20
        
        ActionView:
            ActionPrevious:
                previous_image: 'images/back.png'
                color: 47/255, 79/255, 79/255, 1
                previous_image_width: 1000
                app_icon: ''
                markup: True
                title: '[size=50][b]  My Profile[/b][/size]'
                on_release: app.root.current = 'menu'
            ActionButton: #I want to border line here
                text: 'Make Changes'
                color: (0,0,.5,1)
                bold: True
                font_size: 32
                canvas.before:
                    Color:
                        rgba: (253/255, 245/255, 230/255, 1)
                    RoundedRectangle:
                        size: self.size
                        pos: self.pos
                        radius: [15]
                        
    #user data
    RelativeLayout:
        GridLayout: #this is the layout that I want to have border
            cols: 1
            size_hint: (0.8, 0.8)
            spacing: 5
            padding: [20]
            borders: 5,'solid',(1,1,0,1)
            #width: root.width*0.8
            pos_hint: {'center_x':.5, 'center_y':.5}
            background_normal: ''
            canvas.before:
                Color:
                    rgba: (253/255, 245/255, 230/255, 1)
                RoundedRectangle:
                    size: self.size
                    pos: self.pos
                    radius: [15]
            
            Image:
                source: 'slide_1.png'
                size: self.texture_size
            
            profile_label:
                text: 'Name: '
            profile_label:
                text: 'Matric no.:'
            profile_label:
                text: 'Level:'
            profile_label:
                text: 'School:'
            profile_label:
                text: 'Programme:'
        
<profile_label@Label>:
    color: 1,1,1,1
    bold: True
    font_size: 30
    size_hint_y: None
    height: 85
    text_size: self.size
    halign: 'left'
    valign: 'middle'
    padding: [10,0]
    canvas.before:
        Color:
            rgba:  47/255, 79/255, 79/255, 1
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: [25]

Answer 1

You can make a border line by drawing two rectangles, the second being slightly smaller than the first, leaving a border showing around the edges of the second rectangle.

For the ActionButton, you can extend that class to change the way it is drawn. In the kv file:

<-MyActionButton@ActionButton>:
    # The prepended "-" means use these rules instead of the default
    size_hint_x: None if not root.inside_group else 1
    width: [dp(48) if (root.icon and not root.inside_group) else max(dp(48), (self.texture_size[0] + dp(32))), self.size_hint_x][0]
    color: self.color[:3] + [0 if (root.icon and not root.inside_group) else 1]
        
    canvas:
        # draw a background of red. This will be the border
        Color:
            rgba: 1,0,0,1
        RoundedRectangle:
            pos: self.pos
            size: self.size
            
        # draw over the above except for 5 pixels around edges, leaving the red border showing
        Color:
            rgba: (0.5,0.5,0.5,1) if self.state == 'down' else self.background_color
        RoundedRectangle:
            pos: self.x+5, self.y+5
            size: self.width-10, self.height-10
            
        # draw the text
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            texture: self.texture
            size: self.texture_size
            pos: int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.)

    Image:
        allow_stretch: True
        opacity: 1 if (root.icon and not root.inside_group) else 0
        source: root.icon
        mipmap: root.mipmap
        pos: root.x + dp(4), root.y + dp(4)
        size: root.width - dp(8), root.height - sp(8)

Then use MyActionButton instead of ActionButton where you want a bordered ActionButton.

You can add a border to a GridLayout in a similar way. Add these instructions to the GridLayout rule in the kv file:

        canvas.before:
            Color:
                rgba: (1,0,0, 1)
            RoundedRectangle:
                size: self.size
                pos: self.pos
                radius: [15]
            Color:
                rgba: (253/255, 245/255, 230/255, 1)
            RoundedRectangle:
                size: self.width-10, self.height-10
                pos: self.x+5, self.y+5

You may notice that the border might not enclose everything that you added to the GridLayout. That will happen when the contents of the GridLayout are larger than the GridLayout.