Layout Customizations in Xamarin.Android popup layout

8 Dec 202116 minutes to read

The SfPopupLayout supports two types of SfPopupLayout.PopupView.AppearanceMode. By default,AppearanceMode.OneButton is set. You can change the appearance of the SfPopupLayout by using the SfPopupLayout.PopupView.AppearanceMode property.

The two different appearance modes in the SfPopupLayout are as follows:

Modes	Description
OneButton	Shows the SfPopupLayout with one button in the footer view. This is the default value.
TwoButton	Shows the SfPopupLayout with two buttons in the footer view.

Pop-up with one button in the footer

In the following code example, the SfPopupLayout.PopupView.AppearanceMode property is set as OneButton which displays only the Accept button in the footer view.

C#

using Syncfusion.Android.PopupLayout;

namespace GettingStarted
{
    public class MainActivity : Activity 
    {
       SfPopupLayout popupLayout;
       Button showPopupButton;
       LinearLayout layout;

        protected override void OnCreate (Bundle bundle) 
        {
            base.OnCreate (bundle); 
            layout = new LinearLayout(this);
            layout.Orientation = Orientation.Vertical;
            layout.SetBackgroundColor(Color.White);

            showPopupButton = new Button(this);
            showPopupButton.Click += ShowPopupButton_Click;
            showPopupButton.SetTextColor(Color.White);
            showPopupButton.Text = "Click to show Popup";

            layout.AddView(showPopupButton, ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);

            // Setting the AppearanceMode as OneButton.
            popupLayout.PopupView.AppearanceMode = AppearanceMode.OneButton;
            popupLayout = new SfPopupLayout(this);
            popupLayout.Content = layout;

            SetContentView(popupLayout);
        } 

        private void ShowPopupButton_Click(object sender, System.EventArgs e)
        {
            popupLayout.Show();
        }
    }
}

Executing the above codes renders the following output in an android device.

Pop-up with two buttons in the footer

In the following code example, the SfPopupLayout.PopupView.AppearanceMode property is set as TwoButton which displays both Decline button and Accept button in the footer view.

C#

using Syncfusion.Android.PopupLayout;

namespace GettingStarted
{
    public class MainActivity : Activity 
    {
       SfPopupLayout popupLayout;
       Button showPopupButton;
       LinearLayout layout;

        protected override void OnCreate (Bundle bundle) 
        {
            base.OnCreate (bundle); 
            layout = new LinearLayout(this);
            layout.Orientation = Orientation.Vertical;
            layout.SetBackgroundColor(Color.White);

            showPopupButton = new Button(this);
            showPopupButton.Click += ShowPopupButton_Click;
            showPopupButton.SetTextColor(Color.White);
            showPopupButton.Text = "Click to show Popup";

            layout.AddView(showPopupButton, ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);

            // Setting the AppearanceMode as TwoButton.
            popupLayout.PopupView.AppearanceMode = AppearanceMode.TwoButton;
            popupLayout = new SfPopupLayout(this);
            popupLayout.Content = layout;

            SetContentView(popupLayout);
        } 

        private void ShowPopupButton_Click(object sender, System.EventArgs e)
        {
            popupLayout.Show();
        }
    }
}

Executing the above codes renders the following output in an android device.

Customizing pop-up layouts

You can customize the entire view of the pop-up by loading the templates or custom views for the header, body, and footer.

Header customization

Any view can be added as the header content using the SfPopupLayout.PopupView.HeaderView property to refresh it.

Refer to the following code example in which a TextView is added as a header content.

C#

using Syncfusion.Android.PopupLayout;

namespace GettingStarted
{
    public class MainActivity : Activity 
    {
       SfPopupLayout popupLayout;
       Button showPopupButton;
       LinearLayout layout;
       TextView headerView;

        protected override void OnCreate (Bundle bundle) 
        {
            base.OnCreate (bundle); 
            layout = new LinearLayout(this);
            layout.Orientation = Orientation.Vertical;
            layout.SetBackgroundColor(Color.White);

            showPopupButton = new Button(this);
            showPopupButton.Click += ShowPopupButton_Click;
            showPopupButton.SetTextColor(Color.White);
            showPopupButton.Text = "Click to show Popup";

            layout.AddView(showPopupButton, ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);

            headerView = new TextView(this) { Text = "Customized Header"};
            headerView.Gravity = GravityFlags.Center;
            headerView.TextSize = 16;
            headerView.SetBackgroundColor(Color.Rgb(0, 0, 255));
            headerView.SetTextColor(Color.Black);

            popupLayout = new SfPopupLayout(this);
            popupLayout.PopupView.ShowCloseButton = false;
            popupLayout.Content = layout;

            // Adding Header view of the SfPopupLayout.
            popupLayout.PopupView.HeaderView = headerView;

            SetContentView(popupLayout);
        } 

        private void ShowPopupButton_Click(object sender, System.EventArgs e)
        {
            popupLayout.Show();
        }
    }
}

Executing the above codes renders the following output in an android device.

Footer customization

Any view can be added as the footer content using the SfPopupLayout.PopupView.FooterView property to refresh it.

Refer to the following code example in which a TextView is added as a footer content.

C#

using Syncfusion.Android.PopupLayout;

namespace GettingStarted
{
    public class MainActivity : Activity 
    {
       SfPopupLayout popupLayout;
       Button showPopupButton;
       LinearLayout layout;
       TextView footerView;

