Image List

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:

• SmartTileWithStar

• SmartTileWithLabel

SmartTileWithStar

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

KV = '''
<MyTile@SmartTileWithStar>
    size_hint_y: None
    height: "240dp"


ScrollView:

    MDGridLayout:
        cols: 3
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

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

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

        MyTile:
            stars: 5
            source: "cat-3.jpg"
'''


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


MyApp().run()

SmartTileWithLabel

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

KV = '''
<MyTile@SmartTileWithLabel>
    size_hint_y: None
    height: "240dp"


ScrollView:

    MDGridLayout:
        cols: 3
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

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

        MyTile:
            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

        MyTile:
            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):
        return Builder.load_string(KV)


MyApp().run()

API - kivymd.uix.imagelist

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 ColorProperty 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.

source

Path to tile image. See source.

source is a StringProperty and defaults to ‘’.

reload(self)

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.

tile_text_color is a ColorProperty and defaults to (1, 1, 1, 1).

text

Determines the text for the box footer/header.

text is a StringProperty and defaults to ‘’.

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)