performance with uiid border

[Maaike]

I was experiencing serious performance issues with a TableLayout container and I thought it was because of the TableLayout container. After experimenting, I found out that the problem is the border of the style (I'm sorry about blaming the TableLayout container ;)). 

I first thought it was because of the transparency of the border. But the same performance issues exist when using a jpg as border. 

To reproduce it:

Make a TableLayout container with 34 rows and 2 columns. Every row / column contains a container with an image border.

If I remove the image borders, everything is working fine. This behaviour is far more worse on the new Android pipeline than on the old one (iOS has less problems).

The border image is only 686 bytes big and is 50x20 pixels. 

Is it possible to use this amount of components with borders in one view? If so, what should I change? 

[Maaike]

PS the problem is with scrolling up/down and swiping to the next/previous tab. 

[Shai Almog]

This is discussed in the performance video.

You cut the border too small. The size of the source image or its dimensions are completely irrelevant once you cut it since we generate 9 different images and use them.
The images that matter are the ones that get tiled (left/right/top/bottom but most of all center).

Say you have an image that is 50x20 and you created an image border for a button which is now displayed over 200x200 pixels.
All cuts were made at 9 pixels from the edges meaning:
center = 32x2
corners = 9x9
top,bottom = 32x9
left, right = 2x9

Now we need to fill a 200x200 pixel area with these small images, sides/top,bottom aren't that awful but the center area is huge!
We can remove 18 pixels from each side for the edges leaving us a 182x182 area to fill with an image that is 32x2 which means we need to draw the center image 546 times in that case... You need to make sure the center image is large enough in the cut and close enough to your destination size.

[Maaike]

Ok thanks! I'll try the changes!
I actually just want a bottom border, but it's not possible to set the other values to 'none'. Is there another way to create a line between every row in TableLayout?

[Shai Almog]

There is with handcoding but its not trivial.

[Maaike]

Ok I changed to a much bigger border. That's much better! Actually, I find the performance still a bit sluggish with a TableLayout with a lot of Containers with borders. 

What I can say more about this particular case about performance: with the old Android pipeline, the performance is about twice better than with the new Android pipeline. Scrolling is much quicker. And I use the TableLayout containers in a Tabs layout. Swiping between these containers with these TableLayouts is also quicker with the old Android pipeline.

If you need the source to test this: let me know.

[Shai Almog]

On which device/OS version?
The old pipeline uses a system which Google preferred during the 2.x and even early 4.x branches newer OS's emphasize hardware accelerated UI.
The main problem is that when you submit a job to the hardware you can't optimize it beforehand and the hardware is less forgiving of things like overdraw.

Since the new pipeline uses hardware acceleration more effectively it should be faster for most cases.

[Maaike]

at least at Android 4.4

Asus MemoPad Smart and Samsung Galaxy Tab2.

How do I get overdraw? What do you mean with it? In this case: any hints about how I can prevent that?

[Shai Almog]

Use the performance monitor and click refresh (second tab) to see what we draw for every item in the hierarchy.

Overdraw means drawing the same pixel more than once which happens sometimes e.g. fill the UI then draw text on it the pixels under the text should be drawn twice.
However, if you do this over more than 4 times it might be a problem.

[Maaike]

Hmm most of the time I add a container to a form when everything is added, so I hope / think it's only one draw for that reason? Or is that thought too simple?

[Shai Almog]

Sorry, I don't understand that sentence.