I read that ConstraintLayout is a great tool for creating an app for multiple screen sizes, like tablet and phone.
But even tho' the layout itself scales (from what I have seen) between different screen sizes, what can I do about the text size of a TextView, for example?
How can I make it scale as well?
Also if you have any knowledge of a better way to write an app for phone and tablets as well feel free to tell me (I would prefer not to create different layouts for all types of screens).
Code Sample:
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.merchantproxy.merchantproxy.activities.DashboardActivity"
tools:showIn="#layout/activity_dashboard">
<ScrollView
android:id="#+id/dashboardScrollView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="157dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1">
<LinearLayout
android:id="#+id/dashboardDataLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/salesCard"
android:layout_width="0dp"
android:layout_height="170dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:layout_weight="0.05"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintTop_creator="1"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/salesTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Sales"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/salesStats"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/salesStats"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<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.33" />
<TextView
android:id="#+id/totalSales"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="16dp"
android:text="$0"
android:textAlignment="center"
android:textColor="#color/colorSuccess"
android:textSize="35sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/netSalesLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.538"
app:layout_constraintLeft_toRightOf="#+id/feesLayout"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.963"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<TextView
android:id="#+id/netSales"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:text="$0"
android:textAlignment="center"
android:textColor="#color/colorSuccess"
android:textSize="35sp"
android:textStyle="bold"
tools:layout_editor_absoluteX="24dp"
tools:layout_editor_absoluteY="208dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Net Sales"
android:textAlignment="center"
android:textSize="20sp"
tools:layout_editor_absoluteX="24dp"
tools:layout_editor_absoluteY="208dp" />
</LinearLayout>
UI:
I mention that i have this issue only on phones that are oriented vertically...if I rotate the view to landscape everything scales ok
Related
I can visually show what I mean to do:
basically, something like:
app:layout_constraintBottom_toEndOf is Illegal
But, I'd like to know if there's a way to implement this sort of dynamic remapping of constraints that would in turn also rotate the views inside of the constraintLayout
I've used external library from https://github.com/rongi/rotate-layout It allows to rotate viewgroup's children.
<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toBottomOf="#+id/button">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="#string/hello_string"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginTop="8dp"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.75"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.96" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginEnd="8dp"
android:text="Button4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textCoord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Preview Child Not Rotated :
Preview Child Rotated
I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
<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/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
below current screenshot of the app
below screenshot which I want to achieve
Wrap the views with another Viewgroup (say ConstraintLayout again) and set app:layout_constraintStart_toStartOf="parent" and app:layout_constraintEnd_toEndOf="parent" as constraints to this viewgroup. Said view will then be centered horizontally.
Edit: The code
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content" android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/"
android:contentDescription="TODO"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
I messed up the ImageButtons a little, please fix the drawables and the color.
Edit 2: for some reason, another closing tag won't show in the code section here. make sure to add another ConstraintLayout closing tag right at the end.
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55"
android:id="#+id/guideline"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintDimensionRatio="16:9"
android:layout_margin="16dp"
android:id="#+id/imageView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/mainTextView"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/mainTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
android:layout_marginTop="5dp"
android:text="Secondary"
android:id="#+id/secondaryTextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/secondaryTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:text="Tertiary"
android:id="#+id/tertiaryTextView"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/tertiaryTextView"
app:layout_constraintBottom_toBottomOf="#id/tertiaryTextView"
app:layout_constraintStart_toEndOf="#id/tertiaryTextView"
android:layout_marginStart="15dp"
android:id="#+id/firstButton"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/firstButton"
app:layout_constraintBottom_toBottomOf="#id/firstButton"
app:layout_constraintStart_toEndOf="#id/firstButton"
android:layout_marginStart="15dp"
android:id="#+id/secondButton"/>
Edit 3: Here's a clean take to it.This one should do what you want. Though you have to tweak the margins the way you want them! Again the closing tag ... I don't know why it won't appear here!
If you want to move your views that are on the left side of the screen to the right part of the screen simply change your constraints like this:
Replace your constraints, your views will get constraint to your guideline from the left and to the right side on the screen as the right constraint.
Do it like this:
<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/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
And it will look like this:
I've been using Constraint Layouts for a while but today I faced a strange problem, all my layouts that contain constraint layouts are shifted down over the lower screen edge although the width and height of the parent constraint layout are (match-parent), the result is below
and here's is the XML code for 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"
android:background="#color/colorPrimary"
tools:context=".Setup_SettingsActivity">
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/setup_pharmacy_name" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/setup_welcome"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_name">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/setup_pharmacy_address"
android:inputType="textMultiLine" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/setup_save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="84dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:backgroundTint="#color/colorAccent"
android:text="#string/setup_save_btn_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
<Switch
android:id="#+id/setup_has_delivery_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/setup_has_delivery_switch_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textOff="#string/setup_delivery_switch_off"
android:textOn="#string/setup_delivery_switch_on"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:backgroundTint="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.476"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address"
app:srcCompat="#mipmap/position_btn" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="42dp"
android:layout_height="38dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="52dp"
android:visibility="invisible"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address"
app:srcCompat="#mipmap/position_done" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/setup_record_position_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="40dp"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton" />
<View
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="20dp"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
</android.support.constraint.ConstraintLayout>
what might be the cause of this problem?
Your layout got pushed down because you are using way too large margins - you are using constraintLayout but you are also using large fixed size for your margins (android:layout_marginTop="60dp" for example) and because different phones got different screen size, when you are using a fixed size on your view you are making your layout less responsive(small margins are ok but the problem starts with the large margins).
If you want to place some view somewhere at your screen I would recommend using guielines and constraint your views into the guideline rather then give your view a lot of margins.
You can simply use chains to achieve your desired layout.
Here is an example of the layout that you want to achieve using cnostraintLayout and chains:
<?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.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/setup_pharmacy_address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="setup_pharmacy_name" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="setup_welcome"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/setup_pharmacy_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_name">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="setup_pharmacy_address"
android:inputType="textMultiLine" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/setup_save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#color/colorAccent"
android:text="setup_save_btn_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider2" />
<Switch
android:id="#+id/setup_has_delivery_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="setup_has_delivery_switch_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textOff="setup_delivery_switch_off"
android:textOn="setup_delivery_switch_on"
app:layout_constraintBottom_toTopOf="#+id/divider2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toTopOf="#+id/textView6"
app:srcCompat="position_btn" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="42dp"
android:layout_height="38dp"
android:src="#drawable/new_question"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toTopOf="#+id/textView6" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="setup_record_position_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:background=""
app:layout_constraintBottom_toTopOf="#+id/setup_has_delivery_switch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<View
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/setup_save_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
</android.support.constraint.ConstraintLayout>
And it will look like this:
It's depend upon screen size.Sometime our layout is optimial for medium or large screen size device which cause issue to small device. In order to fix this issue for smaller device too, add ScrollView as parent layout of constraint layout
<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.support.constraint.ConstraintLayout>
</ScrollView>
I have this 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:focusable="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/details"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:background="#color/grayEB"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/shutdownButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.007">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Flusso autorizzativo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="--"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Totale cliente"
app:layout_constraintBaseline_toBaselineOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.274"
app:layout_constraintStart_toEndOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Spesa PRE: € --"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView6"
app:layout_constraintHorizontal_bias="0.959"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView4"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:text="Spesa stimata: € --"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/shutdownButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="ShutDown !!!"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/frameLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/MyTabs">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/MyTabs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:padding="0dp"
android:elevation="4dp"
android:paddingBottom="4dp"
app:tabGravity="center"
app:tabMode="scrollable"
app:layout_constraintBottom_toTopOf="#+id/frameLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/details"
app:layout_constraintVertical_chainStyle="packed"
android:background="#ffff"/>
</android.support.constraint.ConstraintLayout>
I have set the elevation and paddingBottom of MyTabs to show the shadow under the tablayout, but in this way the shadown is showed not only on the bottom side but on each side.
I have to show the shadow only on the bottom side, what I have to do ?
OT : this layout is also too slow to be rendered
I am using ConstraintLayout for activity:
<?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.site.path.to.AuthenticationActivity">
<EditText
android:id="#+id/login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="none"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login"/>
<Button
android:id="#+id/login_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"/>
<FrameLayout
android:visibility="gone"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/default_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
FrameLayout should hide all content of the page when visible. But it hides all content except button. Why the button doesn't hide? How to fix it?
Editted:
Try to set android:stateListAnimator="#null" to the Button/AppCompatButton
In Lollipop (Android 5.0 (API 21)) and above, Buttons have a default elevation which causes them to always draw on top.
<?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/background_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:tint="#80000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:src="#drawable/logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/background_image"
app:layout_constraintVertical_bias="0.049"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="7dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="7dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="sans-serif-light"
android:text="There is More"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/scrollView2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/logo"
app:layout_constraintTop_toTopOf="#+id/logo"
app:layout_constraintVertical_bias="1.0"
tools:ignore="HardcodedText" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintVertical_bias="0.050000012">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_first_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
android:inputType="textPersonName"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone"
android:inputType="phone"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:theme="#style/ThemeEditTextLight">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:theme="#style/ThemeEditTextLight" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<android.support.v7.widget.AppCompatButton
android:id="#+id/sign_up_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:backgroundTint="#2a98f0"
android:stateListAnimator="#null"
android:elevation="0dp"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:text="Sign up"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollView2"
app:layout_constraintVertical_bias="0.100000024" />
<TextView
android:id="#+id/or_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="or\nSign up with social sites"
android:textColor="#color/white"
app:layout_constraintBottom_toTopOf="#+id/imageView6"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/or_tv"
app:layout_constraintVertical_bias="0.8"
app:srcCompat="#drawable/ic_google_plus" />
<FrameLayout
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ProgressBar
android:id="#+id/progressBarChild"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>
This worked for me.
The problem is (as #motis10 noted) that Buttons have elevation by default (post Android 5.0), so they are drawn above other things that have no elevation.
If you give the thing you want drawn over the button a higher elevation value, then it will be drawn on top. I used: android:elevation="40dp" just to be safe, but I believe 8dp is the default button elevation.