ConstraintLayout relative distance in percentage %

ConstraintLayout relative distance in percentage % - android

I am working with ConstraintLayout and I want to set a percentage margin top to the Textview Sample from the Button 2 placed at 52% of the screen.
3% is of course compared to the height of the screen.
The position should be relative from another UI components, guidelines reference only from the top (or bottom) of the screen
It's possible to do this exclusively via xml?
I know that is possibile to do this programmatically and with standard layouts with weight but I need (if exist) the XML solution.
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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="32dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:text="BUTTON 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>

After some research I finally found a workaround.
With the beta version of the ConstraintLayoutLibrary 1.1.0-beta you can define the height in a percent mode.
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.03"
So I created an empty view for create space. Anyway, there isn't yet a method to define the marginTop in percent mode.
So for my specific case:
<?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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spaceView" />
<View
android:id="#+id/spaceView"
android:layout_width="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.03"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:text="BUTTON 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</android.support.constraint.ConstraintLayout>

I copied your code and added a guideline and used it inside the TextView
<?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">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:id="#+id/text_view_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.53" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_weight="10"
android:background="#00FF00"
android:text="SAMPLE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3"
app:layout_constraintTop_toTopOf="#+id/text_view_guideline" />
</android.support.constraint.ConstraintLayout>

You can do this without guide line. Just make sure to set the child of the ConstraintLayout to hold:
app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"
For example, we can place a self sized container in screen location of 0.52 vertically:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.52"
app:layout_constraintHeight_default="wrap"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Android studio doesn't draw button correctly, shifts down

In my Android studio project I have a fragment with constraint layout inside. Here is XML.
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topLayout">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As you can see the confirm button is centered with constraints in his parent.
But when I am running application in my Xperia z5 compact, a layout inspector shows that button is not centered.
Why does it happen and how to fix that?
Note if I am removing numberTextView with it's parent constarintLayout, the problem disappears.
Note In my code I am programmatically setting a text to numberTextView. In case when I am commenting that code i.e not setting text programmatically, button draws correctly.
Here is code part, where I am setting text to NumberTextView
private void performInitialLayout() {
fragmentViewHeight = fragmentView.getHeight();
ViewRelatedUtils.setHeightPercentage(topView, scrollView, 0.3);
ViewRelatedUtils.setHeightPercentage(pinLayout, scrollView, 0.4);
// here I am setting a text.
numberTextView.setText(number);
if (isProcessingPinConfirmation) showProcessing(); else hideProcessing();
wrapperView.requestFocus();
performedInitialLayout = true;
}

Please read my comment on the question, although I have made some changes to your layout, check this out
Change the colors as per your requirement.
<?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:id="#+id/linearLayout17"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/hint_color">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/txt_color"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded_button"
android:padding="14dp"
android:text="Confirm Pin"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/txt_color"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Android studio doesn't draw button correctly

In my Android studio project I have a fragment with constraint layout inside. Here is XML.
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topLayout">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
As you can see the confirm button is centered with constraints in his parent.
But when I am running application in my Xperia z5 compact, a layout inspector shows that button is not centered.
Why does it happen and how to fix that?
Note if I am removing numberTextView with it's parent constarintLayout, the problem disappears.
Note In my code I am programmatically setting a text to numberTextView. In case when I am commenting that code i.e not setting text programmatically, button draws correctly.

app:layout_constraintHorizontal_bias="0.5"
layout_constraintHorizontal_bias this will make a small variation from center. try code given below,
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Remove the below line from your button layout in xml.
app:layout_constraintHorizontal_bias="0.5"
Horizontal Bias:
This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.
For more information about Constraint Layout refer
this article

android:id="#+id/pinLayout" has hight of 250dp that's why button doesn't position at vertically center. try the code given below.
<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">
<android.support.constraint.ConstraintLayout
android:id="#+id/pinLayout"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<TextView
android:id="#+id/numberTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="top"
android:text="00000000"
android:textColor="#color/appTintColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/cl_root"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/pinView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
<TextView
android:id="#+id/pinView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:gravity="center"
android:text="-"
android:textColor="#color/appTintColor"
android:textSize="36sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_shape_tint"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Confirm Pin"
android:textColor="#color/appMainColor"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

try to use RelativeLayout instead of ConstraintLayout by changing all ConstraintLayout to RelativeLayout in your xml
<android.support.constraint.ConstraintLayout >
...
Your content
...
</android.support.constraint.ConstraintLayout>
to
<RelativeLayout >
...
Your content
...
</RelativeLayout>
then you might give set your button to be center in parent
android:layout_centerInParent="true"
for your TextView pinView1, pinView2, pinView3 and pinView4 you have simply put it inside a LinearLayout.

ConstraintWidth_percent doesn't work propely

I want to make layout with two text fields, which will have 40/60 ratio (like on image below) throw contraint. I can see result on preview on layout in Android Studio (see the image below), but when I start my app, the string becomes invisible, like contraint doesn't work. But if I will but istead of 0dp wrap_conent, both textViews becomes visible, but text with wrap_content has width more, then 0.4 or 0.6. How to fix this? Or maybe there is another way to impelement 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="wrap_content"
android:paddingBottom="8dp">
<TextView
android:id="#+id/name"
app:layout_constraintWidth_percent="0.4"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft" />
<TextView
android:id="#+id/value"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.6"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
tools:text="RightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRight" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintGuide_percent="0.4" />
</android.support.constraint.ConstraintLayout>

