0

I want to draw a keyboard with big buttons for a calc app, three per row, and between these three buttons I need to put a small empty margin. I know how to do that with a LinearLayout but I completly ignore how this can be achieved with Constraint Layouts.

I tried to assign some distance between the buttons, centering the central one and then constraining to the central button the right and the left one. the result is terrible because using different screens the distance between the button can become huge, while instead I want to achieve the same proportions in all the screens, in other words the distance between the buttons(the small margins) should be always really tiny, undependently by the screen, filling almost all the screen surface with the buttons and not with the empty spaces.

Drocchio
  • 383
  • 4
  • 21
  • https://idownvotedbecau.se/nocode/ Include your code, screenshots and layoutfile. This will help you get a quicker response. Also follow the How To Ask guide before posting a question here: https://stackoverflow.com/help/how-to-ask – MD Naseem Ashraf Mar 16 '19 at 09:18
  • I cannot include code, because I have no idea how to achieve this. – Drocchio Mar 16 '19 at 09:18
  • Study and learn from Google Android guides and documentation first, try to code and if you run into a problem then post here.https://developer.android.com/training/constraint-layout https://developer.android.com/reference/android/support/constraint/ConstraintLayout – MD Naseem Ashraf Mar 16 '19 at 09:20
  • ..I thought it would be even misleading if I write some generic code that shows three buttons constrained in a complete wrong way. – Drocchio Mar 16 '19 at 09:21
  • Start somewhere. People are more likely to fix a small problem in an existing code than give you free code solutions. Share your layout and what you've learned and what you're struggling with. If you need more in-depth help, try android developer groups on Reddit, facebook etc which can provide more broad and general help. – MD Naseem Ashraf Mar 16 '19 at 09:23
  • 1
    oh thanks for the link, I did not see the official documentation, but some random tutorials. I am now curious to try if using this `spread inside` feature in the link you gave me could help me – Drocchio Mar 16 '19 at 09:24
  • I get what you mean, thanks for the explanation. I usually share code, but what I need is just an information not code, and possibly stackoverflow is not the place, because could generate discussions etc – Drocchio Mar 16 '19 at 09:27

1 Answers1

2

To achieve this in constraintLayout you can use barriers/guidelines/chains.

The easiest solution would be to use chains:

<androidx.constraintlayout.widget.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:id="@+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.MenusDesign.ExpandableCategoriesMenu.ExpandableCategoriesMenu">


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2" />

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
  • 1
    thank you very much from your example I fully understand the official documentation now – Drocchio Mar 16 '19 at 12:53
  • for future reference for who needs I found as support of your nice reply a realy cool link https://constraintlayout.com/basics/create_chains.html – Drocchio Mar 16 '19 at 16:38