I can not change the location of elements on the markup. I do this: enter image description here

It turns out like this: enter image description here

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.basicview.MainActivity"> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_height="wrap_content" android:layout_width="88dp" android:text="Красный" android:gravity="center" android:layout_alignParentTop="true" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="16dp" /> <Space android:layout_height="0dp" android:layout_width="368dp" android:layout_weight="1" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="8dp" /> <Button android:layout_height="wrap_content" android:layout_width="88dp" android:text="Зелёный" android:gravity="center" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="210dp" /> <Space android:layout_height="0dp" android:layout_width="368dp" android:layout_weight="1" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="8dp" /> <Button android:layout_height="wrap_content" android:layout_width="88dp" android:text="Синий" android:gravity="center" android:layout_alignParentBottom="true" tools:layout_editor_absoluteY="0dp" tools:layout_editor_absoluteX="111dp" /> </android.support.constraint.ConstraintLayout>

That is, all the other buttons are hidden under the first. Can you please tell me what am I doing wrong?

  • It is necessary to lay out the code of the xml-file (click below in Android Studio "Text") - Tanya Orlova
  • Added code for xml file - Kirill Galchunov

2 answers 2

Widgets are placed in your markup, but there are no links between them and the edges of the screen.

In order to position three buttons evenly horizontally in ConstraintLayout you need to use the tool of this container - the chains. For this:

  1. We transfer our buttons with the approximate location to the markup, then we tie them to the top edge - click on each button one by one and drag the top point (it will turn green) to the top edge. A connection is established, indicated by the arrow:

screen

  1. Select all three buttons (Shift + left click on the button). Then in the top menu of icons, click on the two gray horizontal lines with a blue vertical line to the left (the Align icon) and there we press an icon with a vertical line and two blue arrows in the direction of each other (the Center Horizontally icon):

screen2

A horizontal link will appear - a chain will be added and chain icons will be added under the widgets. Everything, now on any screens these three buttons will be centered horizontally.
By clicking on the chain icon under any widget, you can change their horizontal interposition (together, evenly, along the sides).

Learn more about the Chains tool in ConstrainLayout and more options for the relative position of the connected widgets and their individual sizes and projections.

Official documentation on the issue.

Animated guide from Google .

PS: the Center Horizontally item is also in the context menu with the right click on the widget.

    You use ConstraintLayout, you need to set the location of the buttons relative to each other, you can read more here . Or just use LinearLayout with orientation = "horizontal", and attach buttons with space in order. Examples