install.html

<!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">
    <link rel="stylesheet" href="css/install.css">
    <script src="js/install.js"></script>
    <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 id="selected" href="install.html">Install</a></li>
                <li><a href="reference/index.html">Reference</a></li>
                <li><a 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="install.html">EN</a>
                <a href="es/install.html">ES</a>
            </div>
            <hr style="clear:both;">

            <h2>The Android Mode</h2>
            <p>The main component of Processing for Android is the Android mode, a <a
                    href="https://processing.org/reference/environment/#Programming_modes" target="_black">programming
                    mode</a> for the Processing Development Environment (PDE) that adds all the options needed to run
                Processing sketches on Android devices and also in the emulator.</p>

            <div class="butterbar">
                You need to install Processing first in order to use the Android mode. Once you have <a
                    href="https://www.processing.org/download/" target="_black">downloaded</a> the Processing package
                corresponding to your Operating System, follow the instructions below to add the Android mode.
            </div>

            <h2>Option 1: Quick Install</h2>

            <p>
                To install the latest version of Android mode in Processing, open a Processing editor window then click
                on 'Install Android Mode' below.
            </p>

            <p>
                <div class="btn_tooltip" id="btn_tooltip">
                    <a href="#" class="shield-button" id="openInProcessing">
                        <div class="btn_logo-container">
                            <img src="./imgs/logo_processing.svg" alt="Processing Logo" class="btn_logo">
                        </div>
                        <div class="btn_text-container">
                            Install Android Mode
                        </div>
                    </a>
                    <div class="btn_tooltiptext">
                        <script>
                            if (isMobile()) {
                                document.write('<p>Warning: Opening in Processing might not work on mobile devices. Please use a desktop computer to install Android Mode.</p>');
                            } else {
                                document.write('<p><span class="ellipsis">Opening in Processing</span></p>');
                                document.write('<p>If this takes longer than a minute, make sure Processing is installed and running. <a href="https://www.processing.org/download/" target="_black">Download Processing</a> </p>');
                            }
                        </script>
                    </div>
                </div>
            </p>

            <p>
                Note: You may see a warning message. Make sure you trust this website then click on
                'Yes' to install the mode.
            </p>

            <h2>Option 2: Contributions Manager</h2>
            <p>
                Alternatively, the latest stable release of the Android mode can be safely installed through the
                Contribution Manager (CM) in the PDE. To open the CM, click the arrow in the mode selector in the menu
                bar, and choose "Manage Mode...":
            </p>

            <p><img class="body-image" src="imgs/install/mode_selector.png" alt="Mode Selector in Processing"></p>

            <p>
                Once the CM window shows up, select the Android Mode from the list, and then click the install button in
                the bottom of the window:
            </p>

            <p><img class="body-image" src="imgs/install/cm.png" alt="Contribution Manager"></p>

            <p>
                After installing the mode, you will be able to switch into it using the mode selector in the menu bar.
                Follow the <a href="tutorials/getting_started/index.html" target="_black">Getting Started tutorial</a>
                for the first steps with the Android mode.
            </p>

            <h2>Option 3: Use Processing for Android as a library</h2>

            <p>
                You can also use the Processing for Android core library on its own to develop apps in your preferred
                IDE. For more details and instructions on using the core library in Android Studio, see <a
                    href="tutorials/android_studio/index.html" target="_blank">this tutorial</a>.
            </p>

            <h2>Installing pre-releases and older releases</h2>
            <p>
                Pre-release versions, as well as older stable releases, are not available in the CM, and need to be
                installed manually. Head to the <a href="https://github.com/processing/processing-android/releases"
                    target="_black">releases section</a> of the GitHub repo for the Android Mode. Select and download
                the AndroidMode-xyz.zip file for the desired release or pre-release. Uncompress the zip file and
                then move the AndroidMode folder into the modes folder inside inside the sketchbook folder.
            </p>

            <h2>Required Android versions</h2>
            <p>
                In order to install your sketches as regular apps or live wallapers, you need a device running Android
                4.2 or higher. To install VR apps, you need at least Android 4.4. And to run watch faces, you need a
                watch with Android Wear 2.0 or newer.
            </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>