Skip to Content
1
Aug 02, 2023 at 10:03 AM

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

187 Views Last edit Aug 02, 2023 at 03:54 PM 2 rev

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