Forum Xamarin.Android

White screen instead of UI elements on Android 2400x1080 only

I dont know where to start from, with solving the issue.
I have a single code base for iOS and Android application, and it all works OK, except for when the application is runing on a specific resolution (2400x1080) on a Android device. First view is login view and it works ok. After login in, the application loads 3 TabbedPages, and shows the first one. Here is where it all goes sideways, when I open another TabbedPages it is white, and only the bottom bar is visible. I can go back to the first TabbedPages and it's UI elements are visible, probably because they where loaded on the first appearing.

I found a way to force the views to show. That happens if I set a Navigation.PushPopupAsync(SomePopupPage) in the OnAppearing() method of a TabbedPages that is breaking. This will make all elements visible again.

If I change the screen resolution to 1600x720 or 3200x1440 the application works ok again.

Any idea where to start looking for answers?
P.S. There is no log that indicates anything is wrong with the application.

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    when I open another TabbedPages it is white, and only the bottom bar is visible

    Hi, do you use three tabbedPages or the tabbedpage have three tabs? I created a baisc demo to test the function on an emulator with the 2400x1080 resolution, it works fine. How do you achieve the navigation? Could you post the related code? It'll help to reproduce the issue to get the cause.

    And if you use three tabbedPages to display the content, maybe you can try the Shell template.


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • Hey @Yelinzh Here is how The App class looks like

    `namespace Project.Shared
    {
    public class App : Application
    {
    public static INavigation Navigation { get; private set; }

        BottomBarPage bottomBarPage;
    
        public App()
        {
            Register();
            Startup();
        }
    
        private void Startup () {
            if (!Settings.RegisterStatus)
            {
                MainPage = new RegisterView(this);
            }
            else
            {
                MainPage = ShowMainPage();
            }
        }
    
        public BottomBarPage ShowMainPage()
        {
    
            bottomBarPage = new BottomBarPage();
            bottomBarPage.BarTextColor = Color.Black.ToFormsColor(); // Setting Color of selected Text and Icon
            bottomBarPage.BarBackgroundColor = Color.White.ToFormsColor();
            bottomBarPage.SelectedTabColor = Color.StartButton.ToFormsColor();
            bottomBarPage.UnselectedTabColor = Color.Gray.ToFormsColor();
            string[] tabTitles = { Localization.tab1Title, Localization.tab2Title, Localization.tab3Title };
            string[] tabIcons = { "ic_access_time_black_.png", "ic_date_range_black_.png", "ic_tab.png" };
    
            bottomBarPage.CurrentPageChanged += (object sender, System.EventArgs e) =>
            {
                var navigation = (sender as BottomBarPage).CurrentPage.Navigation;
                var stack = navigation.NavigationStack;
                var page = stack.FirstOrDefault(x => x is MenuPage);
                if (page != null)
                {
                    navigation.PopAsync();
                }
            };
    
            for (int i = 0; i < tabTitles.Length; ++i)
            {
                string title = tabTitles[i];
                FileImageSource icon = new FileImageSource { File = tabIcons[i] };
                NavigationPage tabPage;
                switch (i)
                {
                    default:
                        startView = new StartView(this);
                        tabPage = new NavigationPage(startView)
                        {
                            Icon = icon,
                            Title = title
                        };
                        break;
                    case 1:
                        SecondViewModel Model = new SecondViewModel();
                        tabPage = new NavigationPage(new SecondViewMainScreen(Model, this))
                        {
                            Icon = icon,
                            Title = title
                        };
                        break;
                    case 2:
                        SomeViewModel eModel = new SomeViewModel();
                        tabPage = new NavigationPage(new SomeView(eModel, this))
                        {
                            Icon = icon,
                            Title = title
                        };
                        break;
                }
                bottomBarPage.Children.Add(tabPage);
            }
    
            return bottomBarPage;
        }
    
        public void GoToRegister()
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                MainPage = new RegisterView(this);
            });
        }
    
        protected override void OnStart()
        {
            base.OnStart();
        }
    
        void Register()
        {
            Xamarin.Forms.DependencyService.Register<SomeRestService>();
            Xamarin.Forms.DependencyService.Register<HistoryService>();
            Xamarin.Forms.DependencyService.Register<TermService>();
        }
    
        protected override void OnSleep()
        {
            base.OnSleep();
        }
    
        protected override void OnResume()
        {
            base.OnResume();
        }
    

    }
    `

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Please don't do a lot work in the main thred. According to the code, you could add a bool property to detect the status of login to set the MainPage.

    public class App : Application
    {
        public static bool IsUserLoggedIn { get; set; }
    
        public App()
        {
            if (!IsUserLoggedIn)
            {
                MainPage = new NavigationPage(new LoginPage());
            }
            else
            {
                MainPage = new NavigationPage(new MainPage());
            }
        }
    }
    

    You could refer to this sample:
    https://github.com/xamarin/xamarin-forms-samples/blob/master/Navigation/LoginFlow/LoginNavigation/App.cs

    For the BottomBarPage, please move the initialization code to the construtor of the BottomBarPage.cs. You could refer to this doc:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

  • spire_jankulovskispire_jankulovski Member ✭✭

    Hi @Yelinzh, some time has passed, and I have tried your suggestions among a lot of other things like creating the view in C# instead of XAML, striping the functionalities so there would be only a simple UI elements, not doing any work on the main thread and so on.

    One thing I found useful is that if I have an Entry element and I set Focus() in OnAppearing() the view is shown when the keyboard is showing.

    My question to you is what does the keyboard showing do to the main view that contains the Entry, and can I do the same thing manually without showing the keyboard?

    I have tried some of the simple animation like this.Scale() and this.TranslateTo(), but they won't "redraw" the view like the keyboard showing does.
    Any thoughts are appreciated.

    Regards,

Sign In or Register to comment.