# How to adding native elements ?

**URL:** https://forums.fusetools.com/t/how-to-adding-native-elements/4736
**Category:** How-to Discussions
**Created:** [August 4, 2016, 1:49pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736 "2016-08-04T13:49:14Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![aTo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ato/32/632_2.png) [@aTo](https://forums.fusetools.com/u/aTo)
#### Post date: [August 4, 2016, 1:49pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/1 "2016-08-04T13:49:14Z")

</div>

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.

```auto
xmlns:ads="http://schemas.android.com/apk/res-auto&quot;

<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.

- [https://www.fusetools.com/docs/native-interop/native-ux-components](https://www.fusetools.com/docs/native-interop/native-ux-components)
- [https://www.fusetools.com/docs/native-interop/foreign-code](https://www.fusetools.com/docs/native-interop/foreign-code)
- [https://github.com/fusetools/fuse-samples/tree/feature-DatePicker/Samples/NativePickers](https://github.com/fusetools/fuse-samples/tree/feature-DatePicker/Samples/NativePickers)

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

Thank’s in advance.

---

<div class="post-metadata">

### Author: ![Juanlu](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Juanlu](https://forums.fusetools.com/u/Juanlu)
#### Post date: [August 4, 2016, 5:12pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/2 "2016-08-04T17:12:06Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Olle\_Fredriksson](https://avatars.discourse-cdn.com/v4/letter/o/e95f7d/32.png) [@Olle\_Fredriksson](https://forums.fusetools.com/u/Olle_Fredriksson)
#### Post date: [August 5, 2016, 7:53am UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/3 "2016-08-05T07:53:18Z")

</div>

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](https://www.fusetools.com/docs/native-interop/using-third-party-sdks) where we do that.

Cheers, Olle

---

<div class="post-metadata">

### Author: ![aTo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ato/32/632_2.png) [@aTo](https://forums.fusetools.com/u/aTo)
#### Post date: [August 5, 2016, 10:55pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/4 "2016-08-05T22:55:00Z")

</div>

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](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](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](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.

---

<div class="post-metadata">

### Author: ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)
#### Post date: [August 8, 2016, 11:01am UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/5 "2016-08-08T11:01:58Z")

</div>

Hi!

I read your code and I see that you inherit from [NativeModule](https://www.fusetools.com/docs/native-interop/native-js-modules) 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:

```auto
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

---

<div class="post-metadata">

### Author: ![aTo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ato/32/632_2.png) [@aTo](https://forums.fusetools.com/u/aTo)
#### Post date: [August 8, 2016, 2:48pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/6 "2016-08-08T14:48:53Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Juanlu](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Juanlu](https://forums.fusetools.com/u/Juanlu)
#### Post date: [August 9, 2016, 3:28pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/7 "2016-08-09T15:28:29Z")

</div>

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:

```auto
FirebaseApp initialization unsuccessful.

```

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

---

<div class="post-metadata">

### Author: ![aTo](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ato/32/632_2.png) [@aTo](https://forums.fusetools.com/u/aTo)
#### Post date: [August 9, 2016, 4:15pm UTC](https://forums.fusetools.com/t/how-to-adding-native-elements/4736/8 "2016-08-09T16:15:32Z")

</div>

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

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