Custom Logo in QR code

Progress® Telerik® UI for Xamarin Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 21 Jul 2022 20:56 by ADMIN

Jason

Created on: 21 Jul 2022 19:19

Category: Barcode

Type: Feature Request

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.