Develop Reference

LinearLayout suitable to another LinearLayout

I have two linear layout inside constrainLayout,
The bottom linear layout includes buttons and its height is wrap_content and must be wrap, because sometimes I keep only 1 button and sometimes 2 buttons.
I would like to set height of the top linearLayout to max but without covering the 2nd layout.
So I decided to set match_parent to the first, but after that it covers the 2nd layout.
I can't use weight/weightsum
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="11"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="9"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:padding="16dp"
android:weightSum="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"
" />
</LinearLayout>
try this added weight sum and weight to make layout in prportion

Since you are using ConstraintLayout, you can set the height of the first LinearLayout to 0dp. The ConstraintLayout interprets it as "match constraints".
The next step would be to properly define the constraints of the first LinearLayout (which you did).
You can read more about ConstraintLayout here.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

To do this you have to use a combination of linearlayout as parent and attribute layoutWeight ,If you use a constant value for layoutWeight for both top layout and button's container , then this will lead to some problem on different screen height devices , instead this solution make you able to set your buttons height as big as enough by setting its container's height to wrapContent and give all top area for the layout content .
You can also make the top linearLayout scrollable to get the best experience possible :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/this_layout_will_fil_all_space_except_the_bottom_layout_space"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#000000"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout_at_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="10dp">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_marginEnd="50dp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
For Buttons , you can set its width to wrapContent and add gravity attribute to its parent as above , in this way even if one buttons was gone , the other will fit perfectly in the center of the container .
Enjoy !

The main advantage of using ConstraintLayout is to avoid using any other nested ViewGroups, The more you add more hierarchy in layout, the less performance you'll have. You can check documentation for more.
So for performance wise it's better to add widgets/views directly within the ConstraintLayout.
So, here I removed the bottom LinearLayout, and kept only the buttons directly within the ConstraintLayout, you can do the same for the top LinearLayout, you can just add any underlying views directly to the ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Button1"
app:layout_constraintBottom_toTopOf="#id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Button2"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Translucent overlay shows different effects on different views

I have an AppBarLayout, LinearLayout and a BottomNavigationView. I want to add a translucent white overlay above all of them but i don't know why i get this slightly grey color above my AppBarLayout and LinearLayout. Is this because of the different elevations the views have? Is it possible to get the same effect it does on my BottomNavigationView on my two other layouts without changing their elevations?
Without Overlay
With Overlay
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:id="#+id/appBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="20sp"
android:layout_centerInParent="true"/>
<ImageButton
android:id="#+id/buttonMenu"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/ic_menu"
android:layout_centerVertical="true"
android:layout_margin="16dp"/>
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/appBar"
app:layout_constraintBottom_toTopOf="#id/bottomNavigation"
android:id="#+id/linearLayoutContents">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum"
android:textSize="32sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_margin="24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:text="#string/content"
android:textColor="#android:color/darker_gray"
android:textSize="16sp"/>
</LinearLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_nav_menu"
android:id="#+id/bottomNavigation"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/overlay"
android:background="#CCFFFFFF"
android:elevation="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Using elevation attribute for sibling views causes views to hide each other based on the z-order you gave them. To overcome this issue I would change my layout hierarchy to a non-flat state which is kind of a dirty approach considering the ConstraintLayout purpose (flat view hierarchy). If you found a better way feel free to share it.
So to do that move your overlay out of its parent and remove the elevation:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/overlay"
android:background="#CCFFFFFF"/>
</FrameLayout>

MPAndroid chart in ConstraintLayout with additional widgets (they are not visible)

I am trying to add PieChart from MPAndroidChart and seekBar under it.
But still no luck, chart is visible, but other content is noT visible, despite it visible when I open design tab during xml configuration.
I already have tried to set a barrier and with groups with weights but still.
Could please anyone give any advice how to properly align chart to be able to see other widgets on view.
Here is my xml example:
<?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:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toTopOf="#+id/seekBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
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"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
ANSWER
The first and correct version of answer from Ashish Kudale is: Use LinearLayout with weight:
<LinearLayout
android:id="#+id/chartContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>

Use LinearLayout Insted of ConstraintLayout.
Try this.
<?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"
android:id="#+id/linearLayout3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
</LinearLayout>
What it does is places all items in the screen and remaining place is occupied by item which has android:layout_weight="1"

How to make part of right part of SlidingPaneLayout transparent? I tried to use android:background="#android:color/transparent", but this doesn't work

I can't understand why ConstaintLayout with id "transparent" remains white.
I also tried use android:background="#00ffffff", make transparent all right side of SlidingPanel (id right_side).
I want to do so as in the standard calculator app.
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:id="#+id/digits_area"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/buttons"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1.5"/>
<android.support.constraint.ConstraintLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/digits_area"
app:layout_constraintVertical_weight="3">
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/digits"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#id/operations"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintStart_toStartOf="parent">
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/operations"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/digits">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--This part I want to make transparent-->
<android.support.constraint.ConstraintLayout
android:id="#+id/transparent_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="#id/content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/content"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#color/secondaryLightColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="4"
app:layout_constraintStart_toEndOf="#id/transparent_layout">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.SlidingPaneLayout>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

try to put into FrameLayout the main screen content and SlidingPaneLayout over it.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:text="here goes the bottom non sliding main screen content. it takes the whole screen"
android:background="#color/colorPrimaryDark" android:textColor="#color/colorPrimary"
android:textSize="24sp" />
<!-- SlidingPaneLayout should be transparent - do not set background color -->
<android.support.v4.widget.SlidingPaneLayout
android:id="#+id/SlidingPanel"
android:layout_width="match_parent" android:layout_height="match_parent" >
<!-- first view takes whole screen is empty transparent placeholder -->
<View android:layout_width="match_parent" android:layout_height="match_parent" />
<!-- this is the paned that will slide - no background color too -->
<LinearLayout android:id="#+id/slidePane" android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_gravity="right" android:layout_marginLeft="50dp" >
<TextView android:layout_marginLeft="16dp" android:background="#101010"
android:layout_marginTop="20dp" android:layout_marginBottom="20dp"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:gravity="center" android:text="HI" android:textColor="#color/colorPrimary" />
<Button android:id="#+id/button" android:text="TEST"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp"
android:layout_width="match_parent" android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout></FrameLayout>
.

align view on top and buttons in bottom

I need to achieve the following view
I tried using constraint layout:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/segmentedButton">
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Buttons>
</android.support.constraint.ConstraintLayout>
It works well when there are many items, but when there are just 2-3, it shows them in the middle.
Also, I tried using LinearLayout but no luck.

you can use RelativeLayouttoo to get your desired results. By using the below code you can show the items on top if they are 2 or 3 left.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/segmentedButton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

try with linear layout, weight property should push the button to align at the end of parent
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_weight="1"
>
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
>
</Buttons>
</LinearLayout>
I supposed here that Buttons stand for a custom Button you made

Just add Top Constraint to your FrameLayout, should fix your issue.
Your final layout will be like 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"></FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"></Buttons>
</android.support.constraint.ConstraintLayout>

<?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">
<FrameLayout
android:id="#+id/segmentedFrame"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
android:background="#drawable/bg_scan_edittext">
</FrameLayout>
<Button
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/segmentedFrame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Button>
</android.support.constraint.ConstraintLayout>