Conseil elaboration design particulier

Version imprimable

Bonjour je post ici dans le but d'avoir quelques éclaircissements.

J'aimerais obtenir ce design ci :

http://i.stack.imgur.com/caCEhl.jpg

Pour cela j'ai pensé utiliser un Fond d’écran avec une croix en bas et centrée, puis je viendrai placer mes 4 boutons dessus grâce a un RelativeLayout.
Voici mon fichier xml actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_cross"
    android:orientation="vertical" >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="F1\n" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="300dp"
        android:layout_marginLeft="50dp"
        android:text="Left\nbutton" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right\nbutton"
        android:layout_alignParentRight="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="300dp"
        android:layout_marginRight="50dp"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="380dp"
        android:text="Bottom\nbutton" />
</RelativeLayout>

Le soucis est que je declare les margins ect en "dur" et que cela n'est pas adapte pour tout les smartphones bien évidemment..

Auriez vous une idée de comment placer les éléments différemment ?
Merci

23/04/2013, 01h39
nicroman

Utilise un LinearLayout (gravity=bottom)
Dans lequel tu colles ton RelativeLayout (carré, grace à la croix).

Puis les Boutons sont répertis simplement par rapport au layout:

Bouton1:
layout_alignParentTop="true"
layout_centerHorizontal="true"

Bouton2:
layout_alignParentRight="true"
layout_centerVertical="true"

Bouton3:
layout_alignParentBottom="true"
layout_centerHorizontal="true"

Bouton4:
layout_alignParentLeft="true"
layout_centerVertical="true"

Merci Nicroman,

En suivant tes directives j'ai donc ce xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="bottom"
    android:background="@drawable/background">
    <RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/backgroundpluscross">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
		android:layout_centerHorizontal="true"
        android:text="Top\nButton" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
		android:layout_centerVertical="true"
        android:text="Right\nbutton" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom\nbutton"
        android:layout_alignParentBottom="true"
		android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left\nbutton"
        android:layout_alignParentLeft="true"
		android:layout_centerVertical="true"/>
</RelativeLayout>
</LinearLayout>

Le soucis est maintenant que mon RelativeLayout prend toute la place qu'il peut (si il n'y a pas d'autres éléments au dessus de lui).

Dans le meilleur des cas j'aurais aime que ce RelativeLayout prenne les dimensions de son Background (ici ce sera juste la croix avec mon background) au lieu de prendre tout l'espace disponbile.. ?

Y a t il un moyen ? Ou devrais-je declarer un android:layout_height="" dans mon RelativeLayout en dur (en dp) ?

23/04/2013, 13h02
nicroman

On en reviendrait au problème initial...

Pourquoi ne pas utiliser une ImageView pour la croix ?

Je vois..

Dans l’idée cela serais mieux que j’enlève le background du RelativeLayout et que je place une ImageView contenant seulement la croix avec un fond transparent en plein milieu du RelativeLayout comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="bottom"
    android:background="@drawable/background">
    <RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
		android:layout_centerHorizontal="true"
        android:text="Top\nButton" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
		android:layout_centerVertical="true"
        android:text="Right\nbutton" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom\nbutton"
        android:layout_alignParentBottom="true"
		android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left\nbutton"
        android:layout_alignParentLeft="true"
		android:layout_centerVertical="true"/>
 <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/onlycross"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>
</LinearLayout>

Est ce bien cela ?