Relative Layout responsive iOS vs Android

HamittirpanHamittirpan Member ✭✭✭

Hi everyone !

I want to get a screenshot using the relative layout on the page.cs. side.My goal is to get the same image in each screen size.My problem is that my codes work fine on the ios side but bad on the android side. How do I fix this? Here are my codes and screenshots;

iOS Screenshot

Android Screenshot

My codes

using System;
using GulaylarMenuDesign.Services;
using Xamarin.Essentials;
using Xamarin.Forms;
using ZXing.Net.Mobile.Forms;

namespace GulaylarMenuDesign.Views
{
    public partial class BarcodePage : ContentPage
    {
        public BarcodePage()
        {
            InitializeComponent();
            timer(time: 60);
            GenerateBarcode();
        }

        async void clipboardTapped(object sender, EventArgs args)
        {
            if (_lblCode.Text != null)
            {
                if (Clipboard.HasText)
                {
                    await Clipboard.SetTextAsync(_lblCode.Text);
                }
                var text = await Clipboard.GetTextAsync();
            }
        }

        #region Timer
        private void timer(int time)
        {
            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
            {
                time -= 1;
                _lblTime.Text = String.Format("{0}", time);

                if (time == 0)
                {
                    time = 60;
                    GenerateBarcode();
                }
                return true;
            });
        }
        #endregion

        #region Barcode Generate
        public async void GenerateBarcode()
        {
            ZXingBarcodeImageView barcode = new ZXingBarcodeImageView
            {
                AutomationId = "zxingBarcodeImageView",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
            };
            string CustomerNoForBarcode = "";
            ServiceManager service = new ServiceManager();

            CustomerNoForBarcode = await service.GetCustomerNo(Helpers.Settings.GeneralSettingsPass);

            Random rnd = new Random();
            string campaignCode = rnd.Next(100000, 999999).ToString();
            string special1 = CustomerNoForBarcode.Replace("M", "").Replace("\"", "") + campaignCode;

            barcode.BarcodeValue = special1.Substring(0, 4) + "  " + special1.Substring(4, 4) + "  " + special1.Substring(8, 4);
            barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
            barcode.BarcodeOptions.Width = 300;
            barcode.BarcodeOptions.Height = 300;

            RelativeLayout layout = new RelativeLayout();

            _lblTimeText.FontSize = 17;
            _lblTimeText.HorizontalTextAlignment = TextAlignment.Center;
            _lblTimeText.WidthRequest = 300;
            _lblTimeText.FontAttributes = FontAttributes.Bold;

            _lblTime.FontSize = 30;
            _lblTime.WidthRequest = 200;

            _lblCode.Text = barcode.BarcodeValue;
            _lblCode.FontSize = 24;
            _lblCode.WidthRequest = 200;

            _lblAttention.FontSize = 15;
            _lblAttention.WidthRequest = 300;
            _lblAttention.HeightRequest = 60;
            _lblAttention.HorizontalTextAlignment = TextAlignment.Center;

            layout.Children.Add(_lblTimeText, Constraint.Constant((Width - 300) / 2), Constraint.Constant(10));
            layout.Children.Add(_lblTime, Constraint.Constant((Width - 200) / 2), Constraint.Constant(70));

            layout.Children.Add(barcode,
                Constraint.RelativeToParent((parent) => { return (parent.Width - 300) / 2 ; }),
                Constraint.RelativeToParent((parent) => { return (parent.Height - 350) / 2; }));

            layout.Children.Add(_lblCode,
                Constraint.RelativeToParent((parent) => { return (parent.Width - 200) / 2; }),
                Constraint.RelativeToParent((parent) => { return parent.Height - 160; }));

            layout.Children.Add(copyButton,
                Constraint.RelativeToParent((parent) => { return ((parent.Width - 40) / 2) + 120;}),
                Constraint.RelativeToParent((parent) => { return parent.Height - 165; }));

            layout.Children.Add(_lblAttention,
                Constraint.RelativeToParent((parent) => { return (parent.Width - 300) / 2; }),
                Constraint.RelativeToParent((parent) => { return parent.Height - 90; }));

            Content = layout;
        }
        #endregion
    }
}
Tagged:

Best Answer

  • ColeXColeX Xamurai
    edited September 20 Accepted Answer
    1. You could specify different size for ZXingBarcodeImageView on android and iOS , code like below.

          var size = Device.RuntimePlatform == Device.Android ? 400 : 300;
          barcode.BarcodeOptions.Width = size;
          barcode.BarcodeOptions.Height = size;
      
    2. Do not use fixed value on the size and Constraint setting , the code used on RelativeLayout should describe the position and size between parent or sibling views , check below code

          _lblCode.WidthRequest = Width- 100;   //Width equals to screen with - 5
      
          layout.Children.Add(_lblCode,
              Constraint.RelativeToParent((parent) => { return (parent.Width - _lblCode.Width) / 2; }),   //  center of parent in horizontal
              Constraint.RelativeToView(barcode, (parent, view) => { return view.Y+view.Height; }));  //at bottom of the barcodeImage
      

    Refer https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout.

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited September 20 Accepted Answer
    1. You could specify different size for ZXingBarcodeImageView on android and iOS , code like below.

          var size = Device.RuntimePlatform == Device.Android ? 400 : 300;
          barcode.BarcodeOptions.Width = size;
          barcode.BarcodeOptions.Height = size;
      
    2. Do not use fixed value on the size and Constraint setting , the code used on RelativeLayout should describe the position and size between parent or sibling views , check below code

          _lblCode.WidthRequest = Width- 100;   //Width equals to screen with - 5
      
          layout.Children.Add(_lblCode,
              Constraint.RelativeToParent((parent) => { return (parent.Width - _lblCode.Width) / 2; }),   //  center of parent in horizontal
              Constraint.RelativeToView(barcode, (parent, view) => { return view.Y+view.Height; }));  //at bottom of the barcodeImage
      

    Refer https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout.

  • HamittirpanHamittirpan Member ✭✭✭
    edited September 20

    @ColeX Qr code on the screen changes every 60 seconds. When the timer is equal to zero, when the barcode disappears, the error occurs due to RelativeToView. Because, for about a second, the barcode doesn't appear.

  • ColeXColeX Member, Xamarin Team Xamurai

    @Hamittirpan said:
    @ColeX Qr code on the screen changes every 60 seconds. When the timer is equal to zero, when the barcode disappears, the error occurs due to RelativeToView. Because, for about a second, the barcode doesn't appear.

    ok , so you could describe the position relationship between parent instead of barcode , but it's better not to use fixed number.

Sign In or Register to comment.