        protected override void OnCreate (Bundle bundle) 
        {
            base.OnCreate (bundle); 
            layout = new LinearLayout(this);
            layout.Orientation = Orientation.Vertical;
            layout.SetBackgroundColor(Color.White);

            showPopupButton = new Button(this);
            showPopupButton.Click += ShowPopupButton_Click;
            showPopupButton.SetTextColor(Color.White);
            showPopupButton.Text = "Click to show Popup";

            layout.AddView(showPopupButton, ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);

            footerView = new TextView(this) { Text = "Customized Footer"};
            footerView.Gravity = GravityFlags.Center;
            footerView.TextSize = 16;
            footerView.SetBackgroundColor(Color.Rgb(0,0,255));
            footerView.SetTextColor(Color.Black);

            popupLayout = new SfPopupLayout(this);
            popupLayout.Content = layout;

            // Adding Footer view of the SfPopupLayout
            popupLayout.PopupView.FooterView = footerView;

            SetContentView(popupLayout);
        } 

        private void ShowPopupButton_Click(object sender, System.EventArgs e)
        {
            popupLayout.Show();
        }
    }
}

Executing the above codes renders the following output in an android device.

Styles

The SfPopupLayout applies style for all of elements by using the SfPopupLayout.PopupView.PopupStyle property.

Customizing header elements

The SfPopupLayout allows customizing the header elements with various available header customizations as follows:

Property	Description
SfPopupLayout.PopupView.PopupStyle.HeaderBackgroundColor	Gets or sets the background color of the header.
SfPopupLayout.PopupView.PopupStyle.HeaderTypeface	Gets or sets the font style of the header title.
SfPopupLayout.PopupView.PopupStyle.HeaderTypefaceStyle	Gets or sets the font attribute of the header title.
SfPopupLayout.PopupView.PopupStyle.HeaderTextSize	Gets or sets the text size of the header title.
SfPopupLayout.PopupView.PopupStyle.HeaderTextGravity	Gets or sets the text alignment of the header.
SfPopupLayout.PopupView.PopupStyle.HeaderTextColor	Gets or sets the text color for the header title.

Refer to the following code example for customizing the header elements.

C#

//MainActivity.cs

protected override void OnCreate(Bundle bundle)
{
	....
    popupLayout.PopupView.PopupStyle.HeaderBackgroundColor = Color.DarkGray;
    popupLayout.PopupView.PopupStyle.HeaderTypeface = Typeface.DefaultBold;
    popupLayout.PopupView.PopupStyle.HeaderTypefaceStyle = TypefaceStyle.Bold;
    popupLayout.PopupView.PopupStyle.HeaderTextSize = 25;
    popupLayout.PopupView.PopupStyle.HeaderTextGravity = GravityFlags.Center;
    popupLayout.PopupView.PopupStyle.HeaderTextColor = Color.White;
    SetContentView(popupLayout);
    ....
}

Executing the above codes renders the following output in an android device.

Customized header elements in Xamarin.Android popup layout

Customizing footer elements

The SfPopupLayout allows customizing the footer elements with various available footer customizations as follows:

Property	Description
SfPopupLayout.PopupView.PopupStyle.FooterBackgroundColor	Gets or sets the background color of the footer.
SfPopupLayout.PopupView.PopupStyle.AcceptButtonBackgroundColor	Gets or sets the background color of the Accept button in the footer.
SfPopupLayout.PopupView.PopupStyle.AcceptButtonTextColor	Gets or sets the foreground color of the Accept button in the footer.
SfPopupLayout.PopupView.PopupStyle.DeclineButtonBackgroundColor	Gets or sets the background color of the Decline button in the footer.
SfPopupLayout.PopupView.PopupStyle.DeclineButtonTextColor	Gets or sets the foreground color of the Decline button in the footer.

Refer to the following code example for customizing the footer elements.

C#

//MainActivity.cs

protected override void OnCreate(Bundle bundle)
{
	....
    // Setting the AppearanceMode as TwoButton.
    popupLayout.PopupView.AppearanceMode = AppearanceMode.TwoButton;

    // Footer customization
    popupLayout.PopupView.PopupStyle.FooterBackgroundColor = Color.LightGray;
    popupLayout.PopupView.PopupStyle.AcceptButtonBackgroundColor = Color.DarkGray;
    popupLayout.PopupView.PopupStyle.AcceptButtonTextColor = Color.White;
    popupLayout.PopupView.PopupStyle.DeclineButtonBackgroundColor = Color.DarkGray;
    popupLayout.PopupView.PopupStyle.DeclineButtonTextColor = Color.White;
    SetContentView(popupLayout);
    ....
}

Executing the above codes renders the following output in an android device.

Border customization

The SfPopupLayout allows customizing the border appearance with various available border customizations as follows:

Property	Description
SfPopupLayout.PopupView.PopupStyle.BorderColor	Gets or sets the border color for the PopupView.
SfPopupLayout.PopupView.PopupStyle.BorderThickness	Gets or sets the border thickness for the PopupView.
SfPopupLayout.PopupView.PopupStyle.CornerRadius	Gets or sets the corner radius for the PopupView.

Refer to the following code example for customizing the border elements.

C#

//MainActivity.cs

protected override void OnCreate(Bundle bundle)
{
	....
    popupLayout.PopupView.PopupStyle.BorderColor = Color.LightBlue;
    popupLayout.PopupView.PopupStyle.BorderThickness = 3;
    popupLayout.PopupView.PopupStyle.CornerRadius = 5;
    SetContentView(popupLayout);
    ....
}

Executing the above codes renders the following output in an android device.