Android - how to make a scrollable constraintlayout

Question

I want to make a layout that lets me scroll down using constraint layout  but I don t know how to go about it  Should the ScrollView be the parent of the ConstraintLayout like this    lt  xml version  1 0  encoding  utf-8   gt    lt ScrollView 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 fillViewport  true  gt    lt android support constraint ConstraintLayout     android id    id Constraint      android layout width  match parent      android layout height  match parent   gt      Or the other way around  Maybe someone can point me to a good tutorial on this or give an example  I can t seem to find one    Also  I don t know if this is a bug or some configuration that I don t have set up but I ve seen images like this one      where there are some components outside the blueprint  blue rectangle  yet they are visible  while on my side if I place a component on the  white space  I can t see it or move it anywhere  and it appears on the component tree    UPDATE    I found a way to make the constraint layout scrollable in the design tool  using a horizontal guideline to push down the constraint layout border and extend it beyond the device  after that  you can use the guideline as the new bottom of the constraint layout to anchor the components

User · Answer

This is how I resolved it   If you are using Nested ScrollView i e  ScrollView within a ConstraintLayout then use the following configuration for the ScrollView instead of  WRAP CONTENT  or  MATCH PARENT     lt ScrollView     android layout width  0dp      android layout height  0dp      app layout constraintStart toStartOf  parent      app layout constraintEnd toEndOf  parent      app layout constraintBottom toTopOf    id someOtherWidget      app layout constraintTop toTopOf  parent  gt

User · Answer

Please use below solution it has taken my lots of time to fix  Enjoy your time     x000D   x000D   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent      android background   color white       gt        lt ScrollView         android id    id mainScroll          android layout width  match parent          android layout height  match parent          android background   color white          android fillViewport  true          android layout alignParentTop  true          android layout alignParentEnd  true          android layout alignParentStart  true  gt           lt RelativeLayout             android layout width  match parent              android layout height  wrap content  gt                 lt android support constraint ConstraintLayout                 android layout width  match parent                  android layout height  wrap content                  android layout gravity  bottom                  android layout alignParentStart  true                  android layout alignParentTop  true                  android layout alignParentBottom  true                  android layout alignParentEnd  true                   gt                lt  android support constraint ConstraintLayout gt            lt  RelativeLayout gt       lt  ScrollView gt   lt  RelativeLayout gt  x000D   x000D   x000D   Use Exactly like this u will definitely find your solution

User · Answer

Take out bottom button from the nestedscrollview and take linearlayout as parent  Add bottom and nestedscrollview as thier children  It will work absolutely fine  In manifest for the activity use this - this will raise the button when the keyboard is opened  android windowSoftInputMode  adjustResize stateVisible    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt        lt androidx core widget NestedScrollView xmlns tools  http   schemas android com tools          android layout width  match parent          android layout height  0dp          android layout weight  1          android fillViewport  true  gt            lt androidx constraintlayout widget ConstraintLayout             android layout width  match parent              android layout height  wrap content              android orientation  vertical  gt                lt com google android material textfield TextInputLayout                 android id    id input city name                  android layout width  match parent                  android layout height  wrap content                  android layout marginStart  20dp                  android layout marginTop  32dp                  android layout marginEnd  20dp                  android hint   string city name                  app layout constraintLeft toLeftOf  parent                  app layout constraintTop toTopOf  parent  gt                    lt com google android material textfield TextInputEditText                     android id    id city name                      android layout width  match parent                      android layout height  wrap content                      android digits  abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ                      android lines  1                      android maxLength  100                      android textSize  16sp    gt                lt  com google android material textfield TextInputLayout gt            lt  androidx constraintlayout widget ConstraintLayout gt        lt  androidx core widget NestedScrollView gt        lt Button         android id    id submit          android layout width  match parent          android layout height  wrap content          android background   color colorPrimary          android onClick  onSubmit          android padding  12dp          android text   string string continue          android textColor   FFFFFF          app layout constraintBottom toBottomOf  parent    gt    lt  LinearLayout gt

User · Answer

There is a bug in version 2 2 that makes it impossible to scroll the ConstraintLayout  I guess it still exists  You can use LinearLayout or RelativeLayout alternatively   Also  check out  Is it possible to put a constraint layout inside a ScrollView

User · Answer

A lot of answers here  nothing really simple  It s important that the ScrollView s lauout height is set to match parent while the layout height of the ContraintLayout is wrap content  lt ScrollView     xmlns android  quot http   schemas android com apk res android quot      android layout width  quot match parent quot      android layout height  quot match parent quot       gt        lt androidx constraintlayout widget ConstraintLayout         android layout width  quot match parent quot          android layout height  quot wrap content quot  gt

