Issues with XML Layout and Software Buttons

Issues with XML Layout and Software Buttons - android

So basically I have an activity with 4 buttons that in Android Studio look out of the way of the software buttons at the bottom of the screen but when I run it on my phone they are not. I'm not sure if I have the right constraints on the bottom button or not?
<?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=".NewMainMenu"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button"
android:layout_width="411dp"
android:layout_height="100dp"
android:layout_marginTop="258dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button2"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</android.support.constraint.ConstraintLayout>

if you use from ConstraintLayout, you can add this attribute:
app:layout_constraintBottom_toBottomOf="parent"
by this code, your view sticks on bottom of layout.
and for other views you can use from this code:
app:layout_constraintBottom_toBottomOf="#+id/{bottom View}"

The problem is that you are explicitly setting the button heights and the top button's top margin to fixed values. On your device, the total sum of all the heights and the padding exceed the height of the device.
An easy fix is to not constrain the top of the topmost button to the parent and remove the top margin. Then it will lay above the button below it but won't push down from the top of the parent.
Generally speaking, you should avoid fixed-size widths and height for this exact reason. You can leverage things like weighted chains in ConstraintLayout to size things proportionally instead of explicitly.
See the ConstraintLayout docs for more.
Hope that helps!

Your constraints are wrong. You have used both app:layout_constraintTop_toBottomOf and app:layout_constraintBottom_toTopOf constraints which is wrong. Use only app:layout_constraintBottom_toTopOf constraint to stack one above other.
Use this 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"
tools:context=".NewMainMenu"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>

some codes is not right
please write below codes:
<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">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_orange_dark"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />

Related

Proper menaging buttons in layout - Android Studio

I want to put 4 buttons in in 2x2 way, but I would like to make their width constance as half of a screen. How to do it, when I want to keep it on horizontal mode too (so in horiozontal mode they have the same place and half of screen width)?
This is current my layout.xml:
<?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"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/buttonSecondAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
<TextView
android:id="#+id/questionNumberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:text="Question 1"
android:textAlignment="center"
android:textSize="32sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/questionContentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:text="someQuestionContent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/buttonFirstAnswer"
android:layout_width="186dp"
android:layout_height="104dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.022"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionContentTextView"
app:layout_constraintVertical_bias="0.054" />
</androidx.constraintlayout.widget.ConstraintLayout>

So if you put items in a horizontal/vertical chain, if you set the width/height to 0dp, it will occupy whatever space is available on the x/y axis. For more info visit: https://developer.android.com/training/constraint-layout
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EB0808">
<!-- tools:context=".MainActivity">-->
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button1" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintEnd_toStartOf="#id/button4"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintTop_toTopOf="#id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button3" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to give percentage weight in constraint layout android

How to design below screen with stretchable space for remaining space based on device height
I can easily design it using linearlayout using weigh and weight sum attribute but not sure how to do it in constraint layout

If the views that you have defined have a defined height (either wrap_content or a specified height) then the question is how to distribute the left-over space. If I read your question correctly, you want 40% of the left-over space to be at the top, 20% in the middle and 40% at the bottom for a total of 100% of the space and 100% of the space is the height of the ConstraintLayout less the combined heights of the widgets.
You can use weights in a ConstraintLayout chains to distribute weights, but the weights will be assigned to Space widgets as follows. All the views must be part of a vertical chain constrained to the top and bottom of the ConstraintLayout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Space
android:id="#+id/space40.1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/view1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="40" />
<View
android:id="#+id/view1"
android:layout_width="100dp"
android:layout_height="125dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#+id/space20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space40.1" />
<Space
android:id="#+id/space20"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/view2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view1"
app:layout_constraintVertical_weight="20" />
<View
android:id="#+id/view2"
android:layout_width="300dp"
android:layout_height="50dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#+id/view3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/space20" />
<View
android:id="#+id/view3"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginTop="16dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#+id/view4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2" />
<View
android:id="#+id/view4"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_marginTop="32dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#+id/space40.2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view3" />
<Space
android:id="#+id/space40.2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view4"
app:layout_constraintVertical_weight="40" />
</androidx.constraintlayout.widget.ConstraintLayout>
The layout displays as follows:

You can combine GuideLines with percentage values like 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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.8"
android:orientation="horizontal" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.1"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is how it looks on preview (and on the device if you try to run it):

ConstraintLayout: Center two buttons horizontally

Although it seems simple I couldn't make it, I would like the two buttons to touch each other from their sides and to be centered horizontally, like so:
I tried the answers in this thread: Center two buttons horizontally, but it only relates to RelativeLayout and not ContrainstLayout
I also tried to play with
app:layout_constraintHorizontal_chainStyle="spread"
But no success. My not-helpful xml:
<?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"
android:background="#color/colorBackground"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
style="#style/btnStyle"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#color/btnTrue"
android:text="Button"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
style="#style/btnStyle"
android:layout_height="wrap_content"
android:layout_marginEnd="56dp"
android:background="#color/btnFalse"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is this possible to achieve with ConstraintLayout?

This should do a job.
<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/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Key is removing not needed parameters and use
app:layout_constraintHorizontal_chainStyle="packed"

You have to create a horizontal chain for both buttons with chain style packed
Here is a sample
<?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/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:text="Button"
android:textColor="#ffffff"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ad11"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Output:

You can do it putting the buttons inside a horizontal LinearLayout
<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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
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:backgroundTint="#color/colorPrimary"
android:text="Button"
android:textColor="#ffffff" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorAccent"
android:text="Button" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Try using "guidelines":
<?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/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/green"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:text="Button"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

For such construct your views width needs to be 0dp. Also for button2, make sure it is from button1 and till parent's end horizontally. You have not shown your style so there may be other issues.

Android constraint layout divide in horizontal

I'm working with an Android project and I used ConstraintLayout.
I want to design the layout as two blocks which stay in horizontal line. Each block will get 50% of the width:
How can I do this with ConstraintLayout?

There are Two ways you can do this.
Using Chain Constraint
Using Guideline Constraint
1st : Using Chain Constraint
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
2nd : Using Guideline Constraint
<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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="#id/guideline1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>
Output : Both gives same output.

Android ConstraintLayout: Controls in ImageView mess up ImageView layout

I want to have two, side-by-side ImageViews that spread to take up 50% of the screen each. Over each, I want to arrange an array of Buttons and TextViews. I am doing this in a single ConstraintLayout.
When I set up the ImageViews by themselves, they lay out properly using these properties:
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
The ImageViews have constraints like this (there's also a 1dp View separator bar):
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/separator_bar"
app:layout_constraintTop_toTopOf="parent"
Here's what the split looks like:
However, when I add the Buttons and TextViews and chain them together, linking them to the sides of the ImageView and each other, making them essentially "contained" in the ImageView, the ImageView shrinks horizontally so that it is the width of the widgets, almost as if wrap_content were applied. What's even weirder is that the other ImageView also shrinks, even though I haven't added its widgets yet.
When marked up, the controls look like this:
<Button
android:id="#+id/btnKingW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♔"
app:layout_constraintBottom_toTopOf="#id/btnQueenW"
app:layout_constraintEnd_toStartOf="#id/tvKingW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
(the constraints of the original ImageView are unchanged)
Here's what it looks like with just one ImageView anchored to the parent on all four sides. The widgets look fine.
And here's the hot mess when I use the two ImageViews.
What's going on here? Why does linking a widget inside another widget/view cause the nice layout that I had before to change? I would assume that the ImageViews were anchored to the parent and shouldn't move, but this is clearly not the case.
I've looked at a bunch of tutorials, but they all seem to show me how to perform a half dozen tricks using the Android Studio GUI and don't really get into the zen of how the layouts are evaluated. I want to actually grok what's going on and not just click some buttons in a GUI design tool. FWIW, I did try the GUI design tool and spent about as much time cleaning up the magic trash it added to my XML (no, I don't need padding, thanks) as I would have saved using the tool, so I essentially abandoned it and now just use it to experiment.
I'm new to Android development, if that isn't clear. This is a toy app for an ungraded Udacity course.
Full XML:
<?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.android.chessmaniac.MainActivity"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/white_king_image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:alpha="0.3"
android:contentDescription="#string/white_king_chesspiece"
android:scaleType="centerCrop"
android:src="#mipmap/white_king"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/separator_bar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/separator_bar"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/black_king_image"
app:layout_constraintStart_toEndOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/black_king_image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:alpha="0.3"
android:contentDescription="#string/black_king_chesspiece"
android:scaleType="centerCrop"
android:src="#mipmap/black_king"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/separator_bar"
app:layout_constraintTop_toTopOf="parent" />
<!-- WHITE BUTTONS -->
<Button
android:id="#+id/btnKingW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♔"
app:layout_constraintBottom_toTopOf="#id/btnQueenW"
app:layout_constraintEnd_toStartOf="#id/tvKingW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
<Button
android:id="#+id/btnQueenW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♕"
app:layout_constraintBottom_toTopOf="#id/btnRookW"
app:layout_constraintEnd_toStartOf="#id/tvQueenW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnKingW" />
<Button
android:id="#+id/btnRookW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♖"
app:layout_constraintBottom_toTopOf="#id/btnBishopW"
app:layout_constraintEnd_toStartOf="#id/tvRookW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnQueenW" />
<Button
android:id="#+id/btnBishopW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♗"
app:layout_constraintBottom_toTopOf="#id/btnKnightW"
app:layout_constraintEnd_toStartOf="#id/tvBishopW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnRookW" />
<Button
android:id="#+id/btnKnightW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♘"
app:layout_constraintBottom_toTopOf="#id/btnPawnW"
app:layout_constraintEnd_toStartOf="#id/tvKnightW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnBishopW" />
<Button
android:id="#+id/btnPawnW"
android:layout_width="42dp"
android:layout_height="42dp"
android:text="♙"
app:layout_constraintBottom_toBottomOf="#id/white_king_image"
app:layout_constraintEnd_toStartOf="#id/tvPawnW"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#id/white_king_image"
app:layout_constraintTop_toBottomOf="#id/btnKnightW" />
<!-- WHITE TEXTVIEWS -->
<TextView
android:id="#+id/tvKingW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WK"
app:layout_constraintBottom_toTopOf="#id/tvQueenW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnKingW"
app:layout_constraintTop_toTopOf="#id/white_king_image"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/tvQueenW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WQ"
app:layout_constraintBottom_toTopOf="#id/tvRookW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnQueenW"
app:layout_constraintTop_toBottomOf="#id/tvKingW" />
<TextView
android:id="#+id/tvRookW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WR"
app:layout_constraintBottom_toTopOf="#id/tvBishopW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnRookW"
app:layout_constraintTop_toBottomOf="#id/tvQueenW" />
<TextView
android:id="#+id/tvBishopW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WB"
app:layout_constraintBottom_toTopOf="#id/tvKnightW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnBishopW"
app:layout_constraintTop_toBottomOf="#id/tvRookW" />
<TextView
android:id="#+id/tvKnightW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WN"
app:layout_constraintBottom_toTopOf="#id/tvPawnW"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnKnightW"
app:layout_constraintTop_toBottomOf="#id/tvBishopW" />
<TextView
android:id="#+id/tvPawnW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WP"
app:layout_constraintBottom_toBottomOf="#id/white_king_image"
app:layout_constraintEnd_toEndOf="#id/white_king_image"
app:layout_constraintStart_toEndOf="#id/btnPawnW"
app:layout_constraintTop_toBottomOf="#id/tvKnightW" />
</android.support.constraint.ConstraintLayout>

Try this
<?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">
<ImageView
android:id="#+id/imageOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/imageTwo"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<ImageView
android:id="#+id/imageTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/imageOne"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/guideline" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline"
tools:layout_editor_absoluteY="232dp" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#id/button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toRightOf="#+id/button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/button2" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="87dp" />
</android.support.constraint.ConstraintLayout>
OUTPUT
Here is the good tutorial for this

First you have to arrange the image views correctly. Like the LinearLayout, you can set weight in ConstraintLayout.
<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">
<ImageView
android:id="#+id/imageOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/img_one"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/imageTwo"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/img_two"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/imageOne"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Then try to align button over the ImageViews. Hope it helps:)

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Issues with XML Layout and Software Buttons - android

if you use from ConstraintLayout, you can add this attribute: app:layout_constraintBottom_toBottomOf="parent" by this code, your view sticks on bottom of layout. and for other views you can use from this code: app:layout_constraintBottom_toBottomOf="#+id/{bottom View}"

Related

Proper menaging buttons in layout - Android Studio

How to give percentage weight in constraint layout android

ConstraintLayout: Center two buttons horizontally

Android constraint layout divide in horizontal

Android ConstraintLayout: Controls in ImageView mess up ImageView layout

Categories

Resources