Hot to put image on top of the other ui elements

#1

Hi, I have ActionBar, TabView and then AbsoluteLayout, where I have image in AbsoluteLayout which is showing in center as I expected but, the problem is it’s showing under the TAB view. But I want that image to show on top of the view.

Here is the sample code…

See the image between the buttons, I want that image on top of those buttons how do I do that. Thank you in advance.

Thank you

Image attached

native-image
native-image.png627×605 18.5 KB

#2

GridLayouts are super powerful and this is a great feature that they can help you accomplish.

<GridLayout rows="*">
     <StackLayout orientation="horizontal" row="0">
          <Button text="1" />
          <Button text="WIDE" />
     </StackLayout>
     <Image row="0"  src="res://example" />
</GridLayout>

In thie example, by setting the Image to row 0 we are rendering it on top of the existing row 0. By default, the initial rendered element inherits that row, so defining it on the StackLayout in my example is purely to illustrate what is happening under the hood.

Loosely looking at your image, it appears you are using some sort of auto layout (either a Grid or Flex perhaps?). You should be able to leverage rows to get what you want.

#3

Thank you. I will try that. But I had sample code in my post, but looks like its not there now :(.

But, I have found a solution for the popup image. I used a dialog component and achieved the popup. Thank you.