Share your Lovelace Projects (specifically ios/android versions)

You can find the config on my github page
I’ve also updated the check-button-card.

1 Like

So I’ve come a long way since january. Still experimenting with different UI’s, so this is what I am working on in March 2019 and you might expect the code soon on my github.

Here’s the preview on mobile:

Here is what it would look like (roughly) on a pc/tablet.

To find the setup follow this link:


Here is my android tablet version.


Very nice, a bit too busy for my taste but man a lot of detail. Very nice.

1 Like

For the people that were looking for my setup I have moved it to a new thread:


New design released (the ones from the last screenshots)
Come find it here

My UI is a little different. I’ve taken some inspiration from a Medium post I saw that had a bunch of concept UIs

The small white buttons open a conditional card under the room in question (and closes whatever card was open before).

Tapping the name of the room takes you to a different View dedicated to that room

I’ve used the Compact Custom Header card to hide the header links, except for the Settings icon which goes to a view which essentially lists everything, including links to all other views and the config pages etc, so they are always accessible

I’m using the beta iOS app which means swiping from the left side of the screen opens the sidebar, so I don’t need the menu button for that

Example of the TV drop down for the Living Room on the Home View:

Example of the music dropdown for the Kitchen on the Home view:


How do you create a UI specific for mobile devices ? You have a dedicated one for PC and another for mobile ?

No, but I will in the near future. I am working on ipad/pc views. What I meant with it is that the design is made for an iphone. Using it on a pc/tablet will work fine, but will look weird in some cases as sizes are not the same on a mobile phone.

But yes I will have separate views for iphones and ipads soon.

Ok, and how do you do that? How do you serve a different lovelace ui per client ?

You can’t however you can use compact custom header to have different views hide for different user agents. For example if I had 4 views:
Home - lights - devices - ipad

I could make the first 3 views hide on ipad (so it would essentially have a single view) and hide the ipad view for all smartphones.

Only when loading the component it will show all views but after it is done loading it will just look like the tabs don’t exist (they can not be accessed either with other user agents.

Looks really cool, mind sharing your lovelace conf?

Here you go :slight_smile:

1 Like

Just wanted to share my lovelace, using the clear theme and coloured icons from :grinning:

This is how it looks on tablet

And this is on iOS

Thanks everyone for sharing :hearts:


Awesome! Thanks for sharing. Where did you get the icons for your family from?

I got the icons from Bitmoji. Your theme is absolutely awesome :boom::+1:

Thank you :heart:

This is my Panel. Had to up my photography skills and used photos of the actual rooms. Used a combination of Picture Elements, Vertical Stacks including the following custom elements:

  • Banner-Card

  • Card-mod

  • Garbage Collection Card


This is the current state of my constantly changing lovelace setup, viewed from my phone.

Home Screen:

Some other Examples:


how did u managed to get those titles (like sensoren)?
what theme are you using?
since i guess you using the button-card: mind sharing your template?