ConstraintLayout problem: some buttons are invisible - android

I'm still trying to understand ConstraintLayout.
Let's say I have this activity:
Which consists of a RecyclerView and 3 Buttons. The RecyclerView may contains lots of items. Those 3 Buttons stay on the bottom of the screen.
The code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="fill_parent"
tools:context=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>
And the result:
Why only 1 button is visible there?

First issue, your RecyclerView's height was set to match_parent, and it was not constrained to the top of the view.
Second issue, your buttons are constrained on the bottom, when it should be their top that is constrained to the bottom of the element above them.
Here is your layout file reworked :
<?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=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_logout" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
The result :

There is only one button visible because it is over the others as it is set to align Bottom to Bottom.
If you want to set one button above the other you should use Bottom to Top constraint.
I do not know the exactly order you want to set this up, but it should be something like this:
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>

Set Your Buttons in LinearLayout
Like the Following Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/recycler_view">
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view"/>
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I hope it's Works....

Related

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>

Place buttons one below the other

I have 2 buttons but both of them are on the same line, so one of them is not clickable and not even readable.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#343535"
tools:context=".fragments.GeneralFragment">
<Button
android:id="#+id/hello"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:text="#string/hello"
/>
<Button
android:id="#+id/observed"
android:layout_width="match_parent"
android:layout_height="60dp"
android:drawableBottom=""
android:gravity="center_vertical"
android:text="#string/observed" />
</FrameLayout>
How can I display them one below the other?
You are currently using FrameLayout, which should only be used when you have only one view under the FrameLayout.
To fulfill your requirements, you should use LinearLayout with vertical orientation.
You have to use RelativeLayout or LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#343535"
tools:context=".fragments.GeneralFragment">
<Button
android:id="#+id/hello"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:text="#string/hello"
/>
<Button
android:id="#+id/observed"
android:layout_below="#+id/hello" //Added Layout below
android:layout_width="match_parent"
android:layout_height="60dp"
android:drawableBottom=""
android:gravity="center_vertical"
android:text="#string/observed" />
</RelativeLayout>
Using LinearLayout you can set android:orientation="vertical" to get element adjusted to below automatically
The most reliable layout is the constraint layout you can work with just like that
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
The easiest way is just using LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#343535"
android:orientation="vertical"
tools:context=".fragments.GeneralFragment">
<Button
android:id="#+id/hello"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:text="#string/hello" />
<Button
android:id="#+id/observed"
android:layout_width="match_parent"
android:layout_height="60dp"
android:drawableBottom=""
android:gravity="center_vertical"
android:text="#string/observed" />
</LinearLayout>

Android Studio layer below each other while orientation is horizontal

doing this layer work and can't figure out how to put layers below ones I made when the android orientation is horizontal, it keeps pushing my layer to the outsidie I have a pics what I have done and how it has to look, if you have any ideas would be nice to hear, thank you in advance.How it has to look
and What I have done
<?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=".MainActivity2">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#FA0000" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#03ED0F" />
<TextView
android:id="#+id/blue"
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#0027C3"
/>
<TextView
android:layout_below="#id/blue"
android:layout_width="100dp"
android:layout_height="10dp"
android:background="#000000" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
If you are using
you should use these attribute to control the position
app:layout_constraintTop_toBottomOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toStartOf
app:layout_constraintTop_toRightOf
based on what it should look like, you can try
<?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">
<LinearLayout
android:id="#+id/ll_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#FA0000" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#03ED0F" />
<TextView
android:layout_width="140dp"
android:layout_height="300dp"
android:background="#0027C3"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ll_horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FA0000" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#03ED0F" />
<TextView
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0027C3"
/>
</LinearLayout>
it should look like this
Use 2 seperate LinearLayout one below other in root.
One for horigontal views. Second for vertical views.
And use weight_sum property in LinearLayout, along with weight property in child views to distribute child views eqally.

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"

Issue with recycler view inside constraint layout

I'm trying to create a bottom sheet dialog based on a complex layout.
What I have to achieve is a dialog with an header layout, a recycler view with a list of element and a bottom bar with a couple of buttons.
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Layout injected inside this linear layout container programmatically -->
<LinearLayout
android:id="#+id/header_dialog_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/form_dialog_recycler_view"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/form_dialog_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toTopOf="#id/bottom_sheet_container_buttons"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header_dialog_container" />
<LinearLayout
android:id="#+id/bottom_sheet_container_buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/dialog_sheet_button_reset"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_reset"
android:textColor="#color/dangerColor" />
<Button
android:id="#+id/dialog_sheet_button_close"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_close" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</layout>
Unfortunately my recycler view height is always equal to zero. I tried to change android:layout_height="0dp" to android:layout_height="wrap_content" but as expected it goes below the bottom container. Am I missing something?
Try app:layout_constraintHeight_default="wrap" for RecyclerView if it's inside ConstraintLayout.
I ended up with a different solution. I changed constraint layout with a Linear Layout. And I set up bottom margins.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header_dialog_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<android.support.v7.widget.RecyclerView
android:id="#+id/form_dialog_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<LinearLayout
android:id="#+id/bottom_sheet_container_buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="-60dp"
android:orientation="horizontal">
<Button
android:id="#+id/dialog_sheet_button_reset"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_reset"
android:textColor="#color/dangerColor" />
<Button
android:id="#+id/dialog_sheet_button_close"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_close" />
</LinearLayout>
</LinearLayout>
</layout>
Try this code:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Layout injected inside this linear layout container programmatically -->
<LinearLayout
android:id="#+id/header_dialog_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/form_dialog_recycler_view"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/form_dialog_recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toTopOf="#id/bottom_sheet_container_buttons"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header_dialog_container" />
<LinearLayout
android:id="#+id/bottom_sheet_container_buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/dialog_sheet_button_reset"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_reset"
android:textColor="#color/dangerColor" />
<Button
android:id="#+id/dialog_sheet_button_close"
style="#style/ActionSheetTitle"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="0.5"
android:background="#color/bottomBarContainerColor"
android:text="#string/general_close" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</layout>
Use app:layout_constrainedHeight="true" in your RecyclerView. It will adjust inside constraints and won't go below the bottom container.

Categories

Resources