Android native app tutorial

Создание нативных Android-приложений с использованием компилятора Intel C++ Compiler в Android Studio 1.0.1

На момент написания этого текста текущей версией Android Studio была версия 1.0.1. Компилятор Intel C++ Compiler for Android, будучи частью Intel Integrated Native Developer Experience (Intel INDE), поддерживает Android Studio 1.0.1 в Intel INDE 2015 Update 1. Поскольку Android Studio 1.0.1 не поддерживает Android NDK, в этой статье описаны шаги для создания нативного Android-приложения с использованием Android NDK r10d и компилятора Intel C++ Compiler for Android. Поехали!

Android Studio в качестве системы сборки использует Gradle. На момент написания статьи Gradle в процессе сборки вызывала систему NDK. В Android NDK r10 и более поздней версии после инсталляции Intel INDE компилятор Intel C++ Compiler for Android (ICC) не является более используемым по умолчанию компилятором в системе сборки NDK.

Представленные ниже шаги дают общее описание подготовки, сборки и выполнения нативного приложения в Android Studio 1.0.1.

Если вы используете Android Studio 0.8.6, почитайте статью «Сборка нативных Android-приложений с использованием компилятора Intel C++ Compiler в Android Studio», где рассказывается о применении Intel C++ Compiler.

Требуемые программные инструменты

Успешная инсталляция INDE 2015 Update 1 с Android Studio Integration гарантирует, что вы располагаете всем необходимым программным обеспечением. Детальные требования к программному обеспечению и системе описаны в документе Intel C++ Compiler Release Notes for Intel Integrated Native Developer Experience 2015.

Приведенные в данной статье инструкции предполагают использование следующего ПО для архитектуры IA-32 и Intel-64:

• Oracle JDK 7 (нативный Intel-64 JDK для систем Windows x64)
• Android SDK 20 или старше
• NDK r10d (предполагается инсталляция в [ndk-dir] )
• Android Studio 1.0.1

Убедитесь, что в переменную среды PATH добавлены следующие директории Android NDK (если они отсутствуют, добавьте):

Использование компилятора Intel C++ Compiler в Android Studio 1.0.1

После инсталляции Intel C++ Compiler 15.0 for Android в папку «[ndk-dir]\toolchains» (директория по умолчанию – «C:\Intel\INDE\IDEintegration\android-ndk-r10d\toolchains») устанавливаются следующие элементы:

• x86-icc
• x86-icc15.0.X.YYY
• x86_64-icc (если NDK поддерживает 64-разрядные цели)
• x86_64-icc15.0.X.YYY (если NDK поддерживает 64-разрядные цели)

Для NDK до r9d: после инсталляции нативным компилятором C/C++ будет Intel C++ Compiler. Дополнительных шагов для использования Intel C++ Compiler с Android Studio не требуется. Ели вы хотите для построения нативного кода использовать GNU gc, следуйте инструкциям в «Замена компилятора по умолчанию с Intel C++ Compiler на GCC для целевых приложений x86».

Для NDK r10 — r10d: компилятор Intel C++ после инсталляции не является компилятором по умолчанию. Чтобы использовать Intel C++ Compiler из Android Studio, следуйте шагам 3, 4, 5 ниже.

Если у вас установлено несколько Android NDK, следуйте инструкциям в статье «Интеграция Intel C++ Compiler for Android с несколькими Android NDK».

Теперь создадим новый проект Android для Intel-64 с нативным вызовом функции, продемонстрировав тем самым использование компилятора Intel C++ Compiler:

1. Создание нового проекта Android с нативным интерфейсом:

1. Откройте Android Studio, создайте новый Android-проект «nativeDemo» с параметрами по умолчанию, например:

2. Откройте «app\src\main\java\MainActivity.java» и добавьте в конец класса «MainActivity» нативную функцию как показано ниже:

Должно получиться примерно так:

3. Чтобы создать проект «nativeDemo», выберите: «Build > Make Project», после чего можно будет использовать «javah».
4. В «View > Tools Windows > Terminal» откройте терминальное окно и выполните указанные ниже шаги для запуска «javah» и создания заголовка jni:
a) В терминальном окне перейдите в подпапку «src\main»:

b) Чтобы создать «com_example_nativedemo_app_MainActivit.h» в папке src\main\jni, выполните следующую команду «javah» cmd:

5. В окне Project измените вид на Project, щелкните правой кнопкой мыши на папке «src» и выберите «Synchronize ‘src». Теперь в папке «src\main\jni» можно видеть файл заголовка «com_example_mydemo_nativedemo_MainActivity.h».

