Ui/frame view fragments for Android


Hey everyone, was wondering if there is a resource online on how to use fragments inside of views with NativeScript.


Can’t think of anything, did you ever find anything? I’ve wrapped a native android lib that used a fragment here: https://github.com/bradmartin/nativescript-color-picker/blob/master/colorpicker.android.ts#L42 - sorry if this doesn’t help I’ve never done pure native android apps so my understanding of fragments/activities is minimal :slight_smile:


Thanks Brad.
So far I did not find anything concrete. So far this is my only lead

It contains a clear usage of the fragments. But not sure if using an alternative would be better of if NativeScript already has a wrapper for this.


Can anyone please provide help on this. I’m trying to get this going all day long but without any success.


The main part of my code is:

export function creatingView(args: placeholder.CreateViewEventData) {
        let vrVideoFragment = new org.nativescript.Test.VrViewFragment();
        let fragmentManager: android.app.FragmentManager = application.android.startActivity.getFragmentManager();
        let fragmentTransaction: android.app.FragmentTransaction = fragmentManager.beginTransaction();
        let framelayout = new android.widget.FrameLayout(args.context);

        framelayout.setLayoutParams(new android.widget.FrameLayout.LayoutParams(
            -1, // android.widget.FrameLayout.LayoutParams.MATCH_PARENT
            -1  // android.widget.FrameLayout.LayoutParams.MATCH_PARENT 

        fragmentTransaction.add(framelayout.getId(), vrVideoFragment);

        args.view = framelayout;
    } catch (error) {

I’ve followed https://codelabs.developers.google.com/codelabs/vr_view_app_101/index.html creating the fragment. (It is a .java file that I put into the platforms directory using a hook. I tested it and the Class is available and can be instantiated)

I even extend AppCompatActivity:

class Activity extends android.support.v7.app.AppCompatActivity {

Still no luck thought…

I keep getting this error:

JS: Error: java.lang.Exception: Failed resolving method add on class android.app.BackStackRecord

This line is causing the issue:

fragmentTransaction.add(framelayout.getId(), vrVideoFragment);

But to me everything looks fine. I checked every documentation I could find multiple times.
Is this even possible?


we also faced a lot of issues with the fragment manager. I don’t recall the same issue you are facing.
But you can take a look at our plugin with uses the fragment manager in a plugin.


We also used AppCompatActivity:

Hope these examples help.


Thank you @spike1292 your reply was very helpful.
I’ve managed to get it working using following code:

export function creatingView(args: placeholder.CreateViewEventData) {
    if ( ! global.vrVideoFragment || ! global.vrVideoFragmentLayout) {
        global.vrVideoFragment = new org.example.app.VrViewFragment();

        let fragmentManager: android.app.FragmentManager = args.context.getSupportFragmentManager();
        let fragmentTransaction: android.app.FragmentTransaction = fragmentManager.beginTransaction();
        global.vrVideoFragmentLayout = new android.widget.LinearLayout(args.context);

        global.vrVideoFragmentLayout.setLayoutParams(new android.widget.FrameLayout.LayoutParams(
            -1, // android.widget.FrameLayout.LayoutParams.MATCH_PARENT
            -1  // android.widget.FrameLayout.LayoutParams.MATCH_PARENT 

        fragmentTransaction.add(global.vrVideoFragmentLayout.getId(), global.vrVideoFragment).commit();

    args.view = global.vrVideoFragmentLayout;

Initially I tried to put the placeholder into a {NS} layout. That way I didn’t get the correct context from the args param. Here’s the working XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"

        <ActionBar title="My App" icon="" class="action-bar">

    <Placeholder creatingView="creatingView"/>