KivyMD icon indicating copy to clipboard operation
KivyMD copied to clipboard

Fixed shadow appearing before main widget appears

Open FuadAbid opened this issue 4 months ago • 0 comments

Fade Effect of Widget that inherits from CommonElevationBehavior class

Widgets that inherit from CommonElevationBehavior class (eg. MDButton and MDCard) produce bad look when their opacity is set low. It happens because their shadow color merges with main widget and gives a darker shade look. As to why it doesn't look good when using fade effect to show the widget. This has been fixed in this version.

Method to solve the problem

I wanted shadow start fading when opacity of the widget is more than by 70-80% and then by the time opacity of the widget reaches 100%, it's shadow opacity reaches 100% as well. That's why I used logistic function with shadow color opacity that increases very low at first and after a certain point it starts increasing faster.

Reproducing the problem

from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.animation import Animation

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor
    MDButton:
        pos_hint: {'center_x': .5}
        on_press: app.show_widget(card)
        MDButtonText:
            text: 'Show'
    MDCard:
        id: card
        style: 'elevated'
        size_hint: .75, .75
        pos_hint: {'center_x': .5, 'center_y': .5}
        RelativeLayout:
            MDButton:
                pos_hint: {'center_x': .5, 'center_y': .5}
                on_press: app.hide_widget(card)
                MDButtonText:
                    text: 'Hide'
'''

class MyApp(MDApp):
    def build(self):
        return Builder.load_string(KV)
    
    def show_widget(self, widget):
        Animation(opacity=1, d=2, t='out_quad').start(widget)

    def hide_widget(self, widget):
        Animation(opacity=0, d=2, t='out_quad').start(widget)

MyApp().run()

Showing the problem

fade_effect_problem

Changes to code

in kivymd/uix/behaviors/elevation.py file on line 391 solution code

rgba: self.shadow_color[:3] + [self.shadow_color[3]*(1/(1+100*(.8**((self.opacity-.7)*100))))]

instead of

rgba: self.shadow_color

After applying the solution

fade_effect_solution

FuadAbid avatar Apr 19 '24 14:04 FuadAbid