Image List

See also

Material Design spec, Image lists

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

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list.png

KivyMD provides the following tile classes for use:

SmartTileWithStar

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
ScrollView:

    MDGridLayout:
        cols: 3
        row_default_height: (self.width - self.cols*self.spacing[0]) / self.cols
        row_force_default: True
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        SmartTileWithStar:
            stars: 5
            source: "cat-1.jpg"

        SmartTileWithStar:
            stars: 5
            source: "cat-2.jpg"

        SmartTileWithStar:
            stars: 5
            source: "cat-.jpg"
'''


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


MyApp().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/SmartTileWithStar.gif

SmartTileWithLabel

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
ScrollView:

    MDGridLayout:
        cols: 3
        row_default_height: (self.width - self.cols*self.spacing[0]) / self.cols
        row_force_default: True
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        SmartTileWithLabel:
            source: "cat-1.jpg"
            text: "[size=26]Cat 1[/size]\n[size=14]cat-1.jpg[/size]"

        SmartTileWithLabel:
            source: "cat-2.jpg"
            text: "[size=26]Cat 2[/size]\n[size=14]cat-2.jpg[/size]"
            tile_text_color: app.theme_cls.accent_color

        SmartTileWithLabel:
            source: "cat-3.jpg"
            text: "[size=26][color=#ffffff]Cat 3[/color][/size]\n[size=14]cat-3.jpg[/size]"
            tile_text_color: app.theme_cls.accent_color
'''


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


MyApp().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/SmartTileWithLabel.png

API - kivymd.uix.imagelist

class kivymd.uix.imagelist.Tile(**kwargs)

A simple tile. It does nothing special, just inherits the right behaviors to work as a building block.

class kivymd.uix.imagelist.SmartTile(**kwargs)

A tile for more complex needs.

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.

box_color

Sets the color and opacity for the information box.

box_color is a ListProperty and defaults to [0, 0, 0, 0.5].

box_position

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

box_position is a OptionProperty and defaults to ‘footer’.

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.

lines is a OptionProperty and defaults to 1.

overlap

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

overlap is a BooleanProperty and defaults to True.

allow_stretch

See allow_stretch.

allow_stretch is a BooleanProperty and defaults to True.

anim_delay

See anim_delay.

anim_delay is a NumericProperty and defaults to 0.25.

anim_loop

See anim_loop.

anim_loop is a NumericProperty and defaults to 0.

keep_ratio

See keep_ratio.

keep_ratio is a BooleanProperty and defaults to False.

mipmap

See mipmap.

mipmap is a BooleanProperty and defaults to False.

source

Path to tile image. See source.

source is a StringProperty and defaults to ‘’.

reload(self)
add_widget(self, widget, index=0, canvas=None)

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)
class kivymd.uix.imagelist.SmartTileWithLabel(**kwargs)

A tile for more complex needs.

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.

font_style

Tile font style.

font_style is a StringProperty and defaults to ‘Caption’.

tile_text_color

Tile text color in rgba format.

text is a StringProperty and defaults to ``.

text

Determines the text for the box footer/header.

text is a StringProperty and defaults to ‘’.

class kivymd.uix.imagelist.Star(**kwargs)

Abstract base class for all round buttons, bringing in the appropriate on-touch behavior

on_touch_down(self, touch)

Receive a touch down event.

Parameters
touch: MotionEvent class

Touch received. The touch is in parent coordinates. See relativelayout for a discussion on coordinate systems.

Returns

bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.

class kivymd.uix.imagelist.SmartTileWithStar(**kwargs)

A tile for more complex needs.

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.

stars

Tile stars.

stars is a NumericProperty and defaults to 1.

on_stars(self, *args)
class kivymd.uix.imagelist.IBoxOverlay

An interface to specify widgets that belong to to the image overlay in the SmartTile widget when added as a child.

class kivymd.uix.imagelist.IOverlay

An interface to specify widgets that belong to to the image overlay in the SmartTile widget when added as a child.