Adaptation d'un menu personnalisé à tous les écrans

[jok]

Bonjour,

 

Je suis en train de développer une application qui nécessite un menu (dans la ActionBar Android), ainsi qu'un sous-menu.

 

Ce sous-menu est composé de 7 éléments de type ImageButton, et j'aimerais que la taille de ces boutons s'adapte en fonction du device utilisé, mais ce menu doit absolument prendre toute la largeur de l'écran.

 

Par exemple, je fais mes tests sur une tablette 10", c'est OK (sauf peut-être pour le dernier icône qui est un peu rogné), mais quand je passe sur une 7", c'est catastrophique.

 

Ce que je veux :

 

 

Ce que j'ai :

 

 

Voici le XML du sous-menu au cas où :

<!-- Sous-menu -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/sousmenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="false"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="false"
        android:layout_centerInParent="true"
        android:weightSum="7">

        <ImageButton
            android:id="@+id/item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item1"
            android:padding="0dip" />
        <ImageButton
            android:id="@+id/item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item2"
            android:layout_toRightOf="@id/item1"
            android:padding="0dip" />

...

        <ImageButton
            android:id="@+id/item7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item7"
            android:layout_toRightOf="@id/item6"
            android:padding="0dip" />
    </LinearLayout>

En fait, les ImageButtons, que j'appelle dans les mockups ci-dessus "item", conservent la taille originale des images, et le "weight" que j'ai mis sers juste à les centrer et non à les redimensionner. Je dois avouer que c'est assez tricky de s'adapter aux tailles d'écrans Android, mais s'il vous plait, prouvez-moi que ce n'est pas impossible !

 

En vous remerciant d'avance pour votre aide !

 

[Vbarthel]

Je crois bien que si tu souhaites utiliser le poids, le "weight" pour ajuster automatiquement la largeur, "width", de tes ImageButton, il faut que tu mettes leur "width" à 0dp.

<!-- Sous-menu -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/sousmenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="false"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="false"
        android:layout_centerInParent="true"
        android:weightSum="7">

        <ImageButton
            android:id="@+id/item1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item1"
            android:padding="0dip" />
        <ImageButton
            android:id="@+id/item2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item2"
            android:layout_toRightOf="@id/item1"
            android:padding="0dip" />

...

        <ImageButton
            android:id="@+id/item7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/item7"
            android:layout_toRightOf="@id/item6"
            android:padding="0dip" />
    </LinearLayout>

Par contre un truc que je ne comprends pas, ton image source contient quoi ? le texte "Item x"? la couleur de fond? les deux?

[jok]

J'ai déjà essayé, et cela ne fonctionne malheureusement pas, cela me met des marges avec un fond gris assez bizarre, comme s'il y avait un bouton derrière les images.

[Vbarthel]

Et c'est normal, c'est un ImageButton! De base il y a un background gris, si tu souhaites l'enlever il faut mettre l'attribut background à null:

android:background="@null"

Si je comprends bien ton image, c'est "simplement" une couleur de fond avec le texte? Je ne vois pas trop l'intérêt d'utiliser une image pour faire ça, il serait peut-être plus simple de mettre directement une couleur de fond à un simple bouton et de mettre le texte approprié, non ?