Monthly Archives

2 Articles
Teinter parallèlement la même ressource
Notre image drapeau

Teinter parallèlement la même ressource

by Throrïn 0 Comments

Il est difficile de donner un titre court à ce que je vais expliquer aujourd’hui. A côté de ça, l’explication sera courte car très simple. Donc, pour en revenir à nos moutons, nous allons voir comment afficher sur le même écran deux fois la même ressource teinté d’une manière différente comme le montre l’image ci dessous.

Notre image drapeau

De base, lorsque l’on charge une ressource, même si c’est plusieurs fois dans différentes variables, Android répercuter les changements faits sur toutes les variables pointant sur cette ressource. Mais heureusement, il existe une fonction à appeler permettant de bloquer cette répercussion. Il suffit de rendre muette votre ressource. Dans les lignes suivantes, nous allons voir comment :

//chargement de nos ressources
Drawable flagGreen  = getResources().getDrawable(R.drawable.ic_menu_slide_flag);
Drawable flagRed = getResources().getDrawable(R.drawable.ic_menu_slide_flag);

//maintenant, on les rend muettes pour ne pas répercuter 
//les changements aux autres appeles de cette ressource
flagGreen.mutate();
flagRed.mutate();

La fonction permettant ceci est la fonction mutate(). Voici ce que dit la documentation à propos de cette fonction :

Make this drawable mutable. This operation cannot be reversed. A mutable drawable is guaranteed to not share its state with any other drawable. This is especially useful when you need to modify properties of drawables loaded from resources. By default, all drawables instances loaded from the same resource share a common state; if you modify the state of one instance, all the other instances will receive the same modification. Calling this method on a mutable Drawable will have no effect.

Returns
  • This drawable.

Maintenant que « nos ressources » sont dissociées l’une de l’autre, nous allons pouvoir leur appliquer un filtre de couleur. Le filtre est appliquable sur les Drawables grâce à la fonction setColorFilter() :

flagGreen.setColorFilter(Color.parseColor("#52D052"), Mode.MULTIPLY);
flagRed.setColorFilter(Color.parseColor("#D11717"), Mode.MULTIPLY);

Pour effectuer un effet différent de filtre, on peut faire comme pour les calques sous Photoshop ou Paint.net, on sélectionne un « mode de calque ». Ici j’ai opté pour un mode de multiplication pour obtenir le résultat souhaité. Maintenant vous pouvez peindre vos Drawables dans des Canvas, les afficher dans une ImageView, ils apparaîtrons comme la capture de début de l’article. Si vous oubliez d’appeler la fonction mutate() sur vos Drawable, ils s’afficheront avec le dernier filtre appliqué (ici tous en rouge).

Gestion des différents écrans de même densité

Gestion des différents écrans de même densité

by Throrïn 1 Comment

Si vous vous êtes essayés au développement Android, vous avez pu constater que son plus gros défaut, c’est les différentes résolutions d’écran (et les Roms constructeurs/opérateurs). Dans la plupart des cas, on peut se débrouiller avec les différents dossiers de ressource de base comme ceci :

  • ldpi (ex : HTC tatoo)
  • mdpi (ex : Samsung Galaxy Spica)
  • hdpi (ex : Nexus One/S)
  • xhdpi  (ex : Asus EEEPad Transformers)

Le souci, c’est que certaines de ces densitées peuvent être utilisées par des résolutions utilisant un ratio différent. Par exemple, le Nexus One et le Motorola Milestone ont chacun une densité HDPI mais l’un a une résolution de 480×800 (ou WVGA800) et l’autre une résolution de 480×854 (ou WVGA854).

Si vous utilisez une ressource de taille fixe (comme une image de SplashScreen) vous vous retrouverez avec une bande noire sur les écrans WVGA854. Nous allons donc voir comment renseigner à Android que nous allons chercher le même fichier (même nom) mais uniquement pour l’un ou l’autre des écrans.

Pour ce faire, nous allons créer deux machines virtuelles Android différentes. L’une utilisant un écran en WVGA800 avec une densité de 240dp et l’autre avec un écran WVGA854 d’une même densité que la précédente.

notre émulateur milestone

notre émulateur nexus One

Maintenant nous allons créer un projet Android de base avec comme layout main.xml le suivant :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/splash" />

</LinearLayout>

Et voici l’image splash.png utilisée dans notre ImageView. Elle est à placer dans /res/drawable-hdpi :

[]1

Splash pour le N1

Pour bien voir sa contenance sur l’écran, nous allons mettre notre application en fullScreen tout en désactivant la barre de titre (la barre grise moche qui dit le nom de l’application). Rajoutez ces lignes suivantes dans la méthode onCreate de votre application juste avant l’appel à setContentView():

requestWindowFeature(Window.FEATURE_NO_TITLE);  
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Maintenant lancez l’application sur les deux émulateurs afin de voir le rendu sur chacun :

Résultat sur le WVGA800

Résultat sur le WVGA854

Comme vous pouvez le voir, nous nous retrouvons avec une bande noire apparaissant sur notre émulateur WVGA854. Nous allons donc rajouter le répertoire suivant : drawable-port-hdpi-854×480. Si on le décompose cela donne :

  • drawable            : type de ressource
  • port                : orientation (land pour paysage, port pour portrait)
  • hdpi                : densité de l’écran
  • 854×480             : résolution de l’écran

Nous allons donc pouvoir rajouter le splash suivant dans ce dossier afin d’avoir le bon rendu sur chacun des émulateurs. N’oubliez pas de le nommer de la même façon que l’autre splash à savoir splash.png.

[]2

notre nouveau splash pour WVGA854

Et voilà le résultat :

Résultat final sur le WVGA800

Résultat final sur le WVGA854

Maintenant avec ceci vous savez utiliser les ressources pour toutes les résolutions existantes et à venir sur Android. Mais rassurez-vous, la plupart du temps les répertoires citées au début de l’article suffisent amplement pour couvrir l’ensemble du parc. Source :

http://developer.android.com/guide/practices/screens_support.html