How to set the style of a btn matrix in XML?

How-to
1 
<styles>
	<style name="example" />
</styles>

<view
	extends="lv_obj"
	name="background"
	height="100%"
	width="100%"
	style_opa="$bg_style_opa"
	style_pad_all="0"
	style_bg_color="$bg_style_color"
>
	<lv_button name="return" align="top_left" width="14%" height="18%" style_opa="0" />

	<lv_label text="&lt;" style_text_align="center" align="top_left" width="14%" height="18%" />

	<lv_buttonmatrix
		name="matrix"
		width="100%"
		height="80%"
		align="bottom_mid"
		style_pad_all="0"
		style_pad_row="1"
		style_shadow_opa="0"
		style_border_width="0"
		style_pad_column="0"
		map="'1' '2' '3' 'Enter' '\n' '4' '5' '6' 'Del' '\n' '7' '8' '9' '0' '.'"
		ctrl_map="width_1 width_1 width_1 width_2 width_1 width_1 width_1 width_2 width_1 width_1 width_1 width_1 width_1"
	/>

	<lv_label name="typed" text="0.0" align="top_mid" />
</view>
2

If you mean the individual buttons, you need to apply a style to the items using the selector property from the xml

https://docs.lvgl.io/master/widgets/buttonmatrix.html#parts-and-styles

<screen>
	<styles>
		<style name="example" />
		<style name="style_items" bg_color="0xff1212" radius="20" text_color="0xfff" />
	</styles>

	<view
		extends="lv_obj"
		name="background"
		height="100%"
		width="100%"
		style_opa="255"
		style_pad_all="0"
		style_bg_color="0x61c935"
	>
		<lv_button name="return" align="top_left" width="14%" height="18%" style_opa="0" />

		<lv_label text="&lt;" style_text_align="center" align="top_left" width="14%" height="18%" />

		<lv_buttonmatrix
			name="matrix"
			width="100%"
			height="80%"
			align="bottom_mid"
			style_pad_all="0"
			style_pad_row="1"
			style_shadow_opa="0"
			style_border_width="0"
			style_pad_column="0"
			map="'1' '2' '3' 'Enter' '\n' '4' '5' '6' 'Del' '\n' '7' '8' '9' '0' '.'"
			ctrl_map="width_1 width_1 width_1 width_2 width_1 width_1 width_1 width_2 width_1 width_1 width_1 width_1 width_1"
		>
            <!-- Apply the style to part ITEMS  -->
			<style name="style_items" selector="items" />
		</lv_buttonmatrix>

		<lv_label name="typed" text="0.0" align="top_mid" />
	</view>
</screen>
3

What about a single btn from the matrix?

4

You can use the checked state to apply a different style, but it will apply to all other buttons with the checked state

ctrl_map="width_1|checked width_1 width_1 ...

<style name="style_items" selector="items|checked" />

5

I understand but its not what i need so i will just use normal buttons instead.

1 Like