Articles in this section
Category / Section

How to use a notch area for Xamarin.Forms ListView?

1 min read

You can use the notch area in both Android and iOS for Xamarin.Forms Xamarin.Forms SfListView.

Android

C#

To use the notch area , set the LayoutInDisplayCutoutMode to ShortEdge in the MainActivity.cs.

namespace ListViewXamarin.Droid
{
    [Activity(Label = "ListViewXamarin", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
 
            base.OnCreate(savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
 
            // The window is allowed to extend into the cutout area but only on the short edges of the screen.
            Window.Attributes.LayoutInDisplayCutoutMode = LayoutInDisplayCutoutMode.ShortEdges;
 
            LoadApplication(new App());
        }
    }
}

 

Note:

The DisplayCutout supports API 9 and greater. Refer to the document to learn more about display cutout support for android from here.

iOS

XAML

To enable the safe area for the iOS platform, set the Page.UseSafeArea to True in the Xamarin.Forms.PlatformConfiguration.iOSSpecific namespace.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true"
             Title="Safe Area">
    
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

 

Note:

The SafeArea supports iOS 11 and greater. Refer to the document to learn more about safe area from here.

View sample in GitHub

Android

Android notch area Xamarin.Forms SfListView

iOS

iOS safe Area Xamarin.Forms SfListView



Conclusion

I hope you enjoyed learning how to use a notch area for Xamarin.Forms ListView.

You can refer to our Xamarin ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin ListView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied