Layout Customizations

3 Sep 2020 / 16 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.

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.

    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.

    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.

    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.