KivyMD
KivyMD copied to clipboard
Fixed shadow appearing before main widget appears
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
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