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:

    GridLayout:
        cols: 3
        row_default_height: (self.width - self.cols*self.spacing[0]) / self.cols
        row_force_default: True
        size_hint_y: None
        height: self.minimum_height
        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:

    GridLayout:
        cols: 3
        row_default_height: (self.width - self.cols*self.spacing[0]) / self.cols
        row_force_default: True
        size_hint_y: None
        height: self.minimum_height
        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

Bases: kivymd.theming.ThemableBehavior, kivymd.uix.behaviors.RectangularRippleBehavior, kivy.uix.behaviors.ButtonBehavior, kivy.uix.boxlayout.BoxLayout

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

class kivymd.uix.imagelist.SmartTile

Bases: kivymd.theming.ThemableBehavior, kivymd.uix.behaviors.RectangularRippleBehavior, kivy.uix.behaviors.ButtonBehavior, kivy.uix.floatlayout.FloatLayout

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

Bases: kivymd.uix.imagelist.SmartTile

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

Bases: kivymd.uix.button.MDIconButton

on_touch_down(self, touch)
class kivymd.uix.imagelist.SmartTileWithStar

Bases: kivymd.uix.imagelist.SmartTileWithLabel

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.