Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Création d'une bulle flottante sur Android

Par Kévin HIPEAU Publié le 29/07/2015 à 10:05:43 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Créer une bulle flottante de premier plan sur android est relativement facile. Cette bulle visible sur toutes les applications. Ce genre de bulle est utilisée par facebook messenger par exemple.

Pré-requis

Les pré-requis demandés pour la création de cette application sont d'avoir installé préalablement android studio avec le sdk 24. Vous êtes prêts ? Passons à la suite !

Création du projet

Nous allons maintenant créer le projet en cliquant sur Start new Android Studio projet, ensuite remplissez les champs demandés à votre guise -> Sélectionnez ensuite le sdk minimal, dans notre cas le 15 -> Passons maintenant au choix de l'activité par défaut. On sélectionne BlanckActivity -> la page suivante nous demande les informations sur l'activité, on laisse par défaut et on termine en cliquant sur le bouton finish ! Voila notre projet vient de se créer.

Design

Une fois notre projet crée nous allons passer à la création du design de l'application. La bulle doit etre visible mais ne doit pas géner l'utilisateur.

L'application sera composée du :

  • MainActivity notre vue principale lancée par l'application, elle sera seulement constituée d'un bouton permettant l'activation de la bulle .

  • D'une image pour notre bulle, on prendra une image de forme arrondie. J'utilise une image avec des couleurs sobres pour ne pas géner l'utilisateur.

Création des différents layout

Nous allons maintenant passer au design minimaliste de l'application.

MainActivity.xml

Création de la Main Activity, cette derniere sera la page au lancement de l'application, elle est composée d'un bouton qui permettra de lancer la bulle flottante, elle est normalement créee automatiquement. Il vous reste juste à ajouter le boutton.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:id="@+id/btnLauchBubble"
        android:text="Lancer la bulle"
        android:onClick="btnLauchBubble"
        android:layout_gravity="center_vertical"
        />
</FrameLayout>
Bulle flottante

On génèrera le layout de la bulle directement depuis le code, nous n'avons donc pas besoin de créer une nouvelle activity.

Le service !

Création du service

Passons maintenant à la création du service Android pour plus d'informations sur les services Android c'est par ici.

Création d'un service depuis Android Studio

Pour créer un nouveau service sous android c'est tout simple, il vous suffit juste de faire un clique droit sur votre projet -> New -> Service -> Service -> Le nom de votre service -> Finish . Voila votre service est maintenant créer. Il va ajouter le service automatiquement dans les proprietes de l'AndroidManifest

On a notre service et maintenant ? Passons au code !

Notre service sera composé seulement d'une image (celle choisie précedement), on ne pourra pas faire glisser l'image ou autre on verra ça dans un autre tutoriel !

package com.supinfo.bubble;

import android.app.Service;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.os.IBinder;
import android.view.Gravity;
import android.view.WindowManager;
import android.widget.ImageView;

public class BubbleService extends Service {
    private WindowManager windowManager;
    private ImageView globalView;

    public BubbleService() {
    }

    @Override
    public IBinder onBind(Intent intent) {
        // TODO: Return the communication channel to the service.
        return null;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        windowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
        globalView = new ImageView(this);
        globalView.setImageResource(R.drawable.bulle_petite); //Ajout d'une image à  l'image view
        //Creation du layout avec une taille de 180 sur 180
        final WindowManager.LayoutParams params = new WindowManager.LayoutParams(180, 180, WindowManager.LayoutParams.TYPE_PHONE, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE, PixelFormat.TRANSLUCENT);
        //On place la bulle en haut de l'écran
        params.gravity = Gravity.TOP;
        //On ajoute le layout et l'imageview au windowsmanager
        windowManager.addView(globalView, params);
    }

}

Lancement du service

Nous allons maintenant lancer le service depuis l'action click du bouton créer précédemment dans la Main Activity.

 public void btnLauchBubble(View view) {
    //On creer un nouveau Intent avec le context et le service à lancer
    Intent service = new Intent(getApplicationContext(), BubbleService.class);
    //On lance le service
    startService(service);
    }      

Les permissions ! C'est presque fini !

Maintenant passons aux permissions sous android, cette permission (ci dessous) nous permet d'avoir l'autorisation pour afficher notre application au-dessus les autres. Il vous suffit juste d'ajouter cette ligne au manifest et le tour est joué !

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

Conclusion

Ce tutoriel est maintenant terminé, vous disposez maintenant d'une application qui génère une bulle flottante et qui passe au-dessus de toutes les autres applications. Merci d'avoir suivi ce tutoriel !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels