How to show image (PNG, JPG) or Font Icons in SAP MDK extension control for android?

[itsumerfarooq]

Hi Experts,

Question 1: We are trying to use NativeScript based extension control in SAP MDK and want to create a simple Control with Image and Text but image is not showing. Image is placed in the Images folder of our MDK project.

We tried the following options but nothing worked so far.

1- ImageView.setImageBitmap()

2- ImageView.setImageURI()

3- ImageView.setImageResource()

Please see the below code snippet

this.customImageView = new android.widget.ImageView(this.androidContext());
const imagePath = '/MyApp/Images/myimage.png';

// Option 1: Load the image from the file path and create a Bitmap
const bitmap = android.graphics.BitmapFactory.decodeFile(imagePath);

// Set the Bitmap as the image resource for the ImageView
this.customImageView.setImageBitmap(bitmap);


// Option 2: setImageResource
const resourceId = this.androidContext().getResources().getIdentifier("myimage", "Images", this.androidContext().getPackageName());<br>this.customeImageView.setImageResource(resourceId);<br>

// Option 3: setImageURI<br>var uri = android.net.Uri.parse(imagePath);<br>this.customeimageView.setImageURI(uri);

Question 2: We did the same exercise to include the third party Font Icons (Font Awesome) from .ttf file but it is throwing an error.

We created app/fonts folder in our SAP MDK project and place the .ttf file there. We are trying to set the icon in android.widget.TextView. As soon as we put .ttf file in our fonts folder and deploy the app, it fails and throw the below error

<strong>ModuleParseError</strong>: Module parse failed: Unexpected character ''(1:0)<br>You may need an appropriate loader to handle this file
type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loaders" target="_blank">https://webpack.js.org/concepts#loaders</a><br>

Please see the attached snapshot for the code

this._text = new android.widget.TextView(this.androidContext());<br>const fontPath = `/MyApp/app/fonts/fa-brands-400.ttf`;<br>const fontTypeface = android.graphics.Typeface.createFromFile(fontPath);<br>this._text.setTypeface(fontTypeface);<br>// Display a Font Awesome icon using its Unicode value<br>this._text.setText("\uf360");<br>

Any help in this regard would be highly appreciated

Thanks,

Umer

[itsumerfarooq]

jitendra.kansal bill.froelich Appreciate if experts like you people can help us sort it out these issues.

We have already worked in MDK but new to this NativeScript and Extension development.

[mingkho · Accepted solution]

Hi Umer

'/MyApp/Images/image.png' is not a real file path in a device nor it is an app resource, it's an MDK bundle metadata path so you will must resolve it (which will return you a base64 string representation of the image)

Here's an example how to use it:

  private createView() {
    //Create Image and initialize its native view
    this._image = new android.widget.ImageView(this.androidContext());
    this._image.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT,android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
      //In here we will use ValueResolver to resolve binding/rules for the properties
      // This will allow the app to use binding/rules to set the properties' value
    var imagePath = '/MyApp/Images/image.png';
      // Resolve Source value
      this.valueResolver().resolveValue(imagePath, this.context, true).then(function(source){
        if (source !== null && source !== undefined) {
          var base64Str = source.replace(/data:image\/\w+;base64,/,''); //remove data:image/[XYZ];base64, from the string
          let imageAsBytes = android.util.Base64.decode(base64Str, android.util.Base64.DEFAULT);
          this._image.setImageBitmap(android.graphics.BitmapFactory.decodeByteArray(imageAsBytes, 0, imageAsBytes.length));
        }
      }.bind(this));
  }

[itsumerfarooq · Accepted solution]

Thank you. It worked!