How can we use Android native widget with custom ui element?


#1

Android native wedgit what we use in native app:

  • Add the dependencies in build.gradle, just like “compile ‘com.youth.banner:banner:1.4.10’”.
  • Import the class in the MainActivity.java, just like “import com.youth.banner.Banner;”.
  • Add the ui element in activity_main.xml, like below:
<com.youth.banner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:visibility="visible"></com.youth.banner.Banner>

I went through the below official documents

  • Building UI Plugins using Composite Components. Based on my understanding, I can achieve this by using Angular component. Since we can put existing {N} components into Angular component and use it in our app.
  • Building UI Plugins using Custom Components. This is {N} plugin provides extra functionality which extends the existing {N} components.

What I am looking for is:

  • We need to use the Android native wedgit.
  • We know how to access the native API and the thrid party jar.
  • We want to know how to use Android native wedgit whichs has a custom UI element.
  • We are using {N} of 3.4.2

Any help would be appreciated.


#2

An easiest way to add any third party components inside your NativeScript UI layouts will be PlaceHolder. You will just have to add your dependency to gradle and start using it.

https://docs.nativescript.org/ui/placeholder

Plugin is a long way but must one if you want to keep your component generic and reusable. Refer the documentation for plugins. It has answers for all your questions.

https://docs.nativescript.org/plugins/building-plugins

Start writing your plugin with seed template

To know more about accessing native apis,

https://docs.nativescript.org/core-concepts/accessing-native-apis-with-javascript

Get to know more about marshaling (Objective C / Java to JavaScript / TypeScript)

https://docs.nativescript.org/runtimes/ios/marshalling/Marshalling-Overview

https://docs.nativescript.org/runtimes/android/overview

This is yet another useful video resource


#3

Thanks a lot for your super quick response. Looks like the Placeholder is what we are looking for. We will give u a update once we find it works.

Thanks again.


#4

I’d personally do the widget in Android, and not NativeScript layout. Here’s a sample that I made almost 2 years ago - https://github.com/NativeScript/sample-Android-Widgets


#5

Thanks for your great example :slight_smile:


#6

The sample itself may need updating, but what you need out of it are the xml, layout and drawable dirs from App_Resources/Android, and the extended java class from the JavaScript file myWidgetClass.js. Make sure to change the R(esource) class identifier to use your package name - https://github.com/NativeScript/sample-Android-Widgets/blob/da4c58fe89e9f8c47bb30382c415a111dd42ced0/app/myWidgetClass.js#L4.


#7

Hi Pete,
Thanks for your example. This is about creating a Android widget on the home screen. I know it shows the ability of {N}, thanks again.

By now we like to have an example to demonstrate the below needs.

  • Directly use native layout in {N} project. We have a {N} page which only contains Android and iOS native layout .and displays it for the specific platform.
  • Use platform specific native ui element in {N} page. We have a {N} page which contains Android and iOS native ui elements and displays it for the specific platform.

#8

The official doc says:

The Placeholder allows you to add any native widget to your application. To do that, you need to put a Placeholder somewhere in the UI hierarchy and then create and configure the native widget that you want to appear there. Finally, pass your native widget to the event arguments of the creatingView event.

But also followed by the bad news.
Placeholder is not supported for Angular based applications.

Really that bad?? Any workaround out there?


#9

I believe when you say widget you don’t mean the UI elements but a widget we suppose place in Android’s home screen, like Clock or Whether etc., Am I right?


#10

Sorry to make you confused. Actually, I just referenced it from Google’s doc.

The user interface for an Android app is built using a hierarchy of layouts (ViewGroup objects) and widgets (View objects). Layouts are invisible containers that control how its child views are positioned on the screen. Widgets are UI components such as buttons and text boxes.

Based on this, the widget what I am talking about is the platform native UI component. NOT the one we place on the home screen.


#11

You can build the UI programmatically, or have Android layout XMLs, which you will inflate, again - programmatically.


#12

Thanks for clarifying it again. But did you actually try implementing placeholder in your Angular project before concluding it is not supported?

I personally don’t use placeholders, I feel plugins are more convenient on longer run. But after you mentioned I happen to check it, just works on Angular as expected.


#13

‘Placeholder is NOT supported’ comes from here.

I also tried it with myself. Looks like it is not displayed.

I also like to implement it via plugin. The plugin seed projected provided by {N} does not included any page. If any plugin example can show me how to include the page (with the native widget) that would be much appreciated.

Thanks again for your new info. I am looking into it now. Expecting the reference for plugin. :slight_smile:


#14

Thanks so much that your playground is working on my local as I expected. Investigating what I did wrong previous that it did not work.

Expecting the reference for plugin with page.

Thanks again.


#15

Hi manojdcoder,
Can you make another playground or other sample code to demonstrate how to use native widget with {N} plugin so we can reuse it cross different projects, pls?

Thanks in advance.


#16

Most nativescript plugins, especially verified ones in market place follows the plugin seed structure so you already have lot of examples how you can extend some native widget / library for NativeScript.

Incase if you want to extend a native widget and serve within your project, here is an quick starter example I made to support NestScrollView in Android.

You already have mostly everything documented about plugin or marshalling,


#17

Thanks again, manojdcoder. Really appreciated for these references.

Are these new added docs? I did not see these months before. :slight_smile: