Skip to content

Commit 3d1050b

Browse files
Update index.html
1 parent b6fad67 commit 3d1050b

File tree

1 file changed

+131
-128
lines changed

1 file changed

+131
-128
lines changed

tutorials/android_studio/index.html

Lines changed: 131 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
6-
<link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
7-
<link rel="stylesheet" href="../../css/main.css">
8-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9-
<title>Processing for Android</title>
10-
</head>
11-
12-
<body>
13-
14-
<nav class="topnav">
15-
<ul class="left">
16-
<li><a href="https://processing.org/">Processing</a></li>
17-
<li><a href="https://p5js.org/">p5.js</a></li>
18-
<li><a href="https://py.processing.org/">Processing.py</a></li>
19-
<li><a href="https://pi.processing.org/">Processing for Pi</a></li>
20-
</ul>
21-
<ul class="foundation">
22-
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
23-
</ul>
24-
</nav>
25-
26-
<header>
27-
<h1 class="title">Processing for Android</h1>
28-
</header>
29-
30-
<div class="group">
31-
32-
<nav class="site">
33-
<img class="logo" src="../../imgs/logo.png" alt="Processing for Android logo">
34-
<ul class="leftnav">
35-
<li><a href="../../index.html">Home</a></li>
36-
<li><a href="../../install.html">Install</a></li>
37-
<li><a href="../../reference/index.html">Reference</a></li>
38-
<li><a id="selected" href="../../tutorials/index.html">Tutorials</a></li>
39-
<li><a href="../../books/index.html">Books</a></li>
40-
<li><a href="../../gallery/index.html">Gallery</a></li>
41-
<li><a href="https://discourse.processing.org/c/processing-android" target="_black">Forum</a></li>
42-
<li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
43-
</ul>
44-
</nav>
45-
46-
<section class="container main-text">
47-
48-
<div class="lang">
49-
<a id="selected" href="index.html">EN</a>
50-
<a href="../../es/tutorials/android_studio/index.html">ES</a>
51-
</div>
52-
<hr style="clear:both;">
53-
54-
<h2>Developing with Android Studio</h2>
55-
<p>Use Android Studio for advanced Android development with Processing's core library.</p>
56-
57-
<h3>General steps</h3>
58-
59-
<p>
60-
<a href="https://developer.android.com/studio/index.html" target="_black">Android Studio</a> is the tool recommended by Google for Android development. If you've already have experience on how to develop Android applications using Android Studio (separately from Processing), and want to make use of the Processing core library in your Android Studio projects, this tutorial can be useful.</p>
61-
62-
<p>
63-
All our core code is bundled inside the processing-core.zip, which is inside the AndroidMode folder. You just need to copy this file as processing-core.jar and add it as a dependency to your project. Step by step procedure for Android Studio is as follows:</p>
64-
65-
<p><b>1.</b> Create an Android project if you haven't already created one:</p>
66-
<p><img class="body-image" src="../../imgs/tutorials/android_studio/1_new_project.png" alt="New project"></p>
67-
68-
<p><b>2.</b> Select the target device:</p>
69-
<p><img class="body-image" src="../../imgs/tutorials/android_studio/2_target.png" alt="Select target"></p>
70-
71-
<p><b>3.</b> Add an empty activity:</p>
72-
<p><img class="body-image" src="../../imgs/tutorials/android_studio/3_add_activity.png" alt="Add activity"></p>
73-
74-
<p><b>4.</b> Set the name for the main activity class and the layout file:</p>
75-
<p><img class="body-image" src="../../imgs/tutorials/android_studio/4_customize_activity.png" alt="Customize activity"></p>
76-
77-
<p><b>5.</b> Copy processing-core.zip (located in the AndroidMode folder in Processing) to /app/libs, rename it to processing-core.jar, and add it as a jar dependency to the project:</p>
78-
<p><img class="body-image" src="../../imgs/tutorials/android_studio/5_module_settings.png" alt="Module settings"></p>
79-
80-
<p><b>6.</b> Then, write your sketch code by extending PApplet, for example:</p>
81-
82-
<pre><code>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
6+
<link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
7+
<link rel="stylesheet" href="../../css/main.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9+
<title>Processing for Android</title>
10+
</head>
11+
12+
<body>
13+
14+
<nav class="topnav">
15+
<ul class="left">
16+
<li><a href="https://processing.org/">Processing</a></li>
17+
<li><a href="https://p5js.org/">p5.js</a></li>
18+
<li><a href="https://py.processing.org/">Processing.py</a></li>
19+
<li><a href="https://pi.processing.org/">Processing for Pi</a></li>
20+
</ul>
21+
<ul class="foundation">
22+
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
23+
</ul>
24+
</nav>
25+
26+
<header>
27+
<h1 class="title">Processing for Android</h1>
28+
</header>
29+
30+
<div class="group">
31+
32+
<nav class="site">
33+
<img class="logo" src="../../imgs/logo.png" alt="Processing for Android logo">
34+
<ul class="leftnav">
35+
<li><a href="../../index.html">Home</a></li>
36+
<li><a href="../../install.html">Install</a></li>
37+
<li><a href="../../reference/index.html">Reference</a></li>
38+
<li><a id="selected" href="../../tutorials/index.html">Tutorials</a></li>
39+
<li><a href="../../books/index.html">Books</a></li>
40+
<li><a href="../../gallery/index.html">Gallery</a></li>
41+
<li><a href="https://discourse.processing.org/c/processing-android" target="_black">Forum</a></li>
42+
<li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
43+
</ul>
44+
</nav>
45+
46+
<section class="container main-text">
47+
48+
<div class="lang">
49+
<a id="selected" href="index.html">EN</a>
50+
<a href="../../es/tutorials/android_studio/index.html">ES</a>
51+
</div>
52+
<hr style="clear:both;">
53+
54+
<h2>Developing with Android Studio</h2>
55+
<p>Use Android Studio for advanced Android development with Processing's core library.</p>
56+
57+
<h3>General steps</h3>
58+
59+
<p>
60+
<a href="https://developer.android.com/studio/index.html" target="_black">Android Studio</a> is the tool recommended by Google for Android development. If you've already have experience on how to develop Android applications using Android Studio (separately from Processing), and want to make use of the Processing core library in your Android Studio projects, this tutorial can be useful.</p>
61+
62+
<p>
63+
All our core code is bundled inside the processing-core.zip, which is inside the AndroidMode folder. You just need to copy this file as processing-core.jar and add it as a dependency to your project. Step by step procedure for Android Studio is as follows:</p>
64+
65+
<p><b>1.</b> Create an Android project if you haven't already created one. Start with selecting an Empty Activity:</p>
66+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/1selectActivity.png" alt="Select Activity"></p>
67+
68+
<p><b>2.</b> Enter project name, package name and minimum SDK version. Keep the 'Use legacy android.support libraries' option unchecked as the latest android processing core is migrated to androidx. After that click on 'Finish' button:</p>
69+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/2projectName.png" alt="Select target"></p>
70+
71+
<p><b>3.</b> Copy processing-core.zip (located in the AndroidMode folder in Processing) to /app/libs, rename it to processing-core.jar:</p>
72+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/3copyzip.png" alt="Module settings"></p>
73+
74+
<p><b>4.</b> To add it as a jar dependency, Click on File -> Project Structure. A dialog box will appear:</p>
75+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/4ClickFile.png" alt="Module settings"></p>
76+
77+
<p><b>5.</b> Select 'dependencies' in the left most panel and then click on 'app' in modules panel. Click on plus button under Declared Dependencies and then click on Jar Dependency. Another dialog box will appear:</p>
78+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/5Addjar.png" alt="Module settings"></p>
79+
80+
<p><b>6.</b> In the add jar dialog enter path as 'libs/processing-core.jar' and in Step 2, enter scope as 'implementation'. Click on 'OK', 'Apply' and then again 'OK':</p>
81+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/6addjardialog.png" alt="Module settings"></p>
82+
83+
<p><b>7.</b> Then, write your sketch code by extending PApplet, for example:</p>
84+
85+
<pre><code>
8386
// Sketch.java
8487
package tutorials.androidstudio.fragmentsv4;
8588

