Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Scrollview is overlapping above elements when scrolled in xamarin android project.

ukku2215ukku2215 Member ✭✭
edited May 27 in Xamarin.Forms

Xamarin.forms version(4.3.0.947036)
We are still facing issues in our scrollview, when scrolled, the elements above the scroll are overlapped.
Even our top elements are absolute and at fixed position.
So in our case the scrollview is set in the middle of our page where we have top and bottom menus and it should scroll only in its intended scrollview area.
We have tried various solutions and renderers but we are still stuck.
Most popular solution IsClippedToBound = "true" also does not work.
This issue is observed only in android our ios works just fine and perfect.

Best Answer

  • ukku2215ukku2215 Member ✭✭
    Accepted Answer

    @jezh I have found the answer and according to layout structure of xamarin any layout above scroll will probably hide it.
    Hence I moved my top control below the scroll and fixed it according to absolute layout.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    I created a simple demo and tried to reproduce this question ,but failed, it worked properly.

    If it is convenient for you, could you please post some code snippet?

  • ukku2215ukku2215 Member ✭✭

    @jezh can you share your code, so that i can relate it with mine and reproduce it on my end as my snippet would be much larger to share

  • jezhjezh Member, Xamarin Team Xamurai

    Of course, the whole xaml is as follows:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="LayoutSamples.ScrollingDemoXAML"
    BackgroundColor="Gray"
    Title="ScrollView Demo - XAML">
        <ContentPage.Content>
    
                <StackLayout>
                    <Label Text = "Top" x:Name="label1" HeightRequest="100"  HorizontalOptions="Center" VerticalOptions="Center"/>
    
                <ScrollView x:Name="scroll" Orientation="Both" >
    
                    <StackLayout>
                        <Label BackgroundColor="Yellow" 
                     Text="1111111111111aaaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"       
                    HeightRequest="500" 
                    WidthRequest="150" />
    
                       <Label BackgroundColor="Accent" 
                     Text="test2fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"       
                    HeightRequest="300" 
                    WidthRequest="150" />
    
                    </StackLayout>
    
    
                </ScrollView>
                <Label Text = "bottom" x:Name="label2" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center"/>
            </StackLayout>
    
        </ContentPage.Content>
    </ContentPage>
    
  • ukku2215ukku2215 Member ✭✭

    @jezh I tried your code in my end but still it is not working. Attached image shows that top label is getting overlapped when am scrolling the screen.
    Is there anything else that you are doing in your code behind xaml.cs file.

  • ukku2215ukku2215 Member ✭✭
    edited May 29
    @jezh below is my implementation of xaml code structure.
    <ContentPage>
        <AbsoluteLayout>
            <Control>       //top menu
                <StackLayout>
                  <Grid>
                   <Label>
                     <StackLayout>
                    <ScrollView>
                       <Grid>
                        <AccordionView>
                            <AccordionItemView #1/> 
                            <AccordionItemView #2/> 
                            <AccordionItemView #3/> 
                            <AccordionItemView #4/> 
                        </AccordionView>
                       </Grid>
                    </ScrollView>
                     </StackLayout>
                  </Grid>
                <StackLayout>
            <Control>       //bottom menu
        </AbsoluteLayout>
    </ContentPage>
    
  • jezhjezh Member, Xamarin Team Xamurai

    Is there anything else that you are doing in your code behind xaml.cs file.

    Hi ukku2215, I don't have done some else in my code behind xaml.cs file.

    If it is convenient for you ,could you please post the whole xaml code?

  • ukku2215ukku2215 Member ✭✭
    Accepted Answer

    @jezh I have found the answer and according to layout structure of xamarin any layout above scroll will probably hide it.
    Hence I moved my top control below the scroll and fixed it according to absolute layout.

  • jezhjezh Member, Xamarin Team Xamurai

    Congrats, could you please mark this topic to finish this topic? Thanks in advance.

Sign In or Register to comment.