I make the first application. I need two timers below - always in the middle of the two halves (horizontally). In other words, they are in the middle of two columns of the table. And dashes should start from the bottom, as in the picture.
While working only with ConstraintLayout , and already tortured. Its binding goes to the edge of the element. Those. if the size of the element changes, then everything moves, and he himself does not remain in place. And for me, for example, 01 o'clock changes to 1. What should I look at?

enter image description here

  • one
    You should understand that 01 (2 characters) and 1 (1 character) are a different number of characters and cannot be formatted in any way. In the question you need to show what happens and what you would like to get in the end (left centering, centering, rightmost, or how a different number of characters should be compensated), also attach the markup with which you have problems. a screenshot of how everything is exactly with the same number of characters in this case is completely superfluous, since it does not explain the problem in any way) - pavlofff
  • one
    It is not quite clear what the problem is (what the result is required), but most likely you need to look towards the reference lines (guideline) with percentages and the gravity properties of widgets - pavlofff
  • 2
    You need a ConstraintLayout with Guideline bindings. Nested LinearLayout and even with a weight parameter degrade performance. Learn to write directly on the consternate - Sviat Volkov
  • one
    There are several implementation options, but just a view with a black background is quite suitable in this case. stretching it from edge to guideline and done - Sviat Volkov
  • 2
    a question of those that roll up 100 times faster than telling. - Shwarz Andrei

1 answer 1

For the layout of such a layout you will need reference lines (guidline).

We place three reference lines on the layout (right click on the visual layout editor: Helpers -> Add vertical \ horizontal guidelines ): two vertical (1 and 2) and one horizontal (3). Vertical divide the screen into 3 equal parts (33% and 66%), horizontal - upper quarter (25%). To change the position of the reference line to a percentage, click on the circle.

scrn

Now we fix the widgets. The left counters are fastened with the right edge to the first reference line, with the left edge to the edge of the screen (so that you can draw a line to the end of the screen). In this case, the upper bottom to 3 reference lines, and the lower riding to it. We set the android: gravity = "right" attribute to these widgets so that the text starts from the right edge.
The right counter is fastened with the left side to the second reference line, the right side to the edge of the screen, and the top and bottom to the top and bottom of the left bottom counter - so they will be located at the same level horizontally.
The button and text are evenly distributed to the remaining space vertically through the chains tool (right mouse button: Center -> Center Verticaly ).

The lines under the counters can be made just by specifying the 9-path image with a dash bottom from these widgets as a background - this is the simplest option (in the example I will not do this).

Here's what happened:

scrn

Markup:

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.Guideline android:id="@+id/guidelineVertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.33" /> <android.support.constraint.Guideline android:id="@+id/guidelineVertical2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.66" /> <android.support.constraint.Guideline android:id="@+id/guidelineHorizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.25" /> <TextView android:id="@+id/count1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:gravity="right" android:text="01:00:15" android:textSize="21sp" app:layout_constraintBottom_toTopOf="@+id/guidelineHorizontal" app:layout_constraintEnd_toStartOf="@+id/guidelineVertical" app:layout_constraintStart_toStartOf="parent" /> <TextView android:id="@+id/count2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:gravity="right" android:text="1:00:00" android:textSize="21sp" app:layout_constraintEnd_toStartOf="@+id/guidelineVertical" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal" /> <TextView android:id="@+id/count3" android:layout_width="0dp" android:layout_height="wrap_content" android:text="12:00:00" android:textSize="21sp" app:layout_constraintBottom_toBottomOf="@+id/count2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/guidelineVertical2" app:layout_constraintTop_toTopOf="@+id/count2" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toTopOf="@+id/text" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/count2" /> <TextView android:id="@+id/text" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:text="Test text ..." app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button" /> </android.support.constraint.ConstraintLayout>
  • Great, thank you! - keltkelt