How to display an element at the bottom not in the full width of the screen (Android)

валера карманов 396 Reputation points
2024-10-15T09:47:54.85+00:00

2024-10-15_12-45-16

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,596 questions
0 comments No comments
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,011 Reputation points Microsoft Vendor
    2024-10-16T02:06:35.89+00:00

    Hello,

    You could refer to the following steps and sample code to open the bottom popup on Android platform.

    Step 1. Create the static class that calls out the bottom popup under the Platfroms/Android file.

    // Here you need to replace the namespace Android with another name, otherwise Android.Resource.Id.Content will have a namespace conflict.
    namespace MauiApp91.Platforms.Droid
    {
        public static class BottomPopupHelper
        {
            // These three parameters represent the page on which the method is called, the popup window to be called out, and whether or not it can be Dismissed.
            public static void ShowBottomSheet(this Page page, IView bottomSheetContent, bool dimDismiss)
            { 
                var bottomSheetDialog = new BottomSheetDialog(Platform.CurrentActivity?.Window?.DecorView.FindViewById(Android.Resource.Id.Content)?.RootView?.Context); 
                bottomSheetDialog.SetContentView(bottomSheetContent.ToPlatform(page.Handler?.MauiContext ?? throw new Exception("MauiContext is null"))); 
                bottomSheetDialog.Behavior.Hideable = dimDismiss; 
                bottomSheetDialog.Behavior.FitToContents = true; 
                bottomSheetDialog.Show(); 
            }
        }
    }
    

    Step 2. Call this static method in a Maui page, for example in a button click event.

    #if ANDROID
                BottomPopupHelper.ShowBottomSheet(this, new BottomPopupPage(),true);
    #endif
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.