Sommaire

Scrample : l'application Android

Introduction

Voilà maintenant un petit moment que je voulais essayer de faire une petite application Android. On voit souvent certain site proposer une application qui ne change absolument rien au site, je me suis donc dit que sa devrait-être assez simple à faire. Je me suis donc lancé dans cette aventure que je partage ici.

Android Studio

Présentation

Google a développé un environnement de développement très complet pour implémenter des applications Android.
Il propose notamment les fonctionnalités suivantes :

  • Éditeur de code intelligent
  • Émulateur de périphériques Android intégré
  • Éditeur d’agencement visuel

Cette application est plutôt lourde comme le montre la configuration requise :

/scrample-android-app/img/Screenshot_0.webp
Configuration requise à l’installation d’Android Studio

Installation

Pour l’installer, je vous invite a vous rendre sur le site officiel.
Si vous êtes dans la même configuration que moi (Windows + Chocolatey) :

1
choco install androidstudio -y

On installe donc l’application :

/scrample-android-app/img/1.webp
Installation d’Android Studio

Et on créer notre premier projet :

/scrample-android-app/img/2.webp
Création d’un projet
Je créer ici un projet en Kotlin (qui comble les lacunes de Java) car c’est maintenant (depuis le Google I/O de mai 2019) le langage de programmation voulu et recommandé pour le développement d’application Android.
Je me base sur l’API 28, mon application fonctionnera donc qu’à partir d’Android 9 (Pie).
Utiliser une API récente permet d’utiliser des fonctionnalités non présentes dans les anciennes versions.

Utilisation

Nous voici donc sur l’interface de développement :

/scrample-android-app/img/Screenshot_9.webp
Accueil du projet

Dans la suite de l’article, j’édite un fichier XML. Par défaut l’affichage de la page est en mode Design, on ne voit donc pas le code.
Pour l’éditer, il faut passer en vue Code en cliquant sur le bouton correspondant :

/scrample-android-app/img/Screenshot_10.webp
Passage en vue Code

Ajout d’un émulateur

Pour tester votre application, il faut installer un émulateur. C’est une démarche que je n’avais pas faite au début, je m’en suis rendu compte lors de la compilation.

Dans le menu “Run”, cliquez sur “Select Devices…” et ensuite sur “Open AVD Manager”.

Un fenêtre “Android Virtual Device Manager” s’ouvre alors. Cliquez donc sur “+ Create Virtual Device” et laissez-vous guider.
Pour ma part, j’ai pris un “Pixel 2” sous Android Pie.
Pour la version d’Android, vous devez la télécharger (lien “Download”)

/scrample-android-app/img/Screenshot_26.webp
Liste des périphériques émulés

Création de l’application

Codage

La création de la WebApp consiste en l’édition de 4 fichiers :

  • MainActivity.kt
  • AndroidManifest.xml
  • activity_main.xml
  • styles.xml (optionnel)

Vous trouverez mon contenu dans la section Sources en fin de cet article.

Par rapport à votre application, il n’y a pas beaucoup de lignes à adapter :

  • Lignes package
    • Ligne 1 du fichier MainActivity.kt
    • Ligne 3 du fichier AndroidManifest.xml
  • URL de votre site
    • Ligne 35 du fichier MainActivity.kt
Code imparfait !
Le vérificateur de syntaxe d’Android Studio m’a averti que certaines lignes de mon code utilisent des fonctions dépréciées. Ces dernières ont donc de potentielles failles de sécurités.
Il faudrait donc que je retravaille le code grâce à la documentation officielle sur le sujet que j’ai découvert bien plus tard.
Si je corrige cela, cet article sera mis à jour en conséquence.

Compilation

Tests

Pour tester notre application, il suffit d’utiliser “Run ‘app’” du menu “Run”. Cela a pour effet de lancer notre émulateur et nous permet donc de tester l’application.

/scrample-android-app/img/Screenshot_29.webp
Émulation de l’application
Dans cette capture d’écran, je n’avais pas encore édité le fichier styles.xml. On voit donc que la barre de navigation est de couleur violette.
Vous pouvez rapidement changer la couleur en cliquant sur le carré de couleur dans le bloc affichant le numéro des lignes.

Générer un APK

Menu Build => Build Bundle(s) / APK(s) => Build APK(s)

/scrample-android-app/img/Screenshot_30.webp
Construction de l’APK

L’APK se trouve alors dans le dossier app/build/outputs/apk/debug.

Information
Bien sûr, l’installation de l’application vous donnera pas mal d’avertissements car vous n’êtes pas (ou pas encore 😉) développeur reconnu et que votre application n’est pas vérifiée.

Bugs et fonctionnalités manquantes

Dans la version actuelle de mon application, j’ai remarqué les défauts suivants :

  • Retour à la page d’accueil lors du changement d’orientation
  • Impossible d’ouvrir les liens dans un navigateur externe

Sources

GitHub

En plus des fichiers ci-dessous l’ensemble de ce projet est disponible sur mon GitHub.

MainActivity.kt

Chemin relatif :
app/src/main/java/com/example/scrample/MainActivity.kt

 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
package com.example.scrample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {
    var mWebView : WebView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mWebView = findViewById<View>(R.id.webView) as WebView
        mWebView!!.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
                view?.loadUrl(url)
                return true
            }
        }
        val webSettings = mWebView!!.getSettings()
        webSettings.setJavaScriptEnabled(true)
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH)
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK)
        webSettings.setAppCacheEnabled(true)
        webSettings.setDomStorageEnabled(true)
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS)
        webSettings.setUseWideViewPort(true)
        webSettings.setSavePassword(true)
        webSettings.setSaveFormData(true)
        webSettings.setEnableSmoothTransition(true)
        mWebView!!.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)
        mWebView!!.loadUrl("https://www.scrample.xyz")
    }

    override fun onBackPressed() {
        if (mWebView!!.canGoBack()){
            mWebView!!.goBack()
        }
        else {
            super.onBackPressed()
        }
    }
}

AndroidManifest.xml

Chemin relatif :
app/src/main/AndroidManifest.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.scrample">

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

Chemin relatif :
app/src/main/res/layout/activity_main.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </WebView>

</RelativeLayout>

styles.xml

Chemin relatif :
app/src/main/res/values/styles.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#9f9fa8</item>
        <item name="colorPrimaryDark">#292A2D</item>
        <item name="colorAccent">#3d6f82</item>
    </style>

</resources>

Conclusion

Nous avons donc vu une première approche de la programmation d’une application Android.
On remarquera qu’Android Studio est assez bien fait donc plutôt facile à prendre en main.