I have a ConstraintLayout inside a NestedScrollView. The ConstraintLayout contains a bunch of views but the last View can have a dynamic height to fill up the bottom space if there is any but it also needs to be a minimum height if there is not enough space.
For arguments sake, here is an example.
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
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"
tools:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_min="1500dp"
android:background="#color/red"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
As you can see I have put the ConstraintLayout version in but it doesn't work. Obviously the values are ridiculously large but this is just for testing.
If I don't set fillViewport="true" on the NestedScrollView then ConstraintLayout has a height of 0. When I do set the fillViewport, the ConstraintLayout does not scroll but just fills the screen.
How can I set the View so that it expands to the bottom of the ConstraintLayout which should be as big as the Viewport but if my View is not of the minHeight then we allow scrolling?
I am using version 1.0.2 of the ConstraintLayout library.
What I expect to see is the being all the way to the bottom of the parent but if that size is less than 1500dp then the view scrolls.
I have entered 1500dp like so android:layout_height="1500dp" and the view scrolls accordingly.
UPDATE 1
Seems to be once I put the layout within a FragmentViewPager. The app:layout_constraintHeight_min property isn't respected and it only matches the height of the viewport.
I also tried taking the NestedScrollView out of the fragment and putting the ViewPager inside it but again didn't work.
Add this attribute to the view you'd like to have stretch:
app:layout_constraintHeight_default="spread"
I made a tiny app to demonstrate. No java logic to speak of, but here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#caf">
<TextView
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="48dp"
android:gravity="center"
android:text="hello world"
android:background="#fff"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/two"/>
<TextView
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="48dp"
android:gravity="center"
android:text="hello world"
android:background="#eee"
app:layout_constraintTop_toBottomOf="#+id/one"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/three"/>
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="hello world"
android:background="#ddd"
app:layout_constraintHeight_default="spread"
app:layout_constraintHeight_min="300dp"
app:layout_constraintTop_toBottomOf="#+id/two"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
The bottom view stretches to fill the viewport when it is smaller than the remaining available space, and scrolling is impossible:
The bottom view maintains a fixed height when it is larger than the remaining available space, which makes scrolling possible:
I am using com.android.support.constraint:constraint-layout:1.0.2 and this works for me:
<android.support.v4.widget.NestedScrollView 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:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/gradient"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_min="1500dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
As the first thing is we have to specify the fixed height to each text view or used wrap content as another option.Secondary inside constraint layout the property app:layout_constraintHeight_default="spread" helps the last view to get the remaining complete space left and if no space left then automatically synced to scroll view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#caf"
android:padding="16dp">
<TextView
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#fff"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/two"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/three"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one" />
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/four"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/two" />
<TextView
android:id="#+id/four"
android:layout_width="0dp"
anroid:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/five"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/three" />
<TextView
android:id="#+id/five"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ddd"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintHeight_min="300dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/three" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
Related
I'd like to add a divider to an alert dialog at the bottom, similar to the one it shows when there are long list views (see image).
However, I've added a customized view, because I want to be able to use a generic layout for all my AlertDialogs in the whole app. Now there is a very huge space between view and buttons. Additionally the listview, which used to have the divider (from the original AlertDialog view), is not available anymore and my layout has it's own recyclerview. (Because they are recommended nowadays.)
I tried adding a divider in my custom view, but this divider is bound to the padding of it's parent and therefore doesn't fill the whole dialog (and is still heavily spaced from the buttons).
So I'd basically like to access the area of the buttons in the alertdialog to add a divider at the top of this view. (Which then would be full width and below the padding of the custom view.) It would be great, if this was possible with the Builder, because I sometimes use positive and negative buttons and sometimes only negative or only positive and customizing all that in a generic layout as well would be a huge effort.
Here's my custom layout (with divider). I'm using the MaterialAlertDialogBuilder. Note: I could remove the padding at the bottom to remove the space, but then it looks smashed and the problem with the width of the divider still isn't fixed.
<?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"
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/lorem"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Goal:
Edit 1: It should also work with the recyclerview being filled, so it has to scroll, where the current solutions let the recyclerview disappear in the padding. There's 1 1/2 items left, but I can't scroll any further. (Image is without marginTop on Divider, with margin it actually disappears as well)
Solution:
If you don't have a scrolling recyclerview with many items, #shraddha patel s approach works just fine. However, if you have one, to avoid cutting off the last items, you need to use a LinearLayout instead of a ConstraintLayout for the contentview, as shown in this somewhat related bug report: https://github.com/material-components/material-components-android/issues/1336
However, if you have items below the recyclerview, the parent layout still needs to stay a constraint layout or the divider will disappear in scrolling lists.
So the working solution for me now is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Don't ever refactor that to constraint layout.
There's some weird magic making it work only with a LinearLayout.-->
<androidx.appcompat.widget.LinearLayoutCompat
android:orientation="vertical"
android:id="#+id/alert_content_view"
style="#style/AppCompatAlertDialogTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="?dialogPreferredPadding">
<TextView
android:id="#+id/alert_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"/>
<TextView
android:id="#+id/alert_explanation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/desc"
android:textColor="#color/black"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
//Some views set to visibility = gone
</androidx.appcompat.widget.LinearLayoutCompat>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
If you have to implement the above UI using the ConstraintLayout layout then you can use the below code,
<?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="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:id="#+id/csLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Title"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/desc"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/csLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/black" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try using linear layout(Copy this code and try).
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="loremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdgloremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdg"
android:textColor="#color/black"
android:textSize="16sp"
tools:visibility="visible" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="20dp"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Cancel"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:padding="2dp"
android:text="Ok"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
tools:visibility="visible" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
My XML code looks 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BottomNavActivity">
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/idCardView" app:layout_constraintEnd_toEndOf="parent"/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp" app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="5dp" android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintBottom_toTopOf="#+id/container">
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
</android.support.v7.widget.CardView>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/idCardView"
app:layout_constraintBottom_toTopOf="#+id/navigation" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation_menu"/>
</android.support.constraint.ConstraintLayout>
I want the TextView on top, followed by the CardView, followed by a ConstraintLayout, followed by the bottomNavigationView. Somehow the elements are stacked on top of each other like this:
I made sure that every element are constrained to the top or bottom of the next element respectively. Still they end up on top of each other. Is there a better way or a fix to this problem?
In card view you added two constraint on top: remove app:layout_constraintTop_toTopOf="parent" and will work.
You don't need to constraint TextView to Carview, only CardView to TextView.
If TextView width is match_parent, you don't need to set right constraint. Only top and left.
remove CarView to parent top constraint
you don't need to constraint CardView to Container, only container to CardView
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp"
tools:layout_editor_absoluteX="5dp"
android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintLeft_toLeftOf="parent"
>
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
I am using recyclerview to display a list of items and constraint layout is the parent view. The layout is displayed below:
<?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:orientation="vertical"
android:layout_height="match_parent">
<!-- Load the toolbar here -->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?android:attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="#color/colorPrimary"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="visible"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<ImageView
android:id="#+id/imageViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="parent"
android:visibility="gone"
android:src="#drawable/empty_category"/>
<TextView
android:id="#+id/textViewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:text="Empty Category"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageViewContent" />
</android.support.constraint.ConstraintLayout>
The adapter layout for each row is presented below:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/framelayoutImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/buttonCart"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<ImageView
android:id="#+id/imageViewCoverArt"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#59000000"
android:orientation="vertical">
<TextView
android:id="#+id/textViewPrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginLeft="10dp"
android:clickable="false"
android:text="$220"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#android:color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewDetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginLeft="10dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLength="17"
android:maxLines="1"
android:text="Lorem ipsum dolor sit amet, consecte"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#android:color/white" />
</LinearLayout>
</FrameLayout>
<Button
android:id="#+id/buttonCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="8dp"
android:background="#drawable/buttonshape"
android:text="Add to Cart"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#android:color/white"
android:textStyle="bold"
/>
</LinearLayout>
After running my application the layouts are presented in the image below:
I tried adding a bottom margin to the recycle view, but this has not resolved the issue. I used the following links as references: RecyclerView is cutting off the last item, RecyclerView cutting off last item and tried making those changes with no luck
Your RecyclerView is not properly constrained. You can either use 0dp (MATCH_CONSTRAINT) for the height and use all available space:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
or if you want to keep it as wrap_content you will need to set app:layout_constrainedHeight="true" attribute to enforce the constraints:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
I tried all the available option from most of possible site but I didn't get the solution.
Then, I think can I use bottom padding? And Yes, It's work for me.
I am sharing the code to you.
Nothing more attribute required other than height, width & padding.
<android.support.v7.widget.RecyclerView
android:id="#+id/your id name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="?attr/actionBarSize"
app:layout_constraintTop_toBottomOf="#+id/your field" />
1)The View of Recyclerview must be properly constrained. (by ConstraintLayout or any other layout parameters).
2)The Last item occupies the space inside the RecyclerView, hence use Padding. (e.g android:paddingBottom="50dp")
3)Use android:clipToPadding="false" in XML.
Well in my case my ConstraintLayout's layout_height was wrap_content, that's why last item was cutting from bottom. So to resolve this: ConstraintLayout's layout_height should be either fixed or match_parent.
Try using RelativeLayout instead of ConstraintLayout.
It's working for me so it seems a problem with ConstraintLayout specifically.
I've tried app:layout_constraintBottom_toTopOf="#id/the_view_which_will_remain_below" but it's not the desired output.
I want the same behavior from RelativeLayout's layout_above.
With this code my Textview starts appearing from the bottom and as the character increases texts goes above. But I want the texts to start from starting of parent.
<?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:padding="16dp"
tools:context="com.fatimamostafa.restfulwebservices.asynctask.AsyncTaskRequest">
<LinearLayout
android:id="#+id/ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Run" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Clear" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/ll"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textSize="160sp"
android:text="Text"
/>
</android.support.constraint.ConstraintLayout>
To put the text at the top of the parent and the LinearLayout at the bottom contraint the top of the text view to parent and un-constraint it from the the LinearLayout:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text"
android:textSize="160sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<LinearLayout
android:id="#+id/ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Run" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Clear" />
</LinearLayout>
I have removed some constraints that I think were redundant.
Also note you can put the TextView obove the LinearLayout using "#+id" instead of #id.
If you want to constraint the text floating between the parent top and the Linear layout add these constraints to the TextView, and adjust the vertical bias between 0 and 1.
app:layout_constraintBottom_toTopOf="#+id/ll"
app:layout_constraintVertical_bias="0.2"
You can use height 0dp and organize views vertically.
in relative layout we can use layout below and above like
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav"
android:layout_below="#+id/toolbar"
/>
In constraint layout giving height is compulsory so you can give 0 height. and then you can set your view below other views like this
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tablayout" />
you can use constraintTop_toBottomOf and constraintBottom_toTopOf properties to adjust your view to above or below of other.
thanks
I am using this color picker above a guideline and want to align a Text View (and other views) below the guideline and bind them to the width of the color picker by using a ConstraintLayout with these options:
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
(The width of the color picker depends on the available height.)
The problem I am facing is that the view seems to be placed exactly below the color picker, however, the content of the view is not adjusted and therefore not shown completely as shown in this picture.
Similar behavior can be reproduced with an ImageView instead of TextView.
A RecyclerView seems to be working, however, the 'list end animation' when reaching the start or end of the list is misplaced.
When using other views instead of this color picker I do not face this issue.
Can anyone explain this behavior and how to fix it?
The complete xml code I am using for this:
<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="xxx.xxx.xxx.MainActivity">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.60"
android:orientation="horizontal"
/>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World! Some chars in this TextView are cut on the right side."
app:layout_constraintTop_toTopOf="#+id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
/>
</android.support.constraint.ConstraintLayout>
Did you try using LinearLayout? With problems like these, where one view needs to occupy a percentage of the screen, using layout_weight
Solution using LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
Edit based on comments
Something like this should work. You can change the View's visibility to GONE or VISIBLE depending on whether the FloatingActionButton has been tapped or not.
<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.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/linearContainer"
app:layout_constraintTop_toTopOf="#+id/linearContainer"
android:layout_marginTop="16dp" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
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="0.0" />
<LinearLayout
android:id="#+id/linearContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>