FAB not anchoring to view consistently

FAB not anchoring to view consistently - android

I'm having issues having my Floating Action Buttons anchor to the views correctly. It almost seems like they're anchoring before the view is measured.
When the issue presents itself, the FAB is anchored to the top left of the screen like:
And when it works properly:
The behavior is random, and when it doesn't anchor correctly, it will sometimes fix itself with no user interaction. Other times, it won't correct itself.
Everything I've tried searching for has been resolved by adding the layout_anchor or layout_anchorgravity attributes, which I've already included.
Any advice would be greatly appreciated!
Here's my layout.
EDIT: Had wrong layout originally...
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3">
<LinearLayout
android:id="#+id/first_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/primary_dark"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Place Holder - Stats coming soon"/>
</LinearLayout>
<LinearLayout
android:id="#+id/second_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="2">
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_compare_arrows_white_24dp"
android:layout_margin="16dp"
android:clickable="true"
app:backgroundTint="#color/accent"
app:layout_anchor="#id/second_container"
app:layout_anchorGravity="top|right"/>
</android.support.design.widget.CoordinatorLayout>

try to anchor the floating action button to the top view (i.e, the one with "placeholder" textview on it ).
look at cheesesquare project by chris banes on github:
https://github.com/chrisbanes/cheesesquare
it may give you some idea.

Related

Drag and drop between overlapping views

I am trying to move items between two recyclerviews, one of them into a bottom sheet.
I get this working without problems if the bottom sheet is in the same LinearLayout that the target recylcerview, as you can see in this gif:
This is the working layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My problem is when I try it with the bottom sheet overlapping the main content, I mean using a FrameLayout or Relativelayout as parent. In this case onDrag() is not fired outside the bottom sheet. Not working:
Not working layout, using a RelativeLayout:
<RelativeLayout 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:layout_alignParentTop="true"
android:orientation="vertical"
app:layout_constraintBaseline_toTopOf="parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="25sp"
android:paddingTop="20dp"
android:paddingBottom="10dp"
android:text="Target RecyclerView" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"/>
</LinearLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/bottom_sheet_dialog" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
I need the bottom sheet over the main content. Any idea?
Thanks!
Edit: Further investigations point that the problem is the CoordinatorLayout (which is a Bottom Sheet requirement). CoordinatorLayout is a "super-powered FrameLayout" and it acts at "top-level application decor", and I do not know why it does not allow onDrag events get views outside of CoordinatorLayout.
Workaround: For the moment my workaround is setting CorrdinatorLayout visibility to GONE when one of its views is dragged. This allow me to drop the view outside of CoordinatorLayout successfully, but I think should be some other way, some CoordinatorLayout parameter to allow dragging outside it.

SlidingUpPanel with TabLayout and scrollable views

My app uses the SlidingUpPanel library. The main sliding up panel holds a RelativeLayout and a LinearLayout as its two children. The TabLayout is in the LinearLayout. Two of the tabs contain scrollable views and the third does not. All of the tabs are fragments.
The sliding up panel works as expected for the non-scrollable view and handles the first scrollable event on the scrollable views. However, the moment I release my finger, the scroll capability goes away and the view sticks.
Looking at other stackoverflow questions, I have tried setting the drag view and setting the scrollview as the documentation suggests but no dice. The view still sticks after the first scroll event.
I also implemented a ScrollableViewHelper as the documentation recommended but that didn't seem to help at all.
Here is a video of the behavior I am describing
SlidingUpPanel documentation on scrollable views
https://github.com/umano/AndroidSlidingUpPanel#scrollable-sliding-views
SlidingUpPanel Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/eventDetailsFullLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/eventDetailsSlidingUpPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoShadowHeight="4dp">
<RelativeLayout
android:id="#+id/eventDetailsHeaderLayout"
android:paddingTop="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/eventDetailsEventImageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/eventDetailsEventBanner"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#color/gray"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_centerInParent="true"
android:background="#drawable/grey_circle"
android:gravity="center">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/eventDetailsEventLogo"
android:layout_width="56dp"
android:layout_height="56dp"
android:gravity="center"
app:srcCompat="#drawable/ic_storefront" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/eventDetailsEventImageLayout"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/eventDetailsEventName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/darkDarkGray"
android:textSize="18sp"
app:fontFamily="sans-serif-medium" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/eventDetailsTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/teal"
app:tabSelectedTextColor="#color/teal"
app:tabTextColor="#color/gray" />
<android.support.v4.view.ViewPager
android:id="#+id/eventDetailsViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</LinearLayout>

Android - how to make a scrollable constraintlayout?

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?
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.constraint.ConstraintLayout
android:id="#+id/Constraint"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
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.

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
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.TextInputLayout>
<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" />
<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" />
<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" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Scroll Top
Scroll Bottom

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.

Use NestedScrollView with viewport true is working good for me
<android.support.v4.widget.NestedScrollView
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="700dp">
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
for android x use this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.....other views....
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

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
<?xml version="1.0" encoding="utf-8"?>
<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"> <!-- usually the name of the Java file associated with this activity -->
<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">
<!-- all the layout details of your page -->
</android.support.constraint.ConstraintLayout>
</ScrollView>
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.