Remove the constraints from your guideline, remove the layout_constraintWidth_percent from your textviews and instead constrain them on your guideline, while dding the appropriate start and end constraints as follows:
<?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="wrap_content"
android:paddingBottom="8dp">
<TextView
android:id="#+id/name"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
tools:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft" />
<TextView
android:id="#+id/value"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
tools:text="RightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRight" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
</android.support.constraint.ConstraintLayout>

<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="wrap_content"
android:paddingBottom="8dp">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5"
tools:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft" />
<TextView
android:id="#+id/value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/colorPrimary"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/name"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5"
tools:text="RightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRight" />
</android.support.constraint.ConstraintLayout>

I have added 2 more constraints, check this answer and see if this will work:
<?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="wrap_content"
android:paddingBottom="8dp">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4"
tools:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft" />
<TextView
android:id="#+id/value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="2"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.6"
tools:text="RightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRightRight" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintGuide_percent="0.4" />
</android.support.constraint.ConstraintLayout>

placing next button bottom of ConstraintLayout with viewport in scrollview

I'm developing activity drawing view programmatically.
I wanna place 'NEXT' button to bottom of ConstraingLayout in scrollView
so, Adding ViewPort attribute in scrollView.
It's works for me. when there is no scroll.
But,
If ConstraintLayout's height is stretched, It isn't works correctly.
This is parent code using PageIndicatorView and ViewPager.
<?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:attrs="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=".activities.AssetAddActivity">
<com.rd.PageIndicatorView
android:id="#+id/pageIndicatorView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:piv_selectedColor="#79f56e02"
app:piv_unselectedColor="#1ef56e02"
app:piv_viewPager="#id/addAssetViewPager"
attrs:piv_padding="12dp"
attrs:piv_radius="8dp" />
<android.support.v4.view.ViewPager
android:id="#+id/addAssetViewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
this is my fragment xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:paddingBottom="50dp">
<Button
android:id="#+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#drawable/selector_btn_login"
android:text="#string/button_next"
android:textColor="#color/colorButtonText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/insert_point"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/txtv_beacon_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="60dp"
android:gravity="center"
android:text="새로 등록할 대상의 분류\n그리고 ID와 이름을 입력해주세요."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/txtv_title_category"
app:layout_constraintTop_toBottomOf="#+id/txtv_title_category" />
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_asset_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Asset ID"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_asset_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Asset Name"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:id="#+id/insert_point"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#+id/textInputLayout4"
app:layout_constraintStart_toStartOf="#+id/textInputLayout4"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout4" />
<TextView
android:id="#+id/txtv_title_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="44dp"
android:layout_marginTop="60dp"
android:text="#string/txtv_category"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txtv_beacon_info" />
</android.support.constraint.ConstraintLayout>
and this picture is problem screenshot.
problem screenshot

Constraint Layout is causing views to overlap

I'm trying to create a view in Android using ConstraintLayout but I'm having a lot of issues with views overlapping or being pushed off of the screen. I think a lot of it might be because I'm so used to iOS constraints and I'm thinking in terms of them. Here is my code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LocationFragment">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz125"
app:layout_constraintGuide_percent="0.125"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz875"
app:layout_constraintGuide_percent="0.875"/>
<TextView style="#style/Label"
android:id="#+id/currentSelectionLabel"
android:layout_marginBottom="21dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="11dp"
android:text="#string/current_selection"
app:layout_constraintBottom_toTopOf="#id/locationLabel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView style="#style/Label"
android:id="#+id/locationLabel"
android:layout_marginLeft="41dp"
android:text="#string/none"
app:layout_constraintBottom_toTopOf="#id/mapView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/currentSelectionLabel"/>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/previousButton"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/locationLabel"/>
<Button style="#style/RoundedButton"
android:id="#+id/previousButton"
android:text="#string/previous"
app:layout_constraintBottom_toTopOf="#id/newButton"
app:layout_constraintLeft_toLeftOf="#id/guideHorz125"
app:layout_constraintRight_toRightOf="#id/guideHorz875"
app:layout_constraintTop_toBottomOf="#id/mapView"/>
<Button style="#style/RoundedButton"
android:id="#+id/newButton"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="#string/new_location"
app:layout_constraintBottom_toTopOf="#id/resetButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<com.company.ui.ImageButton
android:id="#+id/startButton"
android:layout_width="240dp"
android:layout_height="90dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:src="#drawable/start"
app:text="#string/get_started"/>
</android.support.constraint.ConstraintLayout>
The first image is what I'd like to see, and the second is what I'm getting.

Try changing
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
To
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/newButton"/>

Use below 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">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="4dp"
android:text="Current Selection"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="None"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="311dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button54"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button55"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="96dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button56"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="293dp"
android:layout_height="116dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button55"
app:layout_constraintVertical_bias="0.529"
app:srcCompat="#drawable/googleg_disabled_color_18" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

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.

ConstraintLayout relative distance in percentage % - android

Related

Android studio doesn't draw button correctly, shifts down

Android studio doesn't draw button correctly

ConstraintWidth_percent doesn't work propely

placing next button bottom of ConstraintLayout with viewport in scrollview

Constraint Layout is causing views to overlap

Categories

Resources