Comment adapter son application au format de l’écran ?

Bonjour à tous ! Je continue ma lancée avec un article par semaine. Je m’essaye également au format vidéo, dans le principe de me perfectionner et de vous proposer un autre type format. J’espère que l’article ou la vidéo vous conviendra. bonne lecture ou bon visionnage !

Il est parfois de difficile de savoir comment procédé pour adapter son application au format de l’écran. Il peut arriver parfois après la publication où la mise en place de l’application qu’on se rend compte que notre application ne s’adapte pas format du client. Je vous rassure, il existe des pratiques pour éviter cette mauvaise surprise.

Résolution et Définition de l’écran

Pour adapter une application, il est nécessaire de connaître différentes notions. La résolution et la définition sont deux choses qui sont très souvent confondues et pourtant il ne désigne pas la même chose :

Résolution :  La résolution c’est la taille physique de l’écran. Elle se calcule par le produit de la longueur sur la longueur de l’écran.

Définition :  La définition c’est le nombre de pixels, qu’un écran peut afficher. Plus la définition est grande, moins les pixels de l’écran sont apparents. On parle également de la densité de pixel pour désigner la définition de l’écran.

Les formats standard sur Android Studio

Si vous programmez pour des applications Android, vous avez pu vous apercevoir qu’il existe différents types unités. Je vais vous les expliquer ici :

Les catégories représentent les formats de l’écran, La grande majorité des écrans normaux sont compris entre la catégorie mdpi et xxhdpi. Les écrans qui se rapprochent de la catégorie ldpi sont considéré comme des petits écrans. Les écrans qui se rapprochent de la catégorie xxxhdpi sont considéré comme des écrans larges.

Comment adapter le visuel de notre application ?

Maintenant vous vous demandez peut-être comment adapter le visuel de votre application à n’importe quelle résolution d’écran. Je vais y répondre, il existe différentes façons de procéder et je vais en citer trois et vous montrez comment les mettre en place :

• Définir dans le fichier manifest.xml les tailles d’écran autorisé.

<supports-screens 
        android:resizable="true"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true" />

rajoutez cette portion de code dans votre fichier manifest et changer “true” par “false” si vous souhaitez interdire : “smallScreens” pour les petits écrans, “normalScreens” pour les petits écrans normaux, “largeScreens” pour les écrans larges et “resizable” si vous souhaitez que soit redimensionnable pour différentes tailles d’écran.

• Définir des poids sur les différents éléments graphique de notre application (weithsum).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#2C75FF"
        tools:context=".MainActivity"
        android:weightSum="10">
    
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="5">
        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:paddingHorizontal="20dp"
                android:maxLength="9"
                android:background="#FFFFFF"
                android:ems="10"
                android:id="@+id/editTexte1"/>


    </LinearLayout>
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="5">

        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:maxLength="9"
                android:background="#FFFFFF"
                android:ems="10"
                android:id="@+id/editTexte2"/>
        
    </LinearLayout>
</LinearLayout>

Ici, dans cet exemple j’utilise android:weightSum=”10″ pour définir la somme totale de poids . Un poids que je répartis dans mes deux autres Linearlayout avec android:layout_weight=”5″.  Le poids va s’adapter automatique aux dimensions de l’écran.

• Définir différentes dimensions de layout pour les différentes résolutions d’écran.

Pour ajouter, un layout différent pour des dimensions différentes, faites un clique droit sur votre dossier layout -> New, puis cliquez sur “Layout ressource file” .

Ensuite, un menu va s’afficher et vous aurez deux choix pour définir vos dimensions.

• un choix standard d’écran en fonction de la catégorie standard. Pour cela il faut sélectionner le paramètre “Density” dans  le menu “Available qualifier…”.

• Un choix plus précis, avec les dimensions souhaitez. Pour cela il faut sélectionner le paramètre “Dimension” dans  le menu “Available qualifier…”.                                                                                                            
  

Pour aller plus loin

• Fichier 9 patch :

Le fichier 9 patch est un fichier qui permet à une image de s’adapter à n’importe quelle taille d’écran. Il peut être utile pour réaliser des écrans de démarrage pour vos applications.

• Dimenify :

Dimenify est un plugin qui peut être intégré à Android Studio. Le plugin va générer automatiquement des dimensions pour vos résolutions d’écran. Il permet également d’adapter la longueur ou la largeur lorsque vous tenter de changer l’un des deux, afin d’avoir une bonne cohérence (cliquez-ici, pour voir la procédure pour l’installer).

Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si  vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si  vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.

crédit photo : Blickpixel, Freephoto, openClipart-vector