Just use constraint layout inside NestedScrollView or ScrollView.
<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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
thats it. enjoy your coding.

A lot of answers here, nothing really simple. It's important that the ScrollView's layout_height is set to match_parent while the layout_height of the ContraintLayout is wrap_content
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...

Please use below solution it has taken my lots of time to fix.
Enjoy your time :)
<?xml version="1.0" encoding="utf-8"?>
<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"
>
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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"
>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Use Exactly like this u will definitely find your solution...

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.

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.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/bg"
android:orientation="vertical">
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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" />
<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" />
<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" />
<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" />
<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" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>

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

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"
<?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">
<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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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">
<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" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<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" />
</LinearLayout>

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.

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.

You can use HorizontalScrollView and it'll work as well!

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":
<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">

in scrollview make height and width 0
add Top_toBottomOfand Bottom_toTopOf constraints
that's it.

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

Is it possible to make the first view in ScrollView match dimensions to screen?

I was able to this somehow using RecyclerView. When I create a view for a specific item in my RecyclerView, the recyclerview item layout is matched to parent.
I am wondering if this is also possible using ScrollView?
Here's what I did so far:
ScrollView xml:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollview_homescreen"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
Content:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageview_menu_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<ImageView
android:id="#+id/imageview_menu_title_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/starwars_webtoon_home_1_logo"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<Button
android:id="#+id/button_start_reading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/button_menu"
android:layout_marginBottom="18dp"
android:text="#string/button_start_reading"
android:gravity="start"
android:drawableRight="#drawable/ic_keyboard_arrow_right_black_24dp"
android:drawableEnd="#drawable/ic_keyboard_arrow_right_black_24dp"
android:background="#drawable/button_bg"
android:textSize="18sp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp" />
<Button
android:id="#id/button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="28dp"
android:text="#string/button_menu"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:drawableLeft="#drawable/ic_menu_white_24dp"
android:drawableStart="#drawable/ic_menu_white_24dp"
android:background="?android:attr/selectableItemBackground" />
</RelativeLayout>
So what am I trying to do? Basically this is for comic listing. The first item should be the homescreen, a couple of button here and there and the entire application logo. The next item should show the listings (I have 40 items of the same width and height) and a footer.
I need my homescreen to match the parent which is the screen. So when I scroll the topmost part, the first item (the first view, which is the homescreen) fills the entire devices screen.
I was able to to do this on RecyclerView and looks nice. I have encountered some of problems that plague me which I have to fix extensively to the point that I am hacking through the system and I realize RecyclerView is not really the best layout for this kind of case. I am currently deciding whether to switch to ScrollView and dynamically/statically add the comic items. But, the homescreen, which is the first View is not matching the screen device.
I would just like to ask if this possible at all to do in ScrollView?
Thanks!

Use weight attribute:
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>

How do I prevent action bar in an activity from moving up and disappearing?

I have an activity with several entry fields. I has an action bar. When I move down, at a certain point, the action bar starts to move up, and if I enter some entry fields further down, the action bar disappears totally.
How do I ensure that the action bar is fixed at the top and does not disappear, even if there are many fields down the window?
...
<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/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... other horizontal LinearLayout follow...
...
One solution is to use ScrollView as "root" layout, then only one direct dependent Layout (such as a LinearLayout) that will serve as container for all other necessary layouts and components needed to your activity.
...
Such as:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... all other necessary layouts here...
</LinearLayout>

You could use a Toolbar and place it into the linear layout as a sibling along with your scroll view. It will look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/activityHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:paddingLeft="3dp"
android:paddingRight="3dp">
<TextView
android:id="#+id/activityTitleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFFFFF" />
</LinearLayout>
... all other necessary layouts here...
</LinearLayout>
Make sure that android:orientation is set to "vertical"

I "Googled" the problem and could not find the same type of problem described, and no solution.
It is when I was viewing Udacity NanoDegree Lesson on Developing Android Apps that I saw the use of ScrollView. So the solution is to use a ScrollView as the root layout, then a single LinearLayout that will be the container of all other necessary layouts and views needed for your activity. ScrollView can only one dependent. See YouTube demo

do you mean your action bar is like this and you want to make it stable like the fourth picture?
you need to chandge the theme and make windowActionBarOverlay set to false
from
<item name="android:windowActionBarOverlay">true</item>
to
false

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

FAB not anchoring to view consistently - android

try to anchor the floating action button to the top view (i.e, the one with "placeholder" textview on it ). look at cheesesquare project by chris banes on github: https://github.com/chrisbanes/cheesesquare it may give you some idea.

Related

Drag and drop between overlapping views

SlidingUpPanel with TabLayout and scrollable views

Android - how to make a scrollable constraintlayout?

Is it possible to make the first view in ScrollView match dimensions to screen?

How do I prevent action bar in an activity from moving up and disappearing?

Categories

Resources