I'm banging my head against the barriers of ConstraintLayout (sorry for the pun...)
Here's what I would like to accomplish:
Place a label and an edittext in the "first row". Align their centers vertically. Add a horizontal barrier referencing those two UI elements below them.
Add two buttons in a second row, one left aligned, one right aligned. Have another barrier below those two.
Let a RecyclerView fill all the space below the second barrier.
So here's my attempt at a layout file:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<!-- Try to cut from here..... -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageButton,button" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Problem is, that the first barrier moves up, as soon as I add something below it. It seems to move to the bottom of the smaller UI element, which seems a bit nonsensical to me.
The layout without the elements between the comments looks like this:
It stops working when I add the elements between the comments:
I'd be very happy, if you could explain what I'm doing wrong.
Cheers
EDIT:
Interestingly enough, I can get a little further by defining the buttons in the second row in reversed order.
But adding a second barrier below those two once again destroys the layout...
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
</android.support.constraint.ConstraintLayout>
Imho I don't see anything wrong in Your code.
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:"
app:layout_constraintBaseline_toBaselineOf="#+id/editText"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
tools:text="John Smith" />
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button,imageButton" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier" />
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Preview:
I've changed only constraintVertical_bias for constraintBaseline_toBaselineOf.
Related
I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.
It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.
Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.
I am using constraint layout Barrier and this is my layout -
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is what the resulting image looks like -
Based on the conversation on what exactly what the OP needs, constraint guideline will produce the intended result:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above code produces the following if the text keeps growing, it ensures the button stays on the screen like the following:
If you don't want the button to be cut at the end & wrap instead, add an End constraint:
app:layout_constraintEnd_toEndOf="parent"
So your button xml should be like the following:
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
The resulting output will be like this:
Now if you want otherwise, like the button would remain/retain its own size and the textview will not, then set the barrier direction to start instead of end & pass button as constraint referenced ids instead of textview like the following:
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="button" />
I tried this way blow,and it works.
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintEnd_toEndOf="#+id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
like this
So I programmed a simple app with android studio and the layout that is shown in the app when I run it is different than the xml file I designed.
Here is a link of an image of the problem.
https://imgur.com/6JIHSQ7
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subBtn"
android:textSize="30sp"
app:layout_constraintBaseline_toBaselineOf="#+id/addBtn"
app:layout_constraintStart_toStartOf="#+id/divBtn" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginLeft="36dp"
android:layout_marginBottom="42dp"
android:text="#string/addBtn"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/multBtn"
app:layout_constraintStart_toEndOf="#+id/subBtn" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="#string/number1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.444"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="39dp"
android:ems="10"
android:hint="#string/number2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="108dp"
android:layout_marginRight="108dp"
android:layout_marginBottom="336dp"
android:text="#string/multBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="88dp"
android:layout_marginLeft="88dp"
android:layout_marginBottom="336dp"
android:text="#string/divBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="#string/resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintVertical_bias="0.637" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think it might be related to the virtual device i'm using but I don't know if that's the problem.
The problem is, your addBtn and subBtn are not aware of the n2EditText. The addBtn depends on the divBtn and the divBtn is placed 336dp above the bottom edge of the screen.
If you need the addBtn to appear below the n2EditText then you need to add a vertical constraint connecting to the n2EditText. Once your buttons are connected to their immediate top elements, you don't need to add the bottom constraint to the bottom edge of the screen.
Imagine a ConstraintLayout as a collection of widgets hanging down from the top of the screen, each tied to the immediately top elements with the chains called "constraints". You don't need to tie the bottom widget to the ground unless it is required by design.
Here is the modified layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textSize="30sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintStart_toStartOf="#+id/n2EditText"/>
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toTopOf="#+id/subBtn"
android:layout_marginStart="16dp"/>
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="n1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="n2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText"/>
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/divBtn"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/divBtn"/>
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="#+id/subBtn"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/subBtn"/>
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="res"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="#+id/divBtn"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Anyway, when you have a lot of widgets, you may have to use a ScrollView to accommodate them all.
Try this
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="25dp"
android:layout_marginRight="25dp"
android:text="submit"
android:textSize="30sp"
app:layout_constraintEnd_toStartOf="#+id/addBtn"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="52dp"
android:text="add"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:ems="10"
android:hint="1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.439"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="36dp"
android:ems="10"
android:hint="2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="mult"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/addBtn" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:text="div"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/subBtn" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorPrimaryDark"
android:text="resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.547"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divBtn" />
</androidx.constraintlayout.widget.ConstraintLayout>
Probably on your layout editor and phone screen sizes are different. Use ConstraintLayout or some other add constraints to views
I cannot say definitly just looking at image but i think you are using facing problem because of your layout. Use LinearLayout to fix it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" />
<!-- EditText: number1 -->
<!-- EditText Number2 -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
</LinearLayout>
</LinearLayout>
Some general tips that can help:
Check the constraints if you're using ConstraintLayout or relatives between view if you're using RelativeLayout;
Check the values and the units of views;
Check the screen resolution of your "Preview" pane and Emulator.
If it's possible to provide some additional information about the layout that is used, if these tips didn't help.
In preview pane you can find info about resolutions here:
In the emulator pane you can simple see the sizes in the column:
I have a code as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
It looks like below.
However, at times I need to set left_text to gone. But I still want my Right to be at the right side of the screen. How could I achieve that?
(Currently when left_text is gone, my Right went to middle as per picture below)
I manage to solve it by setting my width="0dp" and android:textAlignment="viewStart" or android:textAlignment="viewEnd"
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewEnd"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
The width="0dp" will take up the entire space
You need to use Barriers
Try this
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text
UPDATE
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#3F51B5"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text
You can achieve this using Guideline. check example below
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline10"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />
My answer is similar to #Basi but I want to give extra information from my perspective:
When you work with guidelines and put your view width to wrap_content what may happen is that your view will overlap your guideline like this :
So my recommendation is to constraint both side of your view and set its width to 0dp (match_constraints ) and by doing it your view will fit into its bounds and your guideline won't overlap your view, then this will look like this now :
So if you want to use guidelines as in #Basi you better use 0dp on your width:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Right"
android:textColor="#F40"
android:textAlignment="textEnd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Left"
android:textColor="#F40"
android:textAlignment="textStart"
app:layout_constraintEnd_toStartOf="#+id/guideline10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this :
You can also use SequenceLayout to make it work.
<Sequences>
<Horizontal>
<Span id="#id/left_text" size="wrap"/>
<Span size="1w"/>
<Span id="#id/right_text" size="wrap"/>
</Horizontal>
</Sequences>
I tried your code and I am curious, why do you use constraint from Left to Right and from Right to Left?
There is no need for them. If you delete those constraints you have no problem.
Just to make things clear for setting view's position you need just one horizontal and one vertical constraint.
You need bias for both TextView in Constraint Layout and app:layout_constraintStart_toStartOf="parent" of another TextView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I am simply trying to make a scrollable layout with no luck...
I have no idea why it isn't working, it seems to be exactly as I read online.
The problem here is that the bottom of the included layout is cut of to fit exactly the screen size.
this is my layout xml:
<ScrollView 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=""
tools:layout_editor_absoluteY="81dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="opening game"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/GameTitleET"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/GameTitleET"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="153dp"
android:ems="10"
android:hint="Game's name"
android:inputType="textPersonName"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/GameContentET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="מהלך המשחק"
android:inputType="textMultiLine"
android:maxLines="8"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DeleteAndMakeYOurOwnButton" />
<Button
android:id="#+id/DeleteAndMakeYOurOwnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="Write your own game"
app:layout_constraintStart_toStartOf="#+id/GameContentET"
app:layout_constraintTop_toBottomOf="#+id/numberPicker2" />
<Switch
android:id="#+id/SendToReviewSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginStart="16dp"
android:text="הגש משחק להגשה"
app:layout_constraintBottom_toTopOf="#+id/DeleteAndMakeYOurOwnButton"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/include5"
layout="#layout/activity_create_post_methods"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/GameContentET" />
</android.support.constraint.ConstraintLayout></ScrollView>
Do you have any suggestion of what should i do? I also plan to add many more layouts to this main layout and I need it to scroll and show everything flawlessly.
Thank you a lot!