Autolayout with complex background

Konrad · January 28, 2021, 10:07am

Hi there! I am kind a newbie so please be gentle
I want to create an autolayout button with complex background, it is not a simple rectangle as you see below:

And i simply can’t do it with this shape, I can’t place it as a background under the label

Could you please help me?

Gleb · January 28, 2021, 10:26am

You can’t do that because that shape is a simple vector object. And it will look very bad if you stretch it. I recommend creating two separate sides to create the shape and placing the rectangular auto layout in the middle. I just added an example into this file I created and you can find other useful examples there too:

Konrad · January 28, 2021, 10:34am

Thanks mate, I will play with it!

Konrad · February 1, 2021, 5:40pm

@Gleb one more tricky part, how to do it with outlined button state? Any ideas?

Gleb · February 1, 2021, 11:56pm

Easy: instead of coloring the central rectangle autolayout, put two horizontal lines in it. And turn sides into strokes, removing two vertical lines from them.

Alexander_Tazh · October 1, 2023, 1:26am

There should be something like a ‘9 patch’ checkmark for this by the fill value of the autolayouted element.