2. Добавление нативного исходного кода: main.c

1. Создайте «main.c»: выделите файл «com_example_mydemo_nativedemo_MainActivity.h», используйте волшебные клавиши copy/paste для создания нового «main.c» со следующим кодом:

2. Сохраните изменения
3. Теперь в папке «jni» у вас два файла: com_example_mydemo_nativedemo_MainActivity.h и main.c

3. Добавление make-файла: Android.mk

1. Щелкните правой кнопкой на папке «jni», выберите «New > File»
2. Наберите «Android.mk» и щёлкните на «OK»
3. Добавьте в этот файл следующие строки (обратите внимание, что строка LOCAL_SRC_FILES должна содержать исходные файлы, которые находятся в папке «jni»):

4. Добавление make-файла: Application.mk

1. Щелкните правой кнопкой на папке «jni», выберите «New > File»
2. Наберите «Application.mk» и щёлкните на «OK»
3. Добавьте в этот файл следующие строки:

4. [Опционально] Для изменения параметров компилятора используйте следующее:

5. Сконфигурируйте свое приложение для выполнения ndk-build с помощью make-файлов

1. Откройте файл «app\build.gradle»
2. Добавьте в начало файла следующий импорт:

3. И эти строки после секции «defaultConfig»:

4. А следующие строки – в конец файла:

5. Сохраните изменения
6. Теперь создадим проект: выберите [Build > Make Project]. Вы увидите все выходные папки и файлы «libmain.so» в папках «main\libs» и «main\obj\local».

6. Добавьте ID «hello_textview» в виджет textview

Откройте «res\layout\activity_main.xml» и измените виджет «textview» как показано ниже:

7. Обновите «MainActivity.java», чтобы UI textview вызов нативной библиотеки:

Для импорта виджета TextView и сохранения изменений нажмите ALT+Enter.

8. Запустите виртуальную машину Android Virtual Machine «Intel-Nexus 7 x64» и выполните приложение, щёлкнув кнопку «Run».

Это означает, что был использован компилятор Intel C++ Compiler for Android.

Источник

Создание приложения Android Native Activity

После установки кроссплатформенной рабочей нагрузки Разработка мобильных приложений на языке C++ Visual Studio можно использовать для создания полнофункциональных приложений Android Native Activity. Пакет Android Native Development Kit (NDK) — это набор средств, с помощью которых можно реализовывать большинство возможностей приложения Android, используя чистый код C или C++. Для обеспечения взаимодействия кода C или C++ с Android используется определенный код Java JNI, выступающий в роли связующего. В Android NDK появилась возможность создавать приложения Native Activity с помощью API Android уровня 9. Код Native Activity популярен для создания игровых приложений и приложений с интенсивным использованием графики на основе Unreal Engine или OpenGL. В этом пошаговом руководстве показано создание простого приложения Native Activity, в котором используется OpenGL. В дополнительных разделах последовательно рассматриваются такие этапы жизненного цикла разработки, как редактирование, сборка, отладка и развертывание кода Native Activity.

Требования

Прежде чем создавать приложение Android Native Activity, необходимо убедиться, что вы выполнили все системные требования и установили рабочую нагрузку Разработка мобильных приложений на языке C++ в Visual Studio. Дополнительные сведения см. в статье Установка Visual C++ для разработки кроссплатформенных мобильных приложений на языке C++. Убедитесь, что необходимые сторонние инструменты и пакеты SDK включены в установку, а также что установлен эмулятор Android.

Создание проекта Native Activity

В этом руководстве вы сначала создадите новый проект Android Native Activity, а затем создадите и запустите приложение по умолчанию в эмуляторе Android.

в Visual Studio выберите файл создать Project.

В диалоговом окне Новый проект в меню Шаблоны последовательно выберите Visual C++ Кроссплатформенное приложение, а затем выберите шаблон Приложение Native-Activity (Android).

Присвойте приложению имя, например MyAndroidApp, а затем нажмите OK.

Visual Studio создаст новое решение и откроет обозреватель решений.

в Visual Studio выберите файл создать Project.

В диалоговом окне Создание нового проекта выберите шаблон Приложение Native-Activity (Android), а затем нажмите Далее.

В диалоговом окне Настроить новый проект введите имя, например MyAndroidApp в разделе Имя проекта, а затем выберите Создать.

Visual Studio создаст новое решение и откроет обозреватель решений.

