CODEWITHSUNDEEP
xamarin.forms
Parmendra
Parmendra

Reputation: 227

How to overlap image or layout in Xamarin.forms

I want to design as attached screenshot. I need to add two images, image 1 and image 2.

enter image description here

Upvotes: 1

Views: 2963

Answers (3)

Markus Michel
Markus Michel

Reputation: 2299

If you add items to a grid (same row and column), they overlap in the sequence of how they have been added to the view.

<Grid>
    <BoxView BackgroundColor="Red"/>
    <BoxView BackgroundColor="Blue"/>
    <BoxView BackgroundColor="Green"/>
</Grid>

In this very minimalistic example, the red box will be on the bottom, with the blue and then the green box above it. You can use HorizontalOptions and VerticalOptions together with Margin values to finetune the view.

This also applies if you add your elements from codebehind.

I would recommend this method especially when you are using ListViews, since RelativeLayout or AbsoluteLayout need significantly more layout time, which would be multiplied by the amount of items in your list.

Upvotes: 4

Fabian Claasen
Fabian Claasen

Reputation: 284

You can use an AbsoluteLayout or you can use a StackLayout with a negative Margin.

Upvotes: 1

Sumit Pathak
Sumit Pathak

Reputation: 529

You can use Relative Layout for overlapping image

<RelativeLayout>  

<BoxView x:Name="Boxview1" BackgroundColor="Fuchsia"   
        RelativeLayout.WidthConstraint="{ConstraintExpression  
        Type=RelativeToParent,  
        Property=Width,  
        Factor=1}"  
        RelativeLayout.HeightConstraint="{ConstraintExpression  
        Type=RelativeToParent,  
        Property=Height,  
        Factor=0.3}"></BoxView>  

<BoxView BackgroundColor="Lime"  
         RelativeLayout.YConstraint="{ConstraintExpression  
    Type=RelativeToView,  
    ElementName=Boxview1,  
    Property=Height,  
    Factor=0.9,  
    }"  
      RelativeLayout.XConstraint="{ConstraintExpression  
    Type=RelativeToView,  
    ElementName=Boxview1,  
    Property=Width,  
    Factor=0.5,  
    }"     
         ></BoxView>

if you face any issue let me know I will design it and post the code.

Upvotes: 1

Related Questions