User · Answer

in scrollview make height and width 0 add Top toBottomOfand Bottom toTopOf constraints that s it

User · Answer

You can use HorizontalScrollView and it ll work as well

User · Answer

To summarize  you basically wrap your android support constraint ConstraintLayout view in a ScrollView within the text of the   xml file associated with your layout   Example activity sign in xml   lt  xml version  1 0  encoding  utf-8   gt    lt ScrollView 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   SignInActivity  gt   lt  -- usually the name of the Java file associated with this activity -- gt        lt android support constraint ConstraintLayout          xmlns android  http   schemas android com apk res android          xmlns app  http   schemas android com apk res-auto          xmlns tools  http   schemas android com tools          android layout width  match parent          android layout height  match parent          android background   drawable gradient          tools context  app android SignInActivity  gt            lt  -- all the layout details of your page -- gt        lt  android support constraint ConstraintLayout gt   lt  ScrollView gt      Note 1   The scroll bars only appear if a wrap is needed in any way  including the keyboard popping up   Note 2  It also wouldn t be a bad idea to make sure your ConstraintLayout is big enough to the reach the bottom and sides of any given screen  especially if you have a background  as this will ensure that there isn t odd whitespace  You can do this with spaces if nothing else

User · Answer

For me  none of the suggestions about removing bottom constraints nor setting scroll container to true seemed to work  What worked  expand the height of individual nested views in my layout so they  spanned  beyond the parent by using the  Expand Vertically  option of the Constraint Layout Editor as shown below    For any approach  it is important that the dotted preview lines extend vertically beyond the parent s top or bottom dimensions

User · Answer

Use NestedScrollView with viewport true is working good for me   lt android support v4 widget NestedScrollView         android layout width  match parent          android layout height  match parent          android fillViewport  true  gt            lt android support constraint ConstraintLayout             android layout width  match parent              android layout height  700dp  gt            lt  android support constraint ConstraintLayout gt    lt  android support v4 widget NestedScrollView gt    for android x use this    lt androidx core widget NestedScrollView         android layout width  match parent          android layout height  match parent          android fillViewport  true  gt       lt androidx constraintlayout widget ConstraintLayout         android layout width  match parent          android layout height  match parent  gt       other views       lt  androidx constraintlayout widget ConstraintLayout gt       lt  androidx core widget NestedScrollView gt

User · Answer

you need surrounded my constraint-layout with a ScrollView tag and gave it the property android isScrollContainer  true

User · Answer

For completing the previous answers I am adding the following example  which also takes into account the use of the AppBar  With this code  the Android Studio design editor seems to work fine with the ConstraintLayout    lt  xml version  1 0  encoding  utf-8   gt    lt LinearLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent      android fitsSystemWindows  true      android background   drawable bg      android orientation  vertical  gt    lt android support design widget AppBarLayout     android id    id app bar      android layout width  match parent      android layout height  wrap content      android theme   style AppTheme ActionBar AppOverlayTheme  gt       lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height   attr actionBarSize          app popupTheme   style AppTheme PopupOverlay   gt   lt  android support design widget AppBarLayout gt    lt ScrollView     android layout width  match parent      android layout height  wrap content  gt        lt android support constraint ConstraintLayout         android layout width  match parent          android layout height  wrap content  gt            lt ImageView             android id    id image id              android layout width  match parent              android layout height   dimen app bar height              android fitsSystemWindows  true              android scaleType  centerCrop              android src   drawable intro              app layout constraintEnd toEndOf  parent              app layout constraintStart toStartOf  parent              app layout constraintTop toBottomOf  parent    gt            lt TextView             android id    id desc id              android layout width  wrap content              android layout height  wrap content              android layout margin   dimen text margin              android text   string intro desc              app layout constraintEnd toEndOf  parent              app layout constraintStart toStartOf  parent              app layout constraintTop toBottomOf    id image id    gt            lt Button             android id    id button scan              style   android textAppearanceSmall              android layout width  match parent              android layout height  wrap content              android layout marginTop  8dp              android backgroundTint   color colorAccent              android padding  8dp              android text   string intro button scan              android textStyle  bold              app layout constraintTop toBottomOf    id desc id    gt            lt Button             android id    id button return              style   android textAppearanceSmall              android layout width  match parent              android layout height  wrap content              android layout marginBottom  8dp              android layout marginTop  8dp              android backgroundTint   color colorAccent              android padding  8dp              android text   string intro button return              android textStyle  bold              app layout constraintBottom toBottomOf  parent              app layout constraintTop toBottomOf    id button recycle    gt            lt Button             android id    id button recycle              style   android textAppearanceSmall              android layout width  match parent              android layout height  wrap content              android layout marginTop  8dp              android backgroundTint   color colorAccent              android padding  8dp              android text   string intro button recycle              android textStyle  bold              app layout constraintTop toBottomOf    id button scan    gt       lt  android support constraint ConstraintLayout gt   lt  ScrollView gt   lt  LinearLayout gt

