How to adding native elements ?

How-to Discussions
1

Hello, I need some help for understand how I can add some native elements to fuse. It’s my first foreign code so sorry if my question is maybe basic.
(I wish add AdMob to my app)

I don’t have any idea how I can add something like that in fuse.

xmlns:ads="http://schemas.android.com/apk/res-auto"

<com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId=ca-app-pub-3940256099942544/6300978111>
    </com.google.android.gms.ads.AdView>


    AdView mAdView = (AdView) findViewById(R.id.adView);
    mAdView.loadAd(randomload);

I have read the doc about native ux components but I’m still stuck.

Someone can give me a small example? Or give me a link that explains how I can do it.

Thank’s in advance.

2

I’m trying to do the same, like you I also have read the docs but can’t find the way to do it. It’s a bit frustrating because apparently only a few lines are needed to implement AdMob. Maybe someone from the team could help us?

3

Hello aTo and Juanlu!

Can you explain what you tried and where you are stuck? The docs you linked to should be what you need.

If I’m reading your post right it also looks like you need to add some elements to the AndroidManifest.xml. For that I suggest you look at the examples on using third-party SDKs where we do that.

Cheers, Olle

4

Hello

Ideally I wish create a module for AdMob. But right now I’m just trying to create a blank app with ad. (Step by step ^^)

(https://firebase.google.com/docs/admob/android/quick-start) According to the “Get Started” from AdMob I don’t see anything about the AndroidManifest.xml. You made reference to what? Adding google-services.json?

I have post my “work” on github (https://github.com/aToO57/AdMob) if you want see. I really don’t know if I’m on the right way, but for know I don’t have any error when I build (uno --target=Android -DGRALE).

Now(if right way) I need found a way to display my mAdView.

I’m trying to understand how work the NativePickers on your github and follow the tutorial “Custom native control” on the doc.

Sadly when I try to build I have the same error that this post. (https://www.fusetools.com/community/forums/bug_reports/example_about_native_ux_components_doesnt_work?page=1&highlight=11a408bc-1a7e-4d3a-9acc-86d9daedc734#post-11a408bc-1a7e-4d3a-9acc-86d9daedc734)

So if someone can check my code and tell me if it’s look good or not. And some tips for the next.

Thank’s.

5

Hi!

I read your code and I see that you inherit from NativeModule which is a base class for exposing Uno functions and events in JavaScript.

I have written a piece of code that I hope should get you started in integrating your native UI in fuse:

using Uno;
using Uno.UX;
using Uno.Compiler.ExportTargetInterop;

using Fuse;
using Fuse.Controls;

public class AdMob : Panel
{
    protected override IView CreateNativeView()
    {
        if defined(Android)
        {
            return new Android.AdMobView();
        }
        else if defined(iOS)
        {
            throw new NotImplementedException();
        }
        else
        {
            return base.CreateNativeView();
        }
    }
}

namespace Android
{
    using Fuse.Controls.Native.Android;

    extern(Android) public class AdMobView { }

    extern(Android) public class AdMobView : LeafView
    {

        static AdMobView()
        {
            Initialize();
        }

        public AdMobView() : base(Create())
        {

        }

        [Foreign(Language.Java)]
        static Java.Object Create()
        @{
            AdRequest adRequest = new AdRequest.Builder()
                .addTestDevice("ABCDEF012345")
                .build();

            AdView mAdView = new AdView(Activity.getRootActivity());
            mAdView.setAdSize(AdSize.MEDIUM_RECTANGLE);
            mAdView.setAdUnitId("ca-app-pub-3940256099942544/6300978111");     
            mAdView.loadAd(adRequest);
            return mAdView;
        @}

        [Foreign(Language.Java)]
        static void Initialize()
        @{
            MobileAds.initialize(Activity.getRootActivity(), "ca-app-pub-3940256099942544~3347511713");
        @}

    }
}

We have fixed the Native UI tutorial, just waiting for it to be published. Let me know if you have any further questions

6

Hello Vegard Strand Lende!

Thank’s for your piece of code. I worked this weekend and I managed to create some code (which is very similar) for display a Ad !

But your seems cleaner so I have edit my code.

I have just remove extern(Android) public class AdMobView { } because it’s generate a error AdMob.Android.uno(15.13): E2047: No implicit cast from Native.Android.AdMobView to Fuse.Controls.Native.IView

It’s working fine ! Thank’s !

Edit: Now I will try to add some parameter to change another size/UnitID from ux!

7

aTo, can you please share the code to display an ad? I created a code based on Vegard’s piece of code, apparently everything is ok, I build the android app with no errors but when the app runs on the device I got the following message on the console:

FirebaseApp initialization unsuccessful.

Obviously no ad is shown. You had this error? You know how to fix it?

8

I have update my github. (https://github.com/aToO57/AdMob)

If you need more info come to https://fusecommunity.slack.com and pm me. (ato)