How to embed ZXing scanner in PageRenderer/Fragment/View into Xamarin.Forms ContentPage?

vlad27vlad27 Member
edited January 12 in Xamarin.Forms

Hi Everyone!

I want to have ZXing.Net.Mobile barcodes scanner with a custom overlay and some UI components implemented in Xamarin.Forms in one View.
Is it possible at all?

I assumed that this is possible and implemented this:
1. Android.Support.V4.App.FragmentActivity with a custom overlay for ZXing scanner.
2. Android Activity with a custom overlay for ZXing scanner.
3. Android PageRenderer with a custom overlay for ZXing scanner.

I was able to run all these variants, but I was not able to mix them with Xamarin.Forms UI.

Example:
Here is my ZXingScannerRendererPage.xaml in the shared project (attached pic). I want to have "TEST BUTTON" button above Zxing Scanner view.

But when I run the application with PageRenderer I can see for a second my layout with "TEST BUTTON" and then view jumps to ZXing scanner.
When I "press back" button, I can see my XAML layout with "TEST BUTTON". I think ZXing opens a new activity or something.

So, what I need is:
1. Embed ZXing.Net.Mobile barcodes scanner with custom overlay into my Xamarin.Forms ContentPage along with other Xamarin.Forms UI.
or
2. Embed Xamarin.Forms UI above view with ZXing.Net.Mobile barcodes scanner with a custom overlay.

How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?

Thanks!

Best Answer

  • JimmyPun.6276JimmyPun.6276 US ✭✭
    Accepted Answer

    https://github.com/Redth/ZXing.Net.Mobile/blob/master/Source/ZXing.Net.Mobile.Forms/ZXingDefaultOverlay.cs> @vlad27 said:

    Hi Everyone!

    I want to have ZXing.Net.Mobile barcodes scanner with a custom overlay and some UI components implemented in Xamarin.Forms in one View.
    Is it possible at all?

    I assumed that this is possible and implemented this:
    1. Android.Support.V4.App.FragmentActivity with a custom overlay for ZXing scanner.
    2. Android Activity with a custom overlay for ZXing scanner.
    3. Android PageRenderer with a custom overlay for ZXing scanner.

    I was able to run all these variants, but I was not able to mix them with Xamarin.Forms UI.

    Example:
    Here is my ZXingScannerRendererPage.xaml in the shared project (attached pic). I want to have "TEST BUTTON" button above Zxing Scanner view.

    But when I run the application with PageRenderer I can see for a second my layout with "TEST BUTTON" and then view jumps to ZXing scanner.
    When I "press back" button, I can see my XAML layout with "TEST BUTTON". I think ZXing opens a new activity or something.

    So, what I need is:
    1. Embed ZXing.Net.Mobile barcodes scanner with custom overlay into my Xamarin.Forms ContentPage along with other Xamarin.Forms UI.
    or
    2. Embed Xamarin.Forms UI above view with ZXing.Net.Mobile barcodes scanner with a custom overlay.

    How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?

    Thanks!

    You can check ZXingDefaultOverlay, maybe create a custom layout is possible

    For my usage to the custom layout, I created a custom page first.

    public class MyZXingScannerPage : ZXingScannerPage
        {
        public event Action ExitAction;
    
        public MyZXingScannerPage(MobileBarcodeScanningOptions options = null, View customOverlay = null) :             base(options, customOverlay)
        {
    
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
    
        }
        protected override bool OnBackButtonPressed()
        {
            if (ExitAction != null)
            {
                ExitAction.Invoke();
                return true;
            }
            else
            {
                return false;
            }
        }
    
    }
    

    Then, I push the page as Modal Page and with the layout

        ZXingScannerView zxing = new ZXingScannerView
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
    
            ZXingDefaultOverlay overlay = new ZXingDefaultOverlay
            {
                TopText = "Top text",
                ShowFlashButton = false,
            }; 
            var scanPage = new MyZXingScannerPage(new ZXing.Mobile.MobileBarcodeScanningOptions
            {
                DelayBetweenContinuousScans = 3000
            }, customOverlay: overlay);
            scanPage.ExitAction += async () =>
            {
    
            };
            NavigationPage.SetHasNavigationBar(scanPage, false);
            scanPage.OnScanResult += async (result) =>
            {
    
    
            };
    
            await Navigation.PushModalAsync(scanPage);
    

    Or another choice is that I use this library to doing this.
    https://github.com/JimmyPun610/BarcodeScanner.XF

Answers

  • JimmyPun.6276JimmyPun.6276 USMember ✭✭
    Accepted Answer

    https://github.com/Redth/ZXing.Net.Mobile/blob/master/Source/ZXing.Net.Mobile.Forms/ZXingDefaultOverlay.cs> @vlad27 said:

    Hi Everyone!

    I want to have ZXing.Net.Mobile barcodes scanner with a custom overlay and some UI components implemented in Xamarin.Forms in one View.
    Is it possible at all?

    I assumed that this is possible and implemented this:
    1. Android.Support.V4.App.FragmentActivity with a custom overlay for ZXing scanner.
    2. Android Activity with a custom overlay for ZXing scanner.
    3. Android PageRenderer with a custom overlay for ZXing scanner.

    I was able to run all these variants, but I was not able to mix them with Xamarin.Forms UI.

    Example:
    Here is my ZXingScannerRendererPage.xaml in the shared project (attached pic). I want to have "TEST BUTTON" button above Zxing Scanner view.

    But when I run the application with PageRenderer I can see for a second my layout with "TEST BUTTON" and then view jumps to ZXing scanner.
    When I "press back" button, I can see my XAML layout with "TEST BUTTON". I think ZXing opens a new activity or something.

    So, what I need is:
    1. Embed ZXing.Net.Mobile barcodes scanner with custom overlay into my Xamarin.Forms ContentPage along with other Xamarin.Forms UI.
    or
    2. Embed Xamarin.Forms UI above view with ZXing.Net.Mobile barcodes scanner with a custom overlay.

    How to accomplish this? Is it possible to embed PageRenderer/Fragment/View into Xamarin.Forms XAML?

    Thanks!

    You can check ZXingDefaultOverlay, maybe create a custom layout is possible

    For my usage to the custom layout, I created a custom page first.

    public class MyZXingScannerPage : ZXingScannerPage
        {
        public event Action ExitAction;
    
        public MyZXingScannerPage(MobileBarcodeScanningOptions options = null, View customOverlay = null) :             base(options, customOverlay)
        {
    
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
    
        }
        protected override bool OnBackButtonPressed()
        {
            if (ExitAction != null)
            {
                ExitAction.Invoke();
                return true;
            }
            else
            {
                return false;
            }
        }
    
    }
    

    Then, I push the page as Modal Page and with the layout

        ZXingScannerView zxing = new ZXingScannerView
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
    
            ZXingDefaultOverlay overlay = new ZXingDefaultOverlay
            {
                TopText = "Top text",
                ShowFlashButton = false,
            }; 
            var scanPage = new MyZXingScannerPage(new ZXing.Mobile.MobileBarcodeScanningOptions
            {
                DelayBetweenContinuousScans = 3000
            }, customOverlay: overlay);
            scanPage.ExitAction += async () =>
            {
    
            };
            NavigationPage.SetHasNavigationBar(scanPage, false);
            scanPage.OnScanResult += async (result) =>
            {
    
    
            };
    
            await Navigation.PushModalAsync(scanPage);
    

    Or another choice is that I use this library to doing this.
    https://github.com/JimmyPun610/BarcodeScanner.XF

Sign In or Register to comment.