В новое решение приложения Android Native Activity входят два проекта.

MyAndroidApp.NativeActivity содержит ссылки и связующий код для запуска приложения как приложения Native Activity на Android. Реализация точек входа из связывающего кода находится в Main. cpp. Предкомпилированные заголовки находятся в PCH. h. Этот проект приложения с собственным действием компилируется в общую библиотеку . файл, который забирается проектом упаковки.

MyAndroidApp.Packaging создает файл с расширением MyAndroidApp.Packaging для развертывания на устройстве или в эмуляторе Android. Он содержит ресурсы и файл AndroidManifest.xml , в которых задаются свойства манифеста. Он также содержит файл build.xml , который управляет процессом сборки Ant. По умолчанию он задан как начальный проект, который можно развернуть и запустить непосредственно из Visual Studio.

Создание и запуск приложения Android Native Activity по умолчанию

Разработайте и запустите приложение, созданное шаблоном, чтобы проверить установку и настройку. Для первоначального теста запустите приложение в одном из профилей устройств, установленных эмулятором Android. Если вы предпочитаете тестировать приложение на другой платформе, загрузите целевой эмулятор или подключите устройство к компьютеру.

Сборка и запуск приложения Native Activity по умолчанию

Выберите x86 из раскрывающегося списка платформы решения , если он еще не выбран.

Если список Платформы решения не отображается, щелкните пункт Платформы решения из раскрывающегося списка Добавить или удалить кнопки и выберите свою платформу.

В строке меню выберите Сборка собрать решение.

В окне «Выходные данные» отобразятся выходные данные процесса сборки для двух проектов в решении.

Выберите один из профилей эмулятора Android в качестве цели развертывания.

Если вы установили другие эмуляторы или подключили устройство Android, то можете выбрать их в раскрывающемся списке платформы развертывания.

Нажмите клавишу F5 , чтобы начать отладку, или клавишу F5 , чтобы начать без отладки.

Вот как выглядит приложение по умолчанию в эмуляторе Android.

Visual Studio запускает эмулятор, который за несколько секунд загружает и развертывает код. После запуска приложения можно задать точки останова и использовать отладчик для проверки кода, языковых стандартов и контрольных значений.

Для остановки отладки нажмите SHIFT F5.

Эмулятор является отдельным процессом, который продолжает выполняться. Вы можете изменять, компилировать и развертывать код несколько раз в одном эмуляторе.

Источник

Create Your First React Native Android App

React Native is an open-source mobile application framework created by Facebook. You can use it to develop applications for Android and iOS devices with a single codebase. React Native powers some of the world’s most popular apps, such as Instagram and Facebook, and in this post I’ll show you how to create your first React Native app for Android.

Example of React Native Code

The React Native code for a typical mobile app screen looks like this:

If you look closely, you’ll see that React Native uses a combination of JavaScript, HTML-like markup, and CSS. This code snippet defines a screen with a text display and styling.

React Native Development Environments: Expo vs. React Native CLI

There are two ways to create a React Native app:

I’ll talk about the pros and cons of each below.

Expo CLI

Expo is an open-source framework and a platform for universal React applications that gives a managed app development workflow. It is a set of tools and services built around React Native and native platforms that help develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript or TypeScript codebase.

Expo takes away all the complexities associated with building React Native apps. Some of the features of the Expo CLI include:

• Universal APIs which provide access to features like camera, maps, notifications, sensors, haptics, and much more.
• A cloud-based build service that gives you app-store-ready binaries and handles certificates.
• Over-the-air updates which let you update your app at any time without the hassle and delays of submitting to the store.

React Native CLI

The React Native CLI is a more basic and bare-metal development environment. The good thing is that it makes it possible to build app binaries on your own machine, without relying on a cloud service. On the other hand, the setup is much more complicated—to build apps for Android, you’ll need to install Android Studio and configure many features before getting started. This process can be a bit complex, but the React Native CLI environment is more suited to professional app developers.

For this tutorial, we’ll use Expo since that’s the easiest way to get started building React Native apps.

How Expo Works

To use Expo, you first need to install the Expo Client app, which is available on the Play Store (a version is also available on the iOS App Store). The Expo Client app will allow you to run the app for testing purposes in real time.

You can code your React Native app on your own computer with your favorite programming text editor, and then use the Expo CLI to test or publish your app. Behind the scenes, Expo will package your React Native code and make it available to the Expo Client app on your device. You can also use the Expo CLI to publish your app and make it available to anyone with the Expo Client, or to build a standalone version of your app that can be uploaded to the app store and run without installing the Expo Client.

