I am doing a constraint layout for screen. And in some small screens is not showing correctly, because the button is over the text.
In the other devices with a bigger screen is showing correctly.
And i don't know how i can solve it.
Thanks
This is my layout (Constraint Layout) with a Linear layout inside.
<?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/wf_white">
<LinearLayout
android:id="#+id/ly_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/form_margins"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
android:background="#color/wf_light_grey">
<TextView
style="#style/wf_text_link"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAllCaps="true"
android:layout_marginTop="#dimen/form_margins"
android:text="#string/_BIWC_your_agent"/>
<ImageView
android:id="#+id/broker_image"
android:layout_width="#dimen/broker_image_size"
android:layout_height="#dimen/broker_image_size"
android:layout_gravity="center"
android:layout_marginTop="#dimen/text_margin_sides"
android:src="#drawable/img_broker_without_image"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/broker_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="#dimen/form_margins_mini"
android:orientation="horizontal">
<ImageView
android:id="#+id/broker_icon_phone"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/icon_action_phone"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_email"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:src="#drawable/ic_email"
tools:ignore="ContentDescription"/>
<ImageView
android:id="#+id/broker_icon_location"
android:layout_width="#dimen/icons_size_broker"
android:layout_height="#dimen/icons_size_broker"
android:layout_marginTop="#dimen/form_margins_small"
android:layout_marginStart="#dimen/icons_margin_broker"
android:layout_marginBottom="#dimen/text_margin_sides"
android:visibility="gone"
android:src="#drawable/ic_location"
tools:ignore="ContentDescription"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/broker_introduction_title"
style="#style/wf_text_copy"
android:layout_width="match_parent"
android:gravity="start"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ly_container"
android:text="#string/_SR_head"/>
<TextView
android:id="#+id/access_code_description"
style="#style/wf_text_hero_copy"
android:layout_width="match_parent"
android:layout_below="#+id/broker_introduction_title"
android:layout_marginLeft=“20dp”
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/broker_introduction_title"
android:gravity="start"
android:text="#string/_BIWC_welcome_message"/>
<Button
android:id="#+id/btn_go_to_register"
style="#style/wf_button_primary"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:descendantFocusability="beforeDescendants"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="#string/_BIWC_create_account"/>
</android.support.constraint.ConstraintLayout>
And also i attach a photo of the problem. Where you can see how the button is over the text, and the user can't read the text.
You should add layout_constraintBottom_toTopOf & layout_constraintTop_toBottomOf.
layout_constraintBottom_toTopOf —> Align the bottom of the desired view
to the top of another.
layout_constraintTop_toBottomOf —> Align the top of the desired view to
the bottom of another.
<TextView
android:id="#+id/access_code_description"
app:layout_constraintBottom_toTopOf"#+id/btn_go_to_register"
android:layout_marginBottom="20dp" //Remove this line
And
<Button
android:id="#+id/btn_go_to_register"
app:layout_constraintTop_toBottomOf="#+id/access_code_description"
FYI
It will be good approach if you use ScrollView ( Where child is TextView).
Set ScrollView as parent layout and ConstraintLayout in it.
ScrollView documentation
Related
I am trying to place a Viewpager above another view in constraint layout, however the Viewpager extends all the way to the bottom of parent unless I use a set height such as "150dp". How would I make it so that it only extends until it reaches the top of the "Create a new account" Layout?
Things I have tried:
-Making height of viewpager a set amount of dp (150dp), it works but I prefer to make it match multiple device heights
-Adding constraints Constraint Bottom of Viewpager to top of Create Account Layout, doesn't work
Here is my code for the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true">
<TextView
android:id="#+id/appname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="MyApp"
android:textColor="#color/colorBlackFont"
android:textSize="25sp"
android:textStyle="bold"
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"
app:layout_constraintVertical_bias="0.2"/>
<TextView
android:id="#+id/textview_betterexperience"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text=""
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appname"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawablePadding="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:hint="Username"
android:textSize="14dp"
android:textCursorDrawable="#drawable/cursor_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview_betterexperience"
app:layout_constraintWidth_percent=".75"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="1">
<View
android:id="#+id/divider_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/dividerColor"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/textview_newaccount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Create a new account"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textStyle="bold" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
The end result I want it to look like would be like this:
app:layout_constraintBottom_toTopOf="#id/unnamed_relativeLayout"
app:layout_constrainedHeight="true" (or set layout_height to 0dp)
The preview might be weirded out but will display once inflated with content in app
Add an id to your Relative layout
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="1">
Then in your viewpager add
app:layout_constraintBottom_toTopOf="#id/relativeLayout"
and set android:layout_height="0dp" so it matches the constraints.
You are missing the bottom constraint for view pager . Use below
app:
layout_constraintBottom_toTopOf="#id/relativeLayoutId"
I am developing news app but I am not able to align textview so that
it is overlapping around imageview how can I show it properly
I am developing news app but I am not able to align textview so that
it is overlapping around imageview how can I show it properly
below my xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
xmlns:app="http://schemas.android.com/apk/res-auto">
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/articleImage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/articleAuthor"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
android:layout_marginLeft="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/articleAuthor"
app:layout_constraintStart_toStartOf="#id/articleAuthor"
android:layout_marginTop="5dp"
android:maxLines="2"
android:text="Secondary"
android:id="#+id/articleTitle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/articleTitle"
app:layout_constraintStart_toStartOf="#id/articleAuthor"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:text="Tertiary"
android:id="#+id/articleTime"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/articleTime"
app:layout_constraintBottom_toBottomOf="#id/articleTime"
app:layout_constraintStart_toEndOf="#id/articleTime"
android:layout_marginStart="15dp"
android:id="#+id/articleShare"
android:background="#color/colorWhite"
android:src="#drawable/ic_share"
android:layout_marginLeft="15dp" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/articleShare"
app:layout_constraintBottom_toBottomOf="#id/articleShare"
app:layout_constraintStart_toEndOf="#id/articleShare"
android:layout_marginStart="15dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
android:layout_marginLeft="15dp" />
</android.support.constraint.ConstraintLayout>
below current screenshot of app
below screenshot which I want to achieve
screenshot I want
Add this attribute to both your articleAuthor and articleTitle TextViews:
app:layout_constraintEnd_toStartOf="#id/guideline"
Additionally, set the layout_width attribute to 0dp (i.e. "match constraints") for both of these same views:
android:layout_width="0dp"
This will cause the TextViews to be exactly as wide as the space between the left edge of the parent and the right edge of the guideline. For text that is shorter than this width, you'll get one line of left-justified text. For text that is longer than this width, you'll get multiple lines of left-justified text that wrap before the ImageView.
So, I would like to add a button with the text "Already Registered?" on the middle bottom screen but my code contains a two different LinearLayouts for the half left and the half right side. I want the button to be half on the left Linearlayout and half on the right. In addition, they are clickable so as far as I concern I must have them in my current layout and not include them.
what I currently have:
What I want to get:
my code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:baselineAligned="false"
tools:context=".MainActivity"
android:weightSum="2"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/customerLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
android:background="#color/lightblueMainActivity"
android:onClick="customerSignUp">
<TextView
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:textColor="#color/orangeMainActivity"
android:text="#string/customerMainActivity"/>
</LinearLayout>
<LinearLayout
android:id="#+id/electricianLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_weight="1"
android:background="#color/orangeMainActivity"
android:onClick="electricianSignUp">
<TextView
android:layout_gravity="center_vertical"
android:gravity="center"
android:textSize="24sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/lightblueMainActivity"
android:text="#string/electricianMainActivity"/>
</LinearLayout>
</LinearLayout>
THANKS IN ADVANCE!
There are other types of ViewGroup besides LinearLayout which allow you to achieve a "split screen" effect, but let's keep it simple and use a weighted LinearLayout to divide the screen.
The child Views however can be TextViews (no intermediate ViewGroup required) because you can let them have a background color and also control the text alignment.
Since you want the Button to overlap both parts of the screen, you can put it and the LinearLayout into a FrameLayout (I used a TextView but the attributes are basically the same):
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Customer"
android:textColor="#aaaaaa"
android:textSize="20sp"
android:gravity="center"
android:background="#0000ff"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Electrician"
android:textColor="#666666"
android:textSize="20sp"
android:gravity="center"
android:background="#ffab00"/>
</LinearLayout>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="24dp"
android:textColor="#ffffff"
android:textSize="20sp"
android:text="Already Registered?"/>
</FrameLayout>
Whenever i enclose my custom viewws with horizontal scrollview tags in xml file, the views seem to disappear.
In previous related questions it is mentioned as
"Horizontal scroll view hides its children if you set
android:layout_gravity="center_horizontal" for inner container."
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
tools:layout_constraintLeft_creator="1"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp">
<com.example.mahikanthnag.cs.views.StateProgressBar
android:id="#+id/your_state_progress_bar_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:spb_currentStateNumber="three"
app:spb_maxStateNumber="four"
app:spb_stateBackgroundColor="#BDBDBD"
app:spb_stateForegroundColor="#009688"
app:spb_stateNumberBackgroundColor="#808080"
app:spb_stateNumberForegroundColor="#eeeeee"
app:spb_currentStateDescriptionColor="#009688"
app:spb_stateDescriptionColor="#808080"
app:spb_animateToCurrentProgressState="true"
app:spb_checkStateCompleted="true"
/>
<com.example.mahikanthnag.cs.views.StateProgressBar
android:id="#+id/your_state_progress_bar_id1"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:spb_currentStateNumber="three"
app:spb_maxStateNumber="four"
app:spb_stateBackgroundColor="#BDBDBD"
app:spb_stateForegroundColor="#009688"
app:spb_stateNumberBackgroundColor="#808080"
app:spb_stateNumberForegroundColor="#eeeeee"
app:spb_currentStateDescriptionColor="#009688"
app:spb_stateDescriptionColor="#808080"
app:spb_animateToCurrentProgressState="true"
app:spb_checkStateCompleted="true"
android:layout_toRightOf="#+id/your_state_progress_bar_id"
/>
<com.example.mahikanthnag.cs.views.StateProgressBar
android:id="#+id/your_state_progress_bar_id2"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:spb_currentStateNumber="three"
app:spb_maxStateNumber="four"
app:spb_stateBackgroundColor="#BDBDBD"
app:spb_stateForegroundColor="#009688"
app:spb_stateNumberBackgroundColor="#808080"
app:spb_stateNumberForegroundColor="#eeeeee"
app:spb_currentStateDescriptionColor="#009688"
app:spb_stateDescriptionColor="#808080"
app:spb_animateToCurrentProgressState="true"
app:spb_checkStateCompleted="true"
android:layout_toRightOf="#+id/your_state_progress_bar_id1"
/>
</RelativeLayout>
</HorizontalScrollView>
But in my case I dont have android:layout_gravity attribute at all. How do i solve this?
This is my layout xml file where i added cutom views
Any suggestion is welcome
Thanks
Use Linear Layout instead of Relative Layout like below:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scrollbars="none">
<LinearLayout
android:id="#+id/travelGallery"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
android:orientation="horizontal" >
<Your view 1/>
<Your view 2/>
<Your view n/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
Is there any reason why the following layout_marginBottom is not working?
However, if I use layout_marginTop on the second view it does work well
<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="#ade4ad">
<TextView
android:id="#+id/first"
android:layout_width="90dp"
android:layout_height="40dp"
app:layout_marginBottom="10dp"
android:background="#000"/>
<TextView
android:id="#+id/second"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#fff"
app:layout_constraintTop_toBottomOf="#+id/first"/>
</android.support.constraint.ConstraintLayout>
In order to
android:layout_marginBottom="20dp"
work well, you should use
app:layout_constraintBottom_toBottomOf="parent"
Layout top/bottom margin works only when:
constraints in the same direction need to connect with their next neighbor child, like a unidirectional linked list.
last constraint in the direction must be set.
In your case, you need to set "layout_constraintBottom_toXXXXX" for each view in the chain, and last view set bottom to parent.
<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="wrap_content"
android:background="#ade4ad">
<TextView
android:id="#+id/first"
android:layout_width="90dp"
android:layout_height="40dp"
app:layout_marginBottom="10dp"
app:layout_constraintBottom_toTopOf="#+id/second"
android:background="#000"/>
<TextView
android:id="#+id/second"
android:layout_width="90dp"
android:layout_height="40dp"
app:layout_marginBottom="10dp"
app:layout_constraintBottom_toTopOf="#+id/third"
android:background="#fff"/>
<TextView
android:id="#+id/third"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#fff"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
Moreover, reverse dependency is not required except you want "layout_marginTop" works.
you can use that trick, create a space bellow, align to parent bottom
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
and align your view on top of the space
app:layout_constraintBottom_toTopOf="#+id/space"
like so
<TextView
android:id="#+id/howNext"
style="#style/white_action_btn_no_border"
android:layout_width="344dp"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="#string/got_it_next"
app:layout_constraintBottom_toTopOf="#+id/space"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
This is not LinearLayout or RelativeLayout, its ConstraintLayout so you have to give Left, Right, Bottom, Top Constraint to Relevant Layout, in your case You have to give TextView first Bottom_Top Constraint to TextView second. so you can get Margin between Two TextView.
Your layout should be like 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:background="#ade4ad">
<TextView
android:id="#+id/first"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#000"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/second"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#fff"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/first"
app:layout_constraintLeft_toLeftOf="#+id/first"
app:layout_constraintRight_toRightOf="#+id/first" />
</android.support.constraint.ConstraintLayout>