Formation Android

TP 4: Images, Permissions, Stockage

Coil

• Parcourez rapidement la documentation de Coil
• Ajouter les dépendances nécessaires à app/build.gradle: on aura besoin de la lib de base et et de l’extension spécifique pour Jetpack Compose
• Ajouter une ImageView qui affichera l’avatar de l’utilisateur dans le layout de la liste (à coté de votre TextView par ex)
• Dans onResume, récupérez une référence à cette vue puis utilisez Coil pour afficher une image en passant une URL de votre choix, par exemple:

imageView.load("https://goo.gl/gEgYUd")

UserActivity

• Créer un nouveau package user
• Créez y une nouvelle activité UserActivity et ajoutez la dans le manifest
• Créez son UI en Compose:

setContent {
    var bitmap: Bitmap? by remember { mutableStateOf(null) }
    var uri: Uri? by remember { mutableStateOf(null) }
    Column {
        AsyncImage(
            modifier = Modifier.fillMaxHeight(.2f),
            model = bitmap ?: uri,
            contentDescription = null
        )
        Button(
            onClick = {},
            content = { Text("Take picture") }
        )
        Button(
            onClick = {},
            content = { Text("Pick photo") }
        )
    }
}

• Lancer cette Activity quand on clique sur l’ImageView du premier écran (pas besoin de launcher ici car on attends pas de résultat: startActivity(intent))

Caméra: ActivityResult

• On va donc ici utiliser un nouveau launcher dans le contexte compose (donc la syntaxe est un peu différente) et avec TakePicturePreview qui retourne un Bitmap (c’est à dire une image stockée dans une variable, pas dans un fichier, donc en qualité limitée):

val takePicture = rememberLauncherForActivityResult(TakePicturePreview()) {
    bitmap = it
}

• Utilisez ce launcher quand on clique sur le premier bouton (il y a un import à faire pour l’utiliser sans argument)

Uploader l’image capturée

• Dans l’interface UserWebService, ajouter une nouvelle méthode (cette route n’est pas documentée à ma connaissance donc c’est cadeau):

@Multipart
@POST("sync/v9/update_avatar")
suspend fun updateAvatar(@Part avatar: MultipartBody.Part): Response<User>

• Créez une extension qui va convertir l’image en MultipartBody.Part qui permet d’envoyer des fichiers en HTTP:

private fun Bitmap.toRequestBody(): MultipartBody.Part {
    val tmpFile = File.createTempFile("avatar", "jpg")
    tmpFile.outputStream().use { // *use*: open et close automatiquement
        this.compress(Bitmap.CompressFormat.JPEG, 100, it) // *this* est le bitmap ici
    }
    return MultipartBody.Part.createFormData(
        name = "avatar",
        filename = "avatar.jpg",
        body = tmpFile.readBytes().toRequestBody()
    )
}

• Dans la callback de takePicture, envoyez l’image au serveur avec updateAvatar, en convertissant bitmap avec toRequestBody avant

• Enfin, dans les onResume de TaskListFragment, afficher l’avatar renvoyé depuis le serveur afin de le voir sur l’écran principal:

imageView.load(user.avatar) {
    error(R.drawable.ic_launcher_background) // image par défaut en cas d'erreur
}

Stockage: Accéder et uploader

On va maintenant permettre à l’utilisateur d’uploader une image enregistrée sur son téléphone

Pour simplifier on utilisera PhotoPicker

• Gérez l’uri alors récupérée quasiment comme pour la caméra, vous aurez besoin d’une variante de l’extension précédente pour l’URI:

private fun Uri.toRequestBody(): MultipartBody.Part {
    val fileInputStream = contentResolver.openInputStream(this)!!
    val fileBody = fileInputStream.readBytes().toRequestBody()
    return MultipartBody.Part.createFormData(
        name = "avatar",
        filename = "avatar.jpg",
        body = fileBody
    )
}

Permissions

Jusqu’ici, vous avez probablement utilisé un Android en version 10 ou plus récente: la gestion de l’accès aux fichiers est simplifiée tant qu’on utilise les dossiers partagés (Images, Videos, etc) Mais pour gérer les versions plus anciennes, il faut demander la permission READ_EXTERNAL_STORAGE avant d’accéder au fichiers:

• ajoutez la permission au Manifest.xml:

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

• ajoutez un launcher avec le contrat RequestPermission()
• utilisez le au click du bouton (avec Manifest.permission.READ_EXTERNAL_STORAGE) et dans sa callback, utilisez le launcher précédent
• pour tester, créez temporairement un émulateur en API 9 ou moins, sur les autres devices, cela ne doit pas changer le fonctionnement

Amélioration de la caméra

Actuellement, la qualité d’image récupérée de l’appareil photo est très faible (car passée en Bitmap dans la RAM), pour changer cela il faut utiliser le contrat TakePicture qui écrit dans un fichier passé au launcher par une Uri

// propriété: une URI dans le dossier partagé "Images"
private val captureUri by lazy {
    contentResolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, ContentValues())
}

// launcher
val takePicture = rememberLauncherForActivityResult(TakePicture()) { success ->
    if (success) uri = capturedUri
}

// utilisation
takePicture.launch(captureUri)

Édition infos utilisateurs

• Comme précédemment, re-factorisez cette Activity en utilisant un UserViewModel
• Dans UserActivity, permettre d’afficher et éditer le nom d’utilisateur
• Vous aurez besoin d’ajouter une méthode à UserWebService:

@PATCH("sync/v9/sync")
suspend fun update(@Body userUpdate: UserUpdate): Response<Unit>

• Référez vous à la documentation car ce n’est pas une API REST donc on ne passe pas simplement l’objet User: il faut créer un objet UserUpdate

Gérer le refus

• Modifiez votre code pour suivre les recommendations de google en vous aidant de ceci:

private fun pickPhotoWithPermission() {
    val storagePermission = Manifest.permission.READ_EXTERNAL_STORAGE
    val permissionStatus = checkSelfPermission(storagePermission)
    val isAlreadyAccepted = permissionStatus == PackageManager.PERMISSION_GRANTED
    val isExplanationNeeded = shouldShowRequestPermissionRationale(storagePermission)
    when {
        isAlreadyAccepted -> // lancer l'action souhaitée
        isExplanationNeeded -> // afficher une explication
        else -> // lancer la demande de permission et afficher une explication en cas de refus
    }
}

private fun showMessage(message: String) {
    Snackbar.make(findViewById(android.R.id.content), message, Snackbar.LENGTH_LONG).show()
}

Pour faire encore mieux, vous pouvez aussi afficher un message avec AlertDialog en Compose et continuer le flow en fonction de la réponse de l’utilisateur