Bonjour tout le monde,

je découvre Android Studio, et je suis sur la partie design en xml.

J'utilise le constraint layout et j'essaie de placer des views. Par exemple des "button" ou des "textview" pour chaque vue, je dois mettre obligatoirement 2 contraintes et c'est là que je bloque, je ne sais pas à quoi lier chaque contrainte et lesquelles choisir. Par exemple je crée un EditText que je place en haut et un Button qui doit se placer en bas à droite de EditText pour valider ce qu'on va taper dans EditText. Mais comment choisir quelle contrainte et à quoi lier celle qui sera choisie...

il y a les 4 contraintes mais je ne sais pas ce qu'il faut faire, j'ai beau regarder les tutos ou des sites, ils ne disent pas pourquoi choisir celle du bas ou du haut ou bien alors gauche ou droite...

Merci de m'aider.

Salut Zoona, 

Je viens justement poser une question sur les ConstraintLayout et je vois passer la tienne à laquelle je peux peut-être aider à répondre.

En fait, il va falloir que tu fixes des contraintes sur tes éléments afin qu'ils se placent les uns par rapport aux autres (et par rapport au "parent"). 

Il y a deux contraintes minimum à donner :
- une concernant l'axe horizontal
- une concernant l'axe vertical

Pour chaque axe, tu peux décider de placer une contrainte d'un seul côté (genre "je veux que le côté gauche de mon élt B touche le côté droit de l'élt A) voire deux (et ça te permet alors de centrer un élément, de lui faire prendre la place entière de l'espace, et même plus... mais chaque chose en son temps).

Dans ton exemple, je comprends que tu veux caler ton bouton en dessous de ton EditText et tout à droite de l'écran (+/- un padding ou margin que tu pourras toujours rajouter selon ton goût).

Du coup, sur ce bouton, il faut appliquer :
- une contrainte verticale qui lui indique de se placer en-dessous de l'EditText
- une contrainte horizontale qui lui indique de se placer tout à droite de l'écran (c'est à dire que le côté droit du bouton corresponde au côté droit du "parent", ici, l'écran entier)

Je suppose que tu as donné des noms à tes EditText (@id/my_edit_text) et Button (@id/my_button), au niveau de la déclaration du Button, tu devrais avoir qqch au moins comme ça niveau contrainte :

app:layout_constraintEnd_toEndOf="parent"   [je veux que le côté droit de mon bouton corresponde au côté droit de mon parent, ici, mon layout entier donc mon écran.... pour info, il vaut mieux utiliser "End" que "Right" car ça permet à Android d'adapter dans les pays où on lit dans l'autre sens]
app:layout_constraintTop_toBottomOf="@+id/my_edit_text" [je veux que le côté haut de mon bouton corresponde au bas de mon EditText].

D'ailleurs, pour suivre l'exemple, pour celle de l'EditText, côté contraintes, tu auras certainement qqch comme :
app:layout_constraintStart_toStartOf="parent" 
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
Étant contraint à droite (par le endtoend) et à gauche (par le starttostart), l'EditText va être :
- centré si tu mets ton "layout_width" à "wrap_content"
- ou bien étendu pour prendre toute la place (comme un "match_parent", qu'on ne doit pas utiliser en ConstraintLayout) si tu mets "layout_width" à 0.
Le ToptoTop permet de caler l'EditText en haut de la fenêtre.

Voilà ma compréhension de ton problème, j'espère que je raconte pas trop de bêtises. Maintenant, je vais créer un nouveau sujet pour mon problème .

Pafacil a écrit:

Salut Zoona, 

Je viens justement poser une question sur les ConstraintLayout et je vois passer la tienne à laquelle je peux peut-être aider à répondre.

En fait, il va falloir que tu fixes des contraintes sur tes éléments afin qu'ils se placent les uns par rapport aux autres (et par rapport au "parent"). 

Il y a deux contraintes minimum à donner :
- une concernant l'axe horizontal
- une concernant l'axe vertical

Pour chaque axe, tu peux décider de placer une contrainte d'un seul côté (genre "je veux que le côté gauche de mon élt B touche le côté droit de l'élt A) voire deux (et ça te permet alors de centrer un élément, de lui faire prendre la place entière de l'espace, et même plus... mais chaque chose en son temps).

Dans ton exemple, je comprends que tu veux caler ton bouton en dessous de ton EditText et tout à droite de l'écran (+/- un padding ou margin que tu pourras toujours rajouter selon ton goût).

Du coup, sur ce bouton, il faut appliquer :
- une contrainte verticale qui lui indique de se placer en-dessous de l'EditText
- une contrainte horizontale qui lui indique de se placer tout à droite de l'écran (c'est à dire que le côté droit du bouton corresponde au côté droit du "parent", ici, l'écran entier)

Je suppose que tu as donné des noms à tes EditText (@id/my_edit_text) et Button (@id/my_button), au niveau de la déclaration du Button, tu devrais avoir qqch au moins comme ça niveau contrainte :

app:layout_constraintEnd_toEndOf="parent"   [je veux que le côté droit de mon bouton corresponde au côté droit de mon parent, ici, mon layout entier donc mon écran.... pour info, il vaut mieux utiliser "End" que "Right" car ça permet à Android d'adapter dans les pays où on lit dans l'autre sens]
app:layout_constraintTop_toBottomOf="@+id/my_edit_text" [je veux que le côté haut de mon bouton corresponde au bas de mon EditText].

D'ailleurs, pour suivre l'exemple, pour celle de l'EditText, côté contraintes, tu auras certainement qqch comme :
app:layout_constraintStart_toStartOf="parent" 
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
Étant contraint à droite (par le endtoend) et à gauche (par le starttostart), l'EditText va être :
- centré si tu mets ton "layout_width" à "wrap_content"
- ou bien étendu pour prendre toute la place (comme un "match_parent", qu'on ne doit pas utiliser en ConstraintLayout) si tu mets "layout_width" à 0.
Le ToptoTop permet de caler l'EditText en haut de la fenêtre.

Voilà ma compréhension de ton problème, j'espère que je raconte pas trop de bêtises. Maintenant, je vais créer un nouveau sujet pour mon problème .

merci Pafacil, en fait je fais des tests, et j'essaie ça par exemple, imagine je crée un bouton je lui donne :

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintStart_toStartOf="parent"

à quoi ça sert de mettre ces contraintes? Parceque je pourrai quand même le déplacer avec la souris et placer ce bouton tout en bas de l'écran.

J'ai tendance à faire tout à la main pour le moment (en vérifiant juste ce que ça donne sur la partie Design, voire en modifiant depuis la partie Design).

Le problème sinon, en tous cas à mon niveau, c'est qu'en déplaçant toi-même l'élément, ton IDE va ajouter des contraintes (des lignes xml) pour matcher ce que tu viens de faire à l'écran et il est possible que ce soit pas celles que tu souhaites (dans le sens, il va peut-être utiliser par exemple une valeur en absolu quand toi tu voudrais du pourcentage).

Donc, j'aurais tendance plutôt à réfléchir aux contraintes que je veux placer (je veux que ce texte soit en haut à gauche, que ce bouton soit à droite dudit texte, etc...) et à le traduire ensuite directement en xml. Ensuite, je vérifie sur l'onglet Design.

L'avantage de fixer des contraintes, c'est que ton modèle va être adaptatif en fonction de l'écran du smartphone / tablette.
Ça me rappelle beaucoup le RelativeLayout (je place mes éléments en fonction des autres) mais en plus, y a un côté plus puissant grâce à de nouveaux outils... que je découvre aussi (genre les layout_constraintDimensionRatio qui permette de gérer un ratio, les layout_constraintHorizontal_bias et layout_constraintVertical_bias qui permette de "décentrer" en fonction d'un pourcentage, genre "je veux qu'il y ait 30% d'espace à droite du bouton et 70% à gauche, les "guidelines" pour rajouter des points d'arrêts...).

Ça semble puissant... mais ça demande un peu d'habitude je crois !