CODEWITHSUNDEEP
pythonkivy
Bernardo Olisan
Bernardo Olisan

Reputation: 675

How to make round edges in a MDCard KivyMD

I am doing an App in kivy using kivyMD but I Want to insert a MDcard, the thing is that I want the MDCard look like this: enter image description here

But it looks like this:

enter image description here

I know it can be with border_radius but I dont know how to do it, here is my code:

PY:

import kivy
from kivymd.app import MDApp
from kivymd.uix.card import MDCard

class Home(MDCard):
    pass

class Manage(MDApp):
    title = 'QUICKP'
    def build(self):
        return Home()


if __name__ == '__main__':
    Manage().run()

KV:

<Home>

    MDCard:
        size_hint: None, None
        size: "280dp", "180dp"
        pos_hint: {"center_x": .5, "center_y": .5}

Upvotes: 1

Views: 5946

Answers (4)

Lakshmi Vallabh
Lakshmi Vallabh

Reputation: 124

@BernardoOlisan You can use this directly

MDCard:
    size_hint: None, None
    size: "280dp", "180dp"
    pos_hint: {"center_x": .5, "center_y": .5}
    elevation: 15
    radius: 10
    MDLabel:
        text: 'Your title'
        halign: 'center'
        pos_hint: {"center_x": .5, "center_y": .5}

It works for sure

Upvotes: 0

yaxter
yaxter

Reputation: 85

You do not need to modify the card.py file nor do you have to use canvas you just have to place the following in your kivy code

border_radius: 20
radius: [15]

In border_radius you put the border limit that you will be able to use and in radius you put the border level that your mdcard will have.

Upvotes: 5

Poorya Bolooryan
Poorya Bolooryan

Reputation: 11

People advise to use canvas its OK, but it increase your coding and make it very complex. Just go to the Kivymd>uix>card.py line 631 change the default from 3dp to for example 20dp or whatever you want. then go back to your code and type radius: [] and insert your desire number from 20 to 0. Done!!!

Upvotes: 0

Alexandr Milko
Alexandr Milko

Reputation: 34

I had the same problem, and there is a border_radius property for MDCards, but it does not work. But i have solved this with this code:

<MyCard>:
    orientation: 'vertical'
    size_hint: 0.1, 1
    canvas.before:
        Color:
            rgba: app.theme_cls.primary_color
        RoundedRectangle:
            radius: [10]
            size: self.size
            pos: self.pos
    FloatLayout:
        size: self.size
        pos: self.pos
        pos_hint: {"x": -0.1, "y": -0.6}

And here is a part from .py file:

class Plan(RectangularElevationBehavior, RectangularRippleBehavior, FloatLayout):
    ripple_scale = 1.4
    text = StringProperty()
    text_label = StringProperty()

So, it creates a MyCard(FloatLayout class) with Canvas in it, which inherits from FloatLayout, RippleBehaviour and ElevationBehaviour. And then you can add to that FloatLayout in it to manage content of it. But if it looks strange because of the position, try playing with pos_hint-s.

Upvotes: -1

Related Questions