Android - Button at the end of ScrollView not visible - android-studio

I have added a button at the end of a ScrollView layout, inside it is a Constraint Layout. Both are inside a Relative layout. However, upon scrolling, the button does not show up on my device. It's stuck at the bottom of the layout and cannot get up. I have tried everything.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.BachelorDetailActivity"
android:id="#+id/layout_fragment_studyplan">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipToPadding="false"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/h1_studyplan"
android:textSize="#dimen/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_studyplan"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textColor="#color/color_primary"
android:textStyle="bold"
android:textAllCaps="true"
android:paddingTop="#dimen/margin_default"
android:paddingStart="#dimen/margin_default"/>
<TextView
android:id="#+id/p_studyplan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/h1_studyplan"
app:layout_constraintStart_toStartOf="parent"
android:text="#string/list_studyplan"
android:paddingBottom="#dimen/margin_huge"
android:paddingStart="#dimen/margin_default"
android:paddingTop="#dimen/margin_default"
android:singleLine="false"
android:lineSpacingExtra="#dimen/margin_short"/>
<Button
android:id="#+id/btn_contact_study"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/p_studyplan"
android:layout_width="wrap_content"
android:layout_height="#dimen/button"
android:layout_marginBottom="500dp"
android:text="#string/contact_guide"
android:textColor="#color/white"
android:backgroundTint="#color/color_primary"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</RelativeLayout>

If you are trying to get the button to slide up the screen by 500dp by setting android:layout_marginBottom="500dp" as the button's bottom margin, you will also need to specify a bottom constraint for the button.
app:layout_constraintBottom_toBottomOf="parent"
Margins apply only when there is a constraint in effect for the direction of the margin.

Related

How to Add Buttons Under a ScrollView and Stop the Scrolled Text at the Top of the Buttons?

I have a ConstraintLayout with a TextView in a ScrollView at the top and three buttons in a row at the bottom. I want the text to stop at the top of the buttons, but instead, the text scrolls under the buttons as shown in the picture.
Here is my layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EventLogFragment">
<ScrollView
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/event_log"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/empty_log" />
</ScrollView>
<Button
android:id="#+id/button_update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/update"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_send"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="#+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_clear"
app:layout_constraintStart_toEndOf="#+id/button_update"/>
<Button
android:id="#+id/button_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clear"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_send"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried adding app:layout_constraintTop_toBottomOf="#+id/scroller" to each button, but that just pushes the buttons half-way off the screen. I tried adding android:layout_weight="1" to each button, and that did nothing.
How do I get the scrolled text to stop at the top of the buttons?
Change the height of the ScrollView to 0dp (match_constraint) and place it into a vertical spread-inside chain with the "update" button. The other buttons can be placed into a horizontal spread chain with the "update" button. Like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toTopOf="#+id/button_update"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside">
<TextView
android:id="#+id/event_log"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/empty_log"
android:textSize="48sp" />
</ScrollView>
<Button
android:id="#+id/button_update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/update"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_send"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scroller" />
<Button
android:id="#+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/send"
app:layout_constraintEnd_toStartOf="#+id/button_clear"
app:layout_constraintStart_toEndOf="#+id/button_update"
app:layout_constraintTop_toTopOf="#id/button_update" />
<Button
android:id="#+id/button_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clear"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_send"
app:layout_constraintTop_toTopOf="#id/button_update" />
</androidx.constraintlayout.widget.ConstraintLayout>

BottomSheet move to top of screen when changing visibility of its component

I have a bottom sheet with a NestedScrollView inside (see below). When I press on a FAB button, I want to make some parts in this NestedScrollView invisible. But when I change some linearlayouts visibilities to GONE, bottomsheet fly aways from the top.
My XML code:
<?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:id="#+id/messageOptionBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back_miscellaneous"
android:gravity="center"
android:orientation="vertical"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/textSecondary" />
<LinearLayout
android:id="#+id/layoutDeleteMessage"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_10sdp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:animateLayoutChanges="true"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="#dimen/_22sdp"
android:layout_height="#dimen/_22sdp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_remove" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:includeFontPadding="false"
android:text="#string/delete_message"
android:textColor="#color/textSecondary"
android:textSize="#dimen/_12ssp" />
<TextView
android:id="#+id/textConfirmDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:gravity="end"
android:includeFontPadding="false"
android:text="#string/confirm"
android:textColor="#color/red"
android:textSize="#dimen/_12ssp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Your bottom sheet is moving top because you are using
android:animateLayoutChanges="true"
remove this line from your layoutDeleteMessage (Linear layout)
Hope this solve your problem

ViewPager2 not honoring Constraints Layout

I want to have an activity with an image, and below the image a viewpager2, that will change based on click of the users. So then I come up with this layout for the activity:
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity" >
<ImageView
android:id="#+id/profile_pic_imageView"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_logo"/>
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_pic_imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
But, it's on top of the imageview... what do I need to change? I tried match_parent, and 0dp but it's always on top of the image view
You need to give ViewPager bottom constraint and as we gave top and bottom constraint we can give height 0dp.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/profile_pic_imageView"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_background" />
<androidx.viewpager2.widget.ViewPager2
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_pic_imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Hide Cardview & ImageView inside CollapsingToolbarLayout

Whenever I'll scroll my activity, I want toolbar should remain stable and else everything should go below the toolbar. I have used CollapsingToolbarLayout and AppBarLayout, but still I'm not getting proper solution.
Here in this code, CircleImageView and CardView are comming above the toolbar while scrolling.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:elevation="8dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsideToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorAccent"
app:title="back"
app:titleEnabled="false"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/verify_image"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
app:title="back"
app:titleTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You are missing one of the most important property app:layout_behavior in card view.
If you want eveything else like cardview, circular ImageView and rest to scroll till toolbar then club them in Relative or LinearLayout and assign app:layout_behavior="#string/appbar_scrolling_view_behavior".
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:cardElevation="5dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:elevation="8dp"
android:src="#drawable/bg4"
app:layout_anchor="#+id/cardView"
app:layout_anchorGravity="top|center" />
</LinearLayout>
Now, everything will just scroll properly. Hope it helps.

How can make the mRecyclerView control fill in the free space?

I use Code A to design UI with constraint layout, the top of the UI is google AD and the bottom of the UI is toolbar.
I hope the RecyclerView control named mRecyclerView fill in all other space, how can I do?
BTW, Code B is generated by Android Studio 3.01 automatically when I drag and drop RecyclerView control to UI. It's a hard code for layout_width and layout_height.
Code A
<?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">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:layout_constraintTop_toTopOf="parent"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
/>
<LinearLayout
android:id="#+id/linearLayoutToolBar"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnBackup" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnExit" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
</android.support.constraint.ConstraintLayout>
Code B
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
Replace your RecyclerView code like below to fill the free space:
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/adView"
app:layout_constraintBottom_toTopOf="#id/linearLayoutToolBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>

Resources