@@ -100,62 +103,62 @@ <h3>General steps</h3>
100103
}
101104
</code></pre>
102105

103-
<p><b>7.</b> Initialize the sketch in the main activity:</p>
106+
<p><b>8.</b> Initialize the sketch in the main activity:</p>
104107

105-
<pre><code>
108+
<pre><code>
106109
package tutorials.androidstudio.fragmentsv4;
107110

108-
import android.os.Bundle;
111+
import androidx.appcompat.app.AppCompatActivity;
109112
import android.content.Intent;
113+
import android.os.Bundle;
110114
import android.view.ViewGroup;
111115
import android.widget.FrameLayout;
112-
import android.support.v7.app.AppCompatActivity;
113-
114116
import processing.android.PFragment;
115117
import processing.android.CompatUtils;
116118
import processing.core.PApplet;
117119

118120
public class MainActivity extends AppCompatActivity {
119-
private PApplet sketch;
120-
121-
@Override
122-
protected void onCreate(Bundle savedInstanceState) {
123-
super.onCreate(savedInstanceState);
124-
FrameLayout frame = new FrameLayout(this);
125-
frame.setId(CompatUtils.getUniqueViewId());
126-
setContentView(frame, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
127-
ViewGroup.LayoutParams.MATCH_PARENT));
128-
129-
sketch = new Sketch();
130-
PFragment fragment = new PFragment(sketch);
131-
fragment.setView(frame, this);
132-
}
121+
private PApplet sketch;
122+
123+
@Override
124+
protected void onCreate(Bundle savedInstanceState) {
125+
super.onCreate(savedInstanceState);
126+
FrameLayout frame = new FrameLayout(this);
127+
frame.setId(CompatUtils.getUniqueViewId());
128+
setContentView(frame, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
129+
ViewGroup.LayoutParams.MATCH_PARENT));
130+
131+
sketch = new Sketch();
132+
PFragment fragment = new PFragment(sketch);
133+
fragment.setView(frame, this);
134+
}
133135

