How to convert an Android Studio project to an Appcelerator Titanium Module

Question

Hy guys, So, i have this tutorial. and it raised some questions.

Titanium-AndroidStudio

In short, it shows how to open the Appcelerator Libraries on Android Studio and use it to develop the Modules.

What I need, is sort of the other way around.

I have an AndroidStudio Project which I need to "convert" to an Appcelerator Titanium Module. The Java code is not a problem, since Java is Java. But there are a lot of things to consider. The Android Studio uses it's own screen/buttons/views implementation, and the Appcelerator Module is pure java made in Eclipse, and the screen, views, buttons, etc, are created using Javascript inside the Titanium framework.

I am going to give an exemple.

This is a snipet from Android Studio.

public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    requestPermissions();
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
    setContentView(R.layout.activity_tire_scan);

    AudioManager audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
    if (audioManager != null) { 
        audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, 20, 0);
    }

    btnAccept = findViewById(R.id.btnAccept);
    mOpenCvCameraView = findViewById(R.id.java_camera_View);
    mOpenCvCameraView.setVisibility(SurfaceView.VISIBLE);
    mOpenCvCameraView.setCvCameraViewListener(this);
}

So, we have some Java code that do some stuff, and we also have the behavior of the App itself related to the Java code, like the camera view and the button.

How to remove the "visual" code from this snippet, and relate it to the Appcelerator Javascript code.

This button, for example, would have to be built inside appcelerator, like this:

var VBtn = Ti.UI.createButton({
    title: 'CameraButton',
    bottom: 50,
});

I don't know if I am clear on this but, I hope you understand me.

Basically, how to migrate a project from Android Studio to an Appcelerator Module and use it inside Titanium itself.

Thanks in advance.

UPDATE:

This is what I have so far.

The ViewProxy and the View classes.

@Kroll.proxy(creatableInModule = ItiremoduleModule.class)
public class ItireViewProxy extends TiViewProxy 
{
public ItireViewProxy() 
{
    super();
}

PortraitCameraBridgeViewBase mOpenCvCameraView;
AppCompatActivity appCom;

protected class ItireView extends TiUIView
{
    public ItireView(TiViewProxy proxy) {
        super(proxy);

        String packageName = proxy.getActivity().getPackageName();
        Resources resources = proxy.getActivity().getResources();
        View viewWrapper;

        int java_camera_View = resources.getIdentifier("java_camera_View", "id", packageName);

        LayoutInflater inflater = LayoutInflater.from(proxy.getActivity());
        viewWrapper = inflater.inflate(java_camera_View, null);

        setNativeView(viewWrapper);
    }
}

@Override
public TiUIView createView(Activity activity) {
    TiUIView view = new ItireView(this);
    view.getLayoutParams().autoFillsHeight = true;
    view.getLayoutParams().autoFillsWidth = true;
    return view;
}

@Kroll.method
public void setView() {
    // must use this method to set the view on Appcelerator, right?
    }

}

The xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:itiremodule="http://schemas.android.com/apk/lib/com.itire.budini"
xmlns:opencv="http://schemas.android.com/apk/lib/com.itire.budini"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.itire.budini.ItireViewProxy">

<com.example.etech.opencvtest320.PortraitCameraView
    android:id="@+id/java_camera_View"
    android:layout_width="379dp"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:visibility="visible"
    opencv:camera_id="any"
    opencv:show_fps="true" />

<Button
    android:id="@+id/btnAccept"
    style="?android:attr/borderlessButtonStyle"
    android:layout_width="375dp"
    android:layout_height="76dp"
    android:layout_alignParentBottom="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="32dp"
    android:background="@android:color/darker_gray"
    android:onClick="scanAgain"
    android:text="Scanning iTread..."
    android:textAllCaps="false"
    android:textColor="#1F2025"
    android:textSize="18sp"
    android:visibility="visible" />

Answer 1

While this is a great tutorial it is a bit out-dated. Beginning with Titanium 9.0.0 it is easier to use Android Studio. Have a look at: https://dev.to/miga/using-android-studio-to-develop-titanium-modules-2jc4 on how to get it up and running.

The other part is not true either. You can use native UI elements in modules (or even in Hyperloop):

• here I use a native Layout XML in Hyperloop: https://github.com/m1ga/hyperloop.collapsingToolbarLayout
• and in this module I use an XML layout which I fill inside the module: the XML layout - The connection part

This will even create a custom View you can use in your controller later like this <VonageView module="ti.vonage" id="vonage"/>

Keep in mind: unlike other Frameworks Titanium uses native UI elements and only JS for the connection/code layer between your UI and the logic.

keepScreenOn is already inside the SDK: http://docs.appcelerator.com/platform/latest/#./api/Titanium.UI.View-property-keepScreenOn

If other parts are missing like setStreamVolume you could even add them in the SDK (eg here TiSound ) since it is open source and might be useful for other people too.