Creating an App With Expo

In this tutorial, we will use the Expo CLI to create our app.

Prerequisites

To create a React Native app with Expo, you need to meet the following:

• Node.js version 12 LTS or higher and Git on your computer
• an Android device with Lollipop (Android 5) or higher
• the Expo client application installed on your Android device (download the Expo client for Android from the Play Store)
• a basic understanding of ReactJS or JavaScript

Also, note that your development computer and phone must be connected to the same wireless network.

Download Node.js

Visit the Node.js website and download the latest version of Node. Node is available for Windows, macOS, and Linux operating systems. Simply choose your operating system and install it according to the instructions available on the site.

To check if Node.js is installed, open a terminal window and type:

This command will display the installed Node version.

Install Expo Client

After you’ve installed Node, you will also need to install the Expo CLI client. Simply run the following command:

For macOS and Linux users, ensure you use sudo .

Ignore any warnings or errors which occur in the process of installing the Expo CLI. After a successful installation, you should see the message below.

Create a To-Do List App With React Native

We will create a simple to-do list app that lets you input a list of tasks you need to get done and displays them on the screen.

Create a New Project With Expo

To get started, run the following Expo CLI command to create a new project:

tasklist is the name of the project. You will be prompted to choose a template for your project. For now, choose the blank template, which gives you minimal dependencies.

The expo init command creates a project folder and installs all the dependencies required by the React Native app.

Navigate to the project folder and run the following command:

npm start will start the Expo dev tools and open a new tab in your browser that looks like this:

This window allows you to run your app on a simulator or a connected device.

Connect a Device

Now, open the Expo client app on your physical Android device and select the Scan QR Code option, as shown below.

Next, go back to the Expo dev window, scan the bar code, and wait for the JavaScript bundle build process to complete. This usually takes a couple of minutes. When the process is complete, the application should be running on your phone!

Project Structure

Now that your development environment is ready, you can edit the code for the project using your preferred code editor. The project folder looks something like this:

• assets: holds the images for the app
• node_modules: contains all the dependencies for the project
• App.js: holds the code which renders the UI and is an essential file

App.js is open in the screenshot above. Let’s take a closer look. First, we import React from react . We then import the Text and View components from react-native . We also import Stylesheet , which helps with styling.

React Native comes with built-in components such as

and as opposed to standard HTML components, like

. The component is the most fundamental component in React Native and is used for grouping other child components—like

component is used to display text content on the screen—like

In the boilerplate version of App.js that Expo creates, there is a simple view with a text component and a status bar. This view is returned from the App() function. The styles constant contains some basic CSS to style the view.

Next, let’s add some new components and styles to the app!

Create the App UI

Open the App.js file and enter the following code.

The code above adds a simple text input and a button for adding new tasks. We use CSS flexbox styling to position the components next to each other.

Add Event Handling

To get the user input, we first import the useState() function from react and use it to update the state of the newTask() and setnewTask() functions. Since the user hasn’t typed anything yet, the initial state will be empty. Add the following code to the top of the App() function, just above return :

We then define the taskInputHandler , which listens to the change in the input and updates the content of the setNewTask() function. Add these lines to the App() function next:

Now we register this input handler with the TextInput component. Update your TextInput component so it looks like the following.

Now we need to handle button presses. When the user presses the + button, we want to add the new task to a list.

First, we’ll define our state for the list of tasks:

Next, we define an addTaskHandler function to add the new task (found in the newTask state) to the list.

And register that event handler with the component:

Finally, we’ll add a new view to show all the tasks in the list we’ve created. This goes just after the input container view, but still inside the main container view.

Complete Source Code for App.js

The full code for App.js is shown below. Compare it to what you have.

Conclusion

In this tutorial, you learned how to create a React Native app with Expo.

React Native is a great framework and a popular platform for both developers and businesses. Apps created with React Native are guaranteed to work smoothly on any platform or system. React Native also saves development work by letting you code your app once and run it on any mobile platform.

Premium Mobile App Templates From CodeCanyon

CodeCanyon is an online marketplace that has hundreds of mobile app templates—for Android, iOS, React Native, and Ionic. You can save days, even months, of effort by using one of them.

Whether you’re just getting started with React Native, or are a seasoned developer, a React Native app template is a great way to save time and effort on your next app project.

If you have trouble deciding which template on CodeCanyon is right for you, these articles should help:

Источник