134-
@Override
135-
public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
136-
if (sketch != null) {
137-
sketch.onRequestPermissionsResult(
138-
requestCode, permissions, grantResults);
136+
@Override
137+
public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
138+
if (sketch != null) {
139+
sketch.onRequestPermissionsResult(
140+
requestCode, permissions, grantResults);
141+
}
139142
}
140-
}
141143

142-
@Override
143-
public void onNewIntent(Intent intent) {
144-
if (sketch != null) {
145-
sketch.onNewIntent(intent);
144+
@Override
145+
public void onNewIntent(Intent intent) {
146+
super.onNewIntent(intent);
147+
if (sketch != null) {
148+
sketch.onNewIntent(intent);
149+
}
146150
}
147-
}
148151
}
149152
</code></pre>
150153

151154

152-
<div class="butterbar">
153-
The <code>onRequestPermissionsResult()</code> method in the main activity is needed in the case the app uses any <a href="https://developer.android.com/guide/topics/permissions/requesting.html#normal-dangerous">dangerous permissions</a>. If missing, the results of requesting the permission to the user will not reach the sketch, and it may fail to work properly. onNewIntent() is also needed so the sketch can handle intents sent to the main activity.</div>
155+
<div class="butterbar">
156+
The <code>onRequestPermissionsResult()</code> method in the main activity is needed in the case the app uses any <a href="https://developer.android.com/guide/topics/permissions/requesting.html#normal-dangerous">dangerous permissions</a>. If missing, the results of requesting the permission to the user will not reach the sketch, and it may fail to work properly. onNewIntent() is also needed so the sketch can handle intents sent to the main activity.</div>
154157

155158

156-
<p><b>8.</b> Finally, create a simple layout for the main activity:</p>
159+
<p><b>9.</b> Finally, create a simple layout for the main activity:</p>
157160

158-
<pre><code>
161+
<pre><code>
159162
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
160163
xmlns:tools="http://schemas.android.com/tools"
161164
android:id="@+id/drawer_layout"
@@ -167,30 +170,30 @@ <h3>General steps</h3>
167170
android:layout_width="match_parent"
168171
android:layout_height="match_parent" />
169172

170-
&lt;/RelativeLayout>
173+
&lt;/RelativeLayout>
171174
</code></pre>
172175

173-
<p>The complete Android Studio project is available <a href="https://github.com/codeanticode/processing-android-tutorials/tree/master/android_studio/ex2_fragmentsv4" target="_black">here</a>.</p>
176+
<p>The complete Android Studio project is available <a href="https://github.com/codeanticode/processing-android-tutorials/tree/master/android_studio/ex2_fragmentsv4" target="_black">here</a>.</p>
174177

175-
<h3>Using Bintray packages</h3>
178+
<h3>Using Bintray packages</h3>
176179

177-
<p>
178-
The processing-core library is also available as a package on <a href="https://bintray.com/p5android/processing-android/processing-core" target="_black">Bintray</a>. This package can be easily imported into a Gradle project using the following dependency snippet:</p>
180+
<p>
181+
The processing-core library is also available as a package on <a href="https://bintray.com/p5android/processing-android/processing-core" target="_black">Bintray</a>. This package can be easily imported into a Gradle project using the following dependency snippet:</p>
179182

180-
<pre><code>
183+
<pre><code>
181184
compile 'org.p5android:processing-core:x.y.z'
182185
</code></pre>
183186

184-
<p>where x.y.z is the desired version to use. In Android Studio, the processing-core package will appear as a module dependency as follows:</p>
185-
<p><img class="body-image" src="../imgs/android_studio/bintray_package.png" alt="Bintray package"></p>
187+
<p>where x.y.z is the desired version to use. In Android Studio, the processing-core package will appear as a module dependency as follows:</p>
188+
<p><img class="body-image" src="../../imgs/tutorials/android_studio/bintray_package.png" alt="Bintray package"></p>
186189

187-
</section>
190+
</section>
188191

189-
</div>
192+
</div>
190193

191-
<footer class="footinfo">
192-
<small>&copy; The Processing Foundation. Processing for Android is a <a href="../../team.html">collaborative project</a>.</small>
193-
</footer>
194-
</body>
194+
<footer class="footinfo">
195+
<small>&copy; The Processing Foundation. Processing for Android is a <a href="../../team.html">collaborative project</a>.</small>
196+
</footer>
197+
</body>
195198
</html>
196199

0 commit comments

Comments
 (0)