Android widget formatting

How can I fully format a widget? Is there any document explaining which bits of html work here?

I have managed:
to colour the text of a template widget - coloured foreground or background

I want to do things like
a) colour the whole widget,
b) colour change based on entity state
c) maybe make it transparent

So far I have this working…

{{'<p style="background-color:green;color:red;">'}}

I’ve seen a reference to automagic but this looks like overkill.

You can use some HTML but not a lot, very basic formatting like line breaks, changing the font size and color. There is a existing PR to allow for background transparency so may want to wait for that.

1 Like

@dshokouhi ok, it is limited but do you know what is possible?
I have managed to use colour, but changing font size as well is defeating me.

For font size try the header tags

Here is a more definitive answer from someone who looked at android source code for what is supported: Which HTML tags are supported by Android TextView? - Stack Overflow

1 Like

The header tags work to make a larger font, but I have not found a way to combine that with a colour.
Thanks for the link, I’ll explore.
Edit - so far this works, Not good but …

{{'<p style="background-color:green; color:black;" ><big><strong>' if states('sensor.gbp_aud')|float(0)>1.77 else '<p style="color:red;;"><big><strong>'}}{{states('sensor.gbp_aud')}}
{{'<br><small><p style="color:black">'}}

I’ve been looking at how to change font sizes and found that you can nest as many big elements as you like to make it even bigger, for example

<big><big><big>{{ state }}</big></big></big>

The result is that you can make a template widget look similar to an entity state widget, but with a label set from another state.

I use this this to display my cars charge level and then the estimated charging time underneath and much smaller, but only when it’s plugged in.

1 Like

Has anyone found a way to align the text to the left?


The underlying display is happening using android.text.Html which apparently supports non-standard text-align values. Adding

<p style="text-align: start">my content</p>

made my widget’s text left-aligned.

1 Like

Any idea how to make my widget a link which opens the Home Assistant app?

not currently possible