processing-android-website/tutorials/android_studio/index.html at install-button · processing/processing-android-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
    <link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
    <link rel="stylesheet" href="../../css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Processing for Android</title>
</head>

<body>

<nav class="topnav">
    <ul class="left">
        <li><a href="https://processing.org/">Processing</a></li>
        <li><a href="https://p5js.org/">p5.js</a></li>
        <li><a href="https://py.processing.org/">Processing.py</a></li>
        <li><a href="https://pi.processing.org/">Processing for Pi</a></li>
    </ul>
    <ul class="foundation">
        <li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
    </ul>
</nav>

<header>
    <h1 class="title">Processing for Android</h1>
</header>

<div class="group">

    <nav class="site">
        <img class="logo" src="../../imgs/logo_processing_android.svg" alt="Processing for Android logo">
        <ul class="leftnav">
            <li><a href="../../index.html">Home</a></li>
            <li><a href="../../install.html">Install</a></li>
            <li><a href="../../reference/index.html">Reference</a></li>
            <li><a id="selected" href="../../tutorials/index.html">Tutorials</a></li>
            <li><a href="../../books/index.html">Books</a></li>
            <li><a href="../../gallery/index.html">Gallery</a></li>
            <li><a href="https://discourse.processing.org/c/processing-android" target="_black">Forum</a></li>
            <li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
        </ul>
    </nav>

    <section class="container main-text">

        <div class="lang">
            <a id="selected" href="index.html">EN</a>
            <a href="../../es/tutorials/android_studio/index.html">ES</a>
        </div>
        <hr style="clear:both;">

        <h2>Developing with Android Studio</h2>
        <p>Use Android Studio for advanced Android development with Processing's core library.</p>

        <h3>General steps</h3>

        <p>
            <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>

        <p>
            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>

        <p><b>1.</b> Create an Android project if you haven't already created one. Start with selecting an Empty Activity:</p>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/1selectActivity.png" alt="Select Activity"></p>

        <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>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/2projectName.png" alt="Select target"></p>

        <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>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/3copyzip.png" alt="Module settings"></p>

        <p><b>4.</b> To add it as a jar dependency, Click on File -> Project Structure. A dialog box will appear:</p>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/4ClickFile.png" alt="Module settings"></p>

        <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>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/5Addjar.png" alt="Module settings"></p>

        <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>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/6addjardialog.png" alt="Module settings"></p>

        <p><b>7.</b> Then, write your sketch code by extending PApplet, for example:</p>

        <pre><code>
// Sketch.java
package tutorials.androidstudio.fragmentsv4;

import processing.core.PApplet;

public class Sketch extends PApplet {
  public void settings() {
    size(600, 600);
  }

  public void setup() { }

  public void draw() {
    if (mousePressed) {
      ellipse(mouseX, mouseY, 50, 50);
    }
  }
}
</code></pre>

        <p><b>8.</b> Initialize the sketch in the main activity:</p>

        <pre><code>
package tutorials.androidstudio.fragmentsv4;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import processing.android.PFragment;
import processing.android.CompatUtils;
import processing.core.PApplet;

public class MainActivity extends AppCompatActivity {
    private PApplet sketch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FrameLayout frame = new FrameLayout(this);
        frame.setId(CompatUtils.getUniqueViewId());
        setContentView(frame, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));

        sketch = new Sketch();
        PFragment fragment = new PFragment(sketch);
        fragment.setView(frame, this);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
        if (sketch != null) {
            sketch.onRequestPermissionsResult(
                    requestCode, permissions, grantResults);
        }
    }

    @Override
    public void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        if (sketch != null) {
            sketch.onNewIntent(intent);
        }
    }
}
</code></pre>


        <div class="butterbar">
            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>


        <p><b>9.</b> Finally, create a simple layout for the main activity:</p>

        <pre><code>
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="tutorials.androidstudio.fragmentsv4.MainActivity" >

    &lt;FrameLayout android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

&lt;/RelativeLayout>
</code></pre>

        <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>

        <h3>Using Bintray packages</h3>

        <p>
            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>

        <pre><code>
compile 'org.p5android:processing-core:x.y.z'
</code></pre>

        <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>
        <p><img class="body-image" src="../../imgs/tutorials/android_studio/bintray_package.png" alt="Bintray package"></p>

    </section>

</div>

<footer class="footinfo">
    <small>&copy; The Processing Foundation. Processing for Android is a <a href="../../team.html">collaborative project</a>.</small>
</footer>
</body>
</html>