User · Answer

TO make a scrollable layout  the layout is correct  It will not be scrollable until there is reason to scroll just like in any other layout   So add enough content and it will be scrollable  just like with any layout Linear  Relative  etc   However  you cannot scroll properly in Blueprint or design-mode when designing with ConstraintLayout and ScrollView   Meaning   You can make a scrollable ConstraintLayout  but it will not scroll properly in the editor due to a bug scenario that wasn t considered  But even though scrolling doesn t work in the editor  it works on devices   I have made several scrolling COnstraintLayouts  so I have tested it   Note  Regarding your code  The ScrollView is missing a closing tag  I don t know if it is the case in the file or if it is a copy-paste miss  but you may want to look at it

User · Answer

Just use constraint layout inside NestedScrollView or ScrollView    lt android support v4 widget NestedScrollView         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  gt        lt android support constraint ConstraintLayout             android layout width  match parent              android layout height  match parent              android background   color white  gt     lt  android support constraint ConstraintLayout gt    lt  android support v4 widget NestedScrollView gt    thats it  enjoy your coding

User · Answer

There is a type of constraint which breaks the scroll function   Just make sure you are not using this constraint on any view when wanting your ConstraintLayout to be scrollable with ScrollView    app layout constraintBottom toBottomOf    parent      If you remove these your scroll should work   Explanation    Setting the height of the child to match that of a ScrollView parent is contradictory to what the component is meant to do  What we want most of the time is for some dynamic sized content to be scrollable when it is larger than a screen frame  matching the height with the parent ScrollView would force all the content to be displayed into a fixed frame  the height of the parent  hence invalidating any scrolling functionality   This also happens when regular direct child components are set to layout height  match parent     If you want the child of the ScrollView to match the height of the parent when there is not enough content  simply set android fillViewport to true for the ScrollView

User · Answer

Constraintlayout is the Default for a new app  I am  learning to Android  now and had a very hard time figuring out how to handle the default  sample  code to scroll when a keyboard is up  I have seen many apps where I have to close the keyboard to click  submit  button and sometimes it does not goes away  Using this  ScrollView   ContraintLayout   Fields  hierarchy it is working just fine now  This way we can have the benefits and ease of use from ConstraintLayout in a scrollable view

User · Answer

It seems that it is working  I don t know what dependency you were working with but in this one   compile  com android support constraint constraint-layout 1 0 2    Is working  this is what I did   lt  xml version  1 0  encoding  utf-8   gt   lt ScrollView 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  gt        lt android support constraint ConstraintLayout         android layout width  match parent          android layout height  wrap content  gt            lt android support design widget TextInputLayout             android id    id til input              android layout width  0dp              android layout height  wrap content              android hint  Escriba el contenido del archivo              app layout constraintLeft toLeftOf  parent              app layout constraintRight toLeftOf    id btn save              app layout constraintTop toTopOf   id btn save              app layout constraintVertical chainStyle  spread  gt                lt EditText                 android layout width  match parent                  android layout height  match parent    gt           lt  android support design widget TextInputLayout gt            lt Button             android id    id btn save              android layout width  wrap content              android layout height  wrap content              android onClick  onClickButtonSave              android text  Guardar              app layout constraintLeft toRightOf    id til input              app layout constraintRight toRightOf  parent              app layout constraintTop toTopOf  parent    gt            lt TextView             android id    id txt content              android layout width  0dp              android layout height  wrap content              android layout marginTop  0dp              app layout constraintLeft toLeftOf  parent              app layout constraintRight toRightOf  parent              app layout constraintTop toBottomOf   id til input              app layout constraintVertical chainStyle  spread              app layout constraintVertical weight  1    gt            lt Button             android id    id btn delete              android layout width  0dp              android layout height  wrap content              android onClick  onClickButtonDelete              android text  Eliminar              app layout constraintLeft toLeftOf  parent              app layout constraintRight toRightOf  parent              app layout constraintTop toBottomOf   id txt content              app layout constraintVertical chainStyle  spread    gt        lt  android support constraint ConstraintLayout gt    lt  ScrollView gt    Scroll Top  Scroll Bottom

[android] Android - how to make a scrollable constraintlayout?

Examples related to android

Examples related to android-layout

Examples related to android-scrollview

Examples related to android-constraintlayout