Unplanned
Last Updated: 21 Jul 2022 20:56 by ADMIN
Jason
Created on: 21 Jul 2022 19:19
Category: Barcode
Type: Feature Request
1
Custom Logo in QR code

Hi Team,

We would love to be able to have support for placing a small logo in the middle of the QR code. Similar to the cross in the Swiss QRCode, but of our own design.

Thank you,

Jason

1 comment
ADMIN
Lance | Senior Manager Technical Support
Posted on: 21 Jul 2022 20:56

Hi Jason,

Although this isn't a built-in feature, you can rely on error correction built into QR symbology and layer a small image on top of the QR code.

Below is an example that shows a custom image in the middle of the QR code, but still works. Here's a screenshot at runtime (try scanning it now!).

Here is the XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:telerikBarcode="clr-namespace:Telerik.XamarinForms.Barcode;assembly=Telerik.XamarinForms.Barcode"
             xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             mc:Ignorable="d"
             x:Class="ImageInBarcode.Portable.MainPage">

    <Grid>
        <telerikBarcode:RadBarcode x:Name="barcode"
                                   Value="https://docs.telerik.com/devtools/xamarin/introduction"
                                   WidthRequest="200"
                                   HeightRequest="200"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center">
            <telerikBarcode:RadBarcode.Symbology>
                <telerikBarcode:QRCode SizingMode="Stretch"
                                       CodeMode="Byte"
                                       ErrorCorrectionLevel="Q"
                                       AutoChecksum="False"/>
            </telerikBarcode:RadBarcode.Symbology>
        </telerikBarcode:RadBarcode>

        <!-- Small and center-oriented image -->
        <primitives:RadBorder BackgroundColor="White"
                              BorderThickness="0"
                              CornerRadius="45"
                              Padding="5"
                              WidthRequest="35"
                              HeightRequest="35"
                              HorizontalOptions="Center"
                              VerticalOptions="Center">
            <Image Source="avatar-ninja-big.png" />
        </primitives:RadBorder>
    </Grid>
</ContentPage>

 You'll want to set error correction pretty high, I recommend Level Q. This is ultimately up to you and how much error correction and AutoCheckSum you can get away with for the data you're trying to encode, my demo is a simple URL.

Regards,
Lance | Manager Technical Support
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.