ImageList

See also

Material Design spec, Image lists

Image lists display a collection of images in an organized grid.

KivyMD provides the following tile classes for use:

Usage

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:

    MDSmartTile:
        radius: 24
        box_radius: [0, 0, 24, 24]
        box_color: 1, 1, 1, .2
        source: "cats.jpg"
        pos_hint: {"center_x": .5, "center_y": .5}
        size_hint: None, None
        size: "320dp", "320dp"

        MDIconButton:
            icon: "heart-outline"
            theme_icon_color: "Custom"
            icon_color: 1, 0, 0, 1
            pos_hint: {"center_y": .5}
            on_release: self.icon = "heart" if self.icon == "heart-outline" else "heart-outline"

        MDLabel:
            text: "Julia and Julie"
            bold: True
            color: 1, 1, 1, 1
'''


class MyApp(MDApp):
    def build(self):
        return Builder.load_string(KV)


MyApp().run()

Implementation

API - kivymd.uix.imagelist.imagelist

class kivymd.uix.imagelist.imagelist.MDSmartTile(*args, **kwargs)

A tile for more complex needs.

For more information, see in the MDRelativeLayout class documentation.

Includes an image, a container to place overlays and a box that can act as a header or a footer, as described in the Material Design specs.

Events:

on_press

Called when the button is pressed.

on_release

Called when the button is released (i.e. the touch/click that pressed the button goes away).

box_radius

Box radius.

New in version 1.0.0.

MDSmartTile:
    radius: 24
    box_radius: [0, 0, 24, 24]

box_radius is an VariableListProperty and defaults to [0, 0, 0, 0].

box_color

Sets the color in (r, g, b, a) or string format and opacity for the information box.

MDSmartTile:
    radius: 24
    box_radius: [0, 0, 24, 24]
    box_color: 0, 1, 0, .5

box_color is a ColorProperty and defaults to (0, 0, 0, 0.5).

box_position

Determines weather the information box acts as a header or footer to the image. Available are options: ‘footer’, ‘header’.

MDSmartTile:
    radius: 24
    box_radius: [24, 24, 0, 0]
    box_position: "header"

box_position is a OptionProperty and defaults to ‘footer’.

overlap

Determines if the header/footer overlaps on top of the image or not.

MDSmartTile:
    radius: [24, 24, 0, 0]
    box_radius: [0, 0, 24, 24]
    overlap: False

overlap is a BooleanProperty and defaults to True.

lines

Number of lines in the header/footer. As per Material Design specs, only 1 and 2 are valid values. Available are options: 1, 2. This parameter just increases the height of the container for custom elements.

MDSmartTile:
    radius: 24
    box_radius: [0, 0, 24, 24]
    lines: 2
    source: "cats.jpg"
    pos_hint: {"center_x": .5, "center_y": .5}
    size_hint: None, None
    size: "320dp", "320dp"

    MDIconButton:
        icon: "heart-outline"
        theme_icon_color: "Custom"
        icon_color: 1, 0, 0, 1
        pos_hint: {"center_y": .5}
        on_release: self.icon = "heart" if self.icon == "heart-outline" else "heart-outline"

    TwoLineListItem:
        text: "[color=#ffffff][b]My cats[/b][/color]"
        secondary_text: "[color=#808080][b]Julia and Julie[/b][/color]"
        pos_hint: {"center_y": .5}
        _no_ripple_effect: True

lines is a OptionProperty and defaults to 1.

source

Path to tile image. See source.

source is a StringProperty and defaults to ‘’.

mipmap

Indicate if you want OpenGL mipmapping to be applied to the texture. Read Mipmapping for more information.

New in version 1.0.0.

mipmap is a BooleanProperty and defaults to False.

on_release(self, *args)

Called when the button is released (i.e. the touch/click that pressed the button goes away).

on_press(self, *args)

Called when the button is pressed.

add_widget(self, widget, *args, **kwargs)

Add a new widget as a child of this widget.

Parameters:

widget: Widget

Widget to add to our list of children.

index: int, defaults to 0

Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.

New in version 1.0.5.

canvas: str, defaults to None

Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.

New in version 1.9.0.

>>> from kivy.uix.button import Button
>>> from kivy.uix.slider import Slider
>>> root = Widget()
>>> root.add_widget(Button())
>>> slider = Slider()
>>> root.add_widget(slider)