Bug 22184 - Xamarin.Android ScrollView text overlaps
Summary: Xamarin.Android ScrollView text overlaps
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.2
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2014-08-18 19:06 UTC by Jon Douglas [MSFT]
Modified: 2015-05-22 03:55 UTC (History)
8 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Jon Douglas [MSFT] 2014-08-18 19:06:56 UTC
Based off: http://forums.xamarin.com/discussion/20945/scrollview-in-xaml

Repo:
https://www.dropbox.com/s/k9dktyp24eo0rmt/ScrollViewTest.zip

Seems that the ScrollView overlaps regardless of the respective properties set on the StackLayout/Grid/etc. Also works in iOS just fine, just Android where it's not working correctly.
Comment 1 Tajinder Singh 2014-08-19 06:55:20 UTC
I have checked this issue with attached sample and I am also observing same behavior scrollview overlaps with buttons.

=== Xamarin Studio ===

Version 5.3 (build 428)
Installation UUID: 2591d519-875d-4afe-a3d9-5fcf391bbd2d
Runtime:
	Mono 3.8.0 ((no/62a857e)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 308000007

=== Apple Developer Tools ===

Xcode 4.6.3 (2068)
Build 4H1503

=== Xamarin.iOS ===

Version: 7.4.0.102 (Enterprise Edition)
Hash: 141adb9
Branch: 
Build date: 2014-08-15 12:54:28-0400

=== Xamarin.Android ===

Version: 4.16.0 (Enterprise Edition)
Android SDK: /Users/nischal/Desktop/android-sdk-macosx
	Supported Android versions:
		2.1    (API level 7)
		2.2    (API level 8)
		2.3    (API level 10)
		3.1    (API level 12)
		3.2    (API level 13)
		4.0    (API level 14)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		4.5    (API level 21)
Java SDK: /usr
java version "1.6.0_35"
Java(TM) SE Runtime Environment (build 1.6.0_35-b10-428-11M3811)
Java HotSpot(TM) 64-Bit Server VM (build 20.10-b01-428, mixed mode)

=== Xamarin.Mac ===

Version: 1.10.0.7 (Enterprise Edition)

=== Build Information ===

Release ID: 503000428
Git revision: 3166b1cd326fbea84dcf024e73cb31ccc83a9811
Build date: 2014-08-15 14:50:33-04
Xamarin addins: 3d041b1639f938107c5e1c71c54d9a346b30c660

=== Operating System ===

Mac OS X 10.7.4
Darwin nischals-Mac-mini.local 11.4.0 Darwin Kernel Version 11.4.0
    Mon Apr  9 19:32:15 PDT 2012
    root:xnu-1699.26.8~1/RELEASE_X86_64 x86_64
Comment 3 Jason Smith [MSFT] 2015-02-05 05:25:20 UTC
Can not reproduce in 1.3.3
Comment 4 John Hardman 2015-04-17 08:13:01 UTC
Still occurs in 1.4.0

Windows Phone and iOS are fine, but Android still exhibits this problem, using 1.4.0 on physical devices.

The following (very work-in-progress) code demonstrates the problem, on either the left or right ScrollViews, when scrolling vertically.


using System;
using System.Collections.Generic;

using Xamarin;
using Xamarin.Forms;

namespace ViewsUsingXamarinForms
{
    class Person
    {
        public Person(string name, DateTime birthday, Color favoriteColor)
        {
            this.Name = name;
            this.Birthday = birthday;
            this.FavoriteColor = favoriteColor;
        }

        public string Name { private set; get; }

        public DateTime Birthday { private set; get; }

        public Color FavoriteColor { private set; get; }
    };

    public class PageDemonstratingScrollBoundsIssue : ContentPage
    {
        private StackLayout _outermostHorizontalStackLayout;
        private StackLayout _leftOutermostVerticalStackLayout;
        private StackLayout _rightOutermostVerticalStackLayout;
        private Grid _topLeftButtonGrid;
        private Grid _bottomLeftButtonGrid;
        private Grid _topRightButtonGrid;
        private Grid _bottomRightButtonGrid;
        private ScrollView _leftScrollView;
        private ListView _leftListView;
        private IList<Person> _people;
        private ScrollView _rightScrollView;
        private ListView _rightListView;

        public PageDemonstratingScrollBoundsIssue()
        {
            CreatePage();
        }

        private void CreatePage()
        {
            // Define some data.
        
            _people = new List<Person>
            {
                new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua),
                new Person("Bob", new DateTime(1976, 2, 20), Color.Black),
                new Person("Cathy", new DateTime(1977, 3, 10), Color.Blue),
                new Person("David", new DateTime(1978, 4, 25), Color.Fuschia),
                new Person("Eugenie", new DateTime(1979, 5, 5), Color.Gray),
                new Person("Freddie", new DateTime(1980, 6, 30), Color.Green),
                new Person("Greta", new DateTime(1981, 7, 15), Color.Lime),
                new Person("Harold", new DateTime(1982, 8, 10), Color.Maroon),
                new Person("Irene", new DateTime(1983, 9, 25), Color.Navy),
                new Person("Jonathan", new DateTime(1984, 10, 10), Color.Olive),
                new Person("Kathy", new DateTime(1985, 11, 20), Color.Purple),
                new Person("Larry", new DateTime(1986, 12, 5), Color.Red),
                new Person("Monica", new DateTime(1975, 1, 5), Color.Silver),
                new Person("Nick", new DateTime(1976, 2, 10), Color.Teal),
                new Person("Olive", new DateTime(1977, 3, 20), Color.White),
                new Person("Pendleton", new DateTime(1978, 4, 10), Color.Yellow),
                new Person("Queenie", new DateTime(1979, 5, 15), Color.Aqua),
                new Person("Rob", new DateTime(1980, 6, 30), Color.Blue),
                new Person("Sally", new DateTime(1981, 7, 5), Color.Fuschia),
                new Person("Timothy", new DateTime(1982, 8, 30), Color.Green),
                new Person("Uma", new DateTime(1983, 9, 10), Color.Lime),
                new Person("Victor", new DateTime(1984, 10, 20), Color.Maroon),
                new Person("Wendy", new DateTime(1985, 11, 5), Color.Navy),
                new Person("Xavier", new DateTime(1986, 12, 30), Color.Olive),
                new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple),
                new Person("Zachary", new DateTime(1988, 2, 5), Color.Red)
            };

            _leftListView = new ListView
            {
                BackgroundColor = Color.Navy,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                //IsPullToRefreshEnabled = 
                VerticalOptions = LayoutOptions.Fill,
                ItemsSource = _people,
                ItemTemplate = new DataTemplate(() =>
                {
                    // Create views with bindings for displaying each property.
                    Label nameLabel = new Label();
                    nameLabel.SetBinding(Label.TextProperty, "Name");
                    nameLabel.BackgroundColor = Color.Default;
                    nameLabel.TextColor = Color.Default;
                    nameLabel.FontAttributes = FontAttributes.Bold;

                    Label birthdayLabel = new Label();
                    birthdayLabel.SetBinding(Label.TextProperty,
                        new Binding("Birthday", BindingMode.OneWay, 
                                    null, null, "Born {0:d}"));

                    BoxView boxView = new BoxView();
                    boxView.SetBinding(BoxView.ColorProperty, "FavoriteColor");

                    // Return an assembled ViewCell.
                    return new ViewCell
                    {
                        View = new StackLayout
                        {
                            BackgroundColor = Color.Default,
                            IsClippedToBounds = true,
                            Padding = new Thickness(0, 5),
                            Orientation = StackOrientation.Horizontal,
                            Children = 
                            {
                                boxView,
                                new StackLayout
                                {
                                    BackgroundColor = Color.Default,
                                    VerticalOptions = LayoutOptions.Center,
                                    Spacing = 0,
                                    Children = 
                                    {
                                        nameLabel,
                                        birthdayLabel
                                    }
                                }
                            }
                        }
                    };
                })
            };

            _leftScrollView = new ScrollView
            {
                BackgroundColor = Color.Maroon,
                Content = _leftListView,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                IsClippedToBounds = true,
                Orientation = ScrollOrientation.Vertical,
                VerticalOptions = LayoutOptions.Fill
            };

            _topLeftButtonGrid = new Grid
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                ColumnDefinitions =
                {
                    new ColumnDefinition {Width = GridLength.Auto},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = GridLength.Auto} 
                },
                RowDefinitions =
                {
                    new RowDefinition {Height = GridLength.Auto}
                }
            };

            _topLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Olive,
                Text = "Left",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Fill
                //,
                //Command = new DelegateCommand(OnLeftButton)
            }, 0, 1, 0, 1);

            _topLeftButtonGrid.Children.Add(new Label
            {
                BackgroundColor = Color.Lime,
                FontAttributes = FontAttributes.Bold,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                Text = "Left panel title",
                YAlign = TextAlignment.Center,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Fill
            }, 0, 3, 0, 1);

            _topLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Pink,
                Text = "Right",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Fill
            }, 2, 3, 0, 1);

            _bottomLeftButtonGrid = new Grid
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.End,
                ColumnDefinitions =
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)} 
                },
                RowDefinitions =
                {
                    new RowDefinition {Height = GridLength.Auto}
                }
            };

            _bottomLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Purple,
                Text = "1",
                HorizontalOptions = LayoutOptions.Center
            }, 0, 1, 0, 1);
            _bottomLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Red,
                Text = "2",
                HorizontalOptions = LayoutOptions.Center
            }, 1, 2, 0, 1);
            _bottomLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Teal,
                Text = "3",
                HorizontalOptions = LayoutOptions.Center
            }, 2, 3, 0, 1);
            _bottomLeftButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Silver,
                Text = "4",
                HorizontalOptions = LayoutOptions.Center
            }, 3, 4, 0, 1);


            _leftOutermostVerticalStackLayout = new StackLayout
            {
                BackgroundColor = Color.Blue,
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Orientation = StackOrientation.Vertical,
                VerticalOptions = LayoutOptions.Fill,
                Children =
                {
                    _topLeftButtonGrid,
                    _leftScrollView,
                    _bottomLeftButtonGrid
                }
            };

            _leftScrollView.IsClippedToBounds = true; // workaround for Xamarin.Android bug

            //==============================================================================================
            // Right part of screen
            //==============================================================================================
            _rightListView = new ListView
            {
                BackgroundColor = Color.Navy,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                //IsPullToRefreshEnabled = 
                VerticalOptions = LayoutOptions.Fill,
                ItemsSource = _people,
                ItemTemplate = new DataTemplate(() =>
                {
                    return CreateViewCell();
                })
            };

            _rightScrollView = new ScrollView
            {
                BackgroundColor = Color.Maroon,
                Content = _rightListView,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                IsClippedToBounds = true,
                Orientation = ScrollOrientation.Vertical,
                VerticalOptions = LayoutOptions.Fill
            };

            _topRightButtonGrid = new Grid
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                ColumnDefinitions =
                {
                    new ColumnDefinition {Width = GridLength.Auto},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = GridLength.Auto} 
                },
                RowDefinitions =
                {
                    new RowDefinition {Height = GridLength.Auto}
                }
            };

            _topRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Olive,
                Text = "Left",
                HorizontalOptions = LayoutOptions.Center
            }, 0, 1, 0, 1);

            _topRightButtonGrid.Children.Add(new Label
            {
                BackgroundColor = Color.Lime,
                Text = "Details of item selected on left",
                FontAttributes = FontAttributes.Bold,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center
            }, 0, 3, 0, 1);

            _topRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Pink,
                Text = "Right",
                HorizontalOptions = LayoutOptions.Center
            }, 2, 3, 0, 1);

            _bottomRightButtonGrid = new Grid
            {
                BackgroundColor = Color.Green,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.End,
                ColumnDefinitions =
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)} 
                },
                RowDefinitions =
                {
                    new RowDefinition {Height = GridLength.Auto}
                }
            };

            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Purple,
                Text = "1",
                HorizontalOptions = LayoutOptions.Center
            }, 0, 1, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Red,
                Text = "2",
                HorizontalOptions = LayoutOptions.Center
            }, 1, 2, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Teal,
                Text = "3",
                HorizontalOptions = LayoutOptions.Center
            }, 2, 3, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Silver,
                Text = "4",
                HorizontalOptions = LayoutOptions.Center
            }, 3, 4, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Purple,
                Text = "5",
                HorizontalOptions = LayoutOptions.Center
            }, 4, 5, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Red,
                Text = "6",
                HorizontalOptions = LayoutOptions.Center
            }, 5, 6, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Teal,
                Text = "7",
                HorizontalOptions = LayoutOptions.Center
            }, 6, 7, 0, 1);
            _bottomRightButtonGrid.Children.Add(new Button
            {
                BackgroundColor = Color.Silver,
                Text = "8",
                HorizontalOptions = LayoutOptions.Center
            }, 7, 8, 0, 1);

            _rightOutermostVerticalStackLayout = new StackLayout
            {
                BackgroundColor = Color.Fuchsia,
                HorizontalOptions = LayoutOptions.EndAndExpand,
                Orientation = StackOrientation.Vertical,
                VerticalOptions = LayoutOptions.Fill,
                Children =
                {
                    _topRightButtonGrid,
                    _rightScrollView,
                    _bottomRightButtonGrid
                }
            };

            _outermostHorizontalStackLayout = new StackLayout
            {
                BackgroundColor = Color.Aqua,
                HorizontalOptions = LayoutOptions.Fill,
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.Fill,
                Children =
                {
                    _leftOutermostVerticalStackLayout,
                    _rightOutermostVerticalStackLayout
                }
            };

            this.Content = _outermostHorizontalStackLayout;

            NavigationPage.SetHasBackButton(this, true);
        }

        private Cell CreateViewCell()
        {
            _leftScrollView.IsClippedToBounds = true;

            // Create views with bindings for displaying each property.
            Label nameLabel = new Label();
            nameLabel.SetBinding(Label.TextProperty, "Name");
            nameLabel.BackgroundColor = Color.Default;
            nameLabel.TextColor = Color.Default;
            nameLabel.FontAttributes = FontAttributes.Bold;

            Label birthdayLabel = new Label();
            birthdayLabel.SetBinding(Label.TextProperty,
                new Binding("Birthday", BindingMode.OneWay,
                    null, null, "Born {0:d}"));

            BoxView boxView = new BoxView();
            boxView.SetBinding(BoxView.ColorProperty, "FavoriteColor");

            // Return an assembled ViewCell.
            return new ViewCell
            {
                View = new StackLayout
                {
                    BackgroundColor = Color.Default,
                    Padding = new Thickness(0, 5),
                    Orientation = StackOrientation.Horizontal,
                    Children =
                    {
                        boxView,
                        new StackLayout
                        {
                            BackgroundColor = Color.Default,
                            VerticalOptions = LayoutOptions.Center,
                            Spacing = 0,
                            Children =
                            {
                                nameLabel,
                                birthdayLabel
                            }
                        }
                    }
                }
            };
        }

    } // public class PageDemonstratingScrollBoundsIssue : ContentPage

} // namespace ViewsUsingXamarinForms

// eof
Comment 5 Tomasz Bitowt 2015-05-22 03:55:50 UTC
This renderer fixes this bug on Android:

[assembly: ExportRenderer(typeof(ScrollView), typeof(CustomScrollViewRenderer))]
namespace RFA.Droid.Renderers
{
	public class CustomScrollViewRenderer : ScrollViewRenderer
	{
		public override void Draw(Canvas canvas)
		{
			canvas.ClipRect(canvas.ClipBounds);

			base.Draw(canvas);
		}
	}
}