Ui/frame view fragments for Android


#1

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


#2

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:


#3

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.


#4

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


#5

The main part of my code is:

export function creatingView(args: placeholder.CreateViewEventData) {
    try 
    { 
        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 
        ));

        framelayout.setId(android.view.View.generateViewId());
        console.dir(fragmentTransaction);
        fragmentTransaction.add(framelayout.getId(), vrVideoFragment);
        fragmentTransaction.commit();
        fragmentManager.executePendingTransactions();

        args.view = framelayout;
    } catch (error) {
        console.log(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:

@JavaProxy("org.nativescript.Test.Activity")
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?


#6

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.

https://github.com/Essent/nativescript-live-engage/blob/master/live-engage.android.ts#L23

We also used AppCompatActivity:

Hope these examples help.


#7

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.setOrientation(android.widget.LinearLayout.VERTICAL);
        global.vrVideoFragmentLayout.setLayoutParams(new android.widget.FrameLayout.LayoutParams(
            -1, // android.widget.FrameLayout.LayoutParams.MATCH_PARENT
            -1  // android.widget.FrameLayout.LayoutParams.MATCH_PARENT 
        ));

        global.vrVideoFragmentLayout.setId(android.view.View.generateViewId());
        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"
      class="page"
      loaded="loaded"
      unloaded="unloaded">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <Placeholder creatingView="creatingView"/>

</Page>