Can NestedScrollview and ConstraintLayout work together? - android

I'm trying the new ConstraintLayout and it's really cool and simple.
I tried to apply it in a NestedScrollview inside coordinate layout where ConstraintLayout is the parent of the NestedScrollView.
But it didn't work, and all views collapsed vertically. How can I solve this?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/textView2"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="0dp"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="367dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="367dp"
tools:layout_editor_absoluteX="0dp" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/progressBar2"
app:layout_constraintTop_toTopOf="#+id/guideline"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="40dp"
app:layout_constraintHorizontal_bias="0.25"
android:max="100"
android:progress="76" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>


I might be late but adding android:fillViewport="true"in NestedScrollView should resolve the issue.


As per this link,This has already been fixed in constraint-layout 1.0.0-alpha2 (available with Android Studio 2.2 Preview 2).


Your constraint layout takes the whole space and thus your nested scrollview will not be scrollable. use wrap_content for the width instead.
...
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="wrap_content" <---here
android:layout_height="match_parent">
...

Related

How to make whole screen scrollable rather than just the recyclerview inside it?

image1
image 2
look at the two images above. It is a fragment in which there is textviews, searchviews, and recyclerviews. The problem is all views except recyclerview is fixed and is not scrollable. How can i make the whole screen scollable?
This is xml code below, here, just recyclerview seems to be scrolling while all the other views are fixed to there places. I want to make it so that when i scroll, all the elements should move.
<?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=".HomeFragment">
<TextView
android:id="#+id/tvDrops"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:shadowColor="#40000000"
android:shadowDx="0"
android:shadowDy="5"
android:shadowRadius="5"
android:text="Drops"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="21sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/svHomeSearch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SearchView
android:id="#+id/svHomeSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="10dp"
android:iconifiedByDefault="false"
android:queryHint="Search"
android:searchIcon="#drawable/ic_search_icon"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/cvCategories"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvDrops" />
<androidx.cardview.widget.CardView
android:id="#+id/cvCategories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/svHomeSearch"
app:layout_constraintBottom_toTopOf="#id/tvExplore"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="qwertyuioasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbn" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tvExplore"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginTop="12dp"
android:shadowColor="#40000000"
android:shadowDx="0"
android:shadowDy="5"
android:shadowRadius="5"
android:text="Explore"
android:textColor="#000000"
android:textSize="21sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/rvWallpaperView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cvCategories" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvWallpaperView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:paddingBottom="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvExplore"
tools:listitem="#layout/item_blueprint" />
</androidx.constraintlayout.widget.ConstraintLayout>

You could use CoordinatorLayout & AppBarLayout, try below
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
<Toolbar
android:id="#+id/toolbar"/>
</AppBarLayout>
<< rest of the UI of yours >>
</android.support.design.widget.CoordinatorLayout>

Try This
Use Nested Scrollview
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.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"
tools:context=".HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

ViewPager in Constraint Layout with tabbed activity getting cut at bottom for recyclerview

I am creating a tabbed layout with ViewPager but instead of using coordinator layout and AppBar, I am using constraint layout. I have a custom title bar, a card, a custom tablayout and a viewpager. The viewpager is holding two fragments and each fragment has a recyclerview. But the data of the recyclerview is cut for last few rows. Can someone please help me understand what is going wrong
This is my main activity layout
<?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=".Activities.Products">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/MyAppBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_scrollFlags="enterAlways"/>
<androidx.cardview.widget.CardView
android:id="#+id/card_total"
android:layout_width="match_parent"
android:layout_height="120dp"
android:backgroundTint="#color/color_primary_text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total Balance"
android:textColor="#color/white"
android:textSize="24sp"
android:layout_gravity="center"/>
</androidx.cardview.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/card_total">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/Widget.App.TabLayout"
android:layout_width="wrap_content"
android:layout_height="34dp"
android:layout_gravity="center"
android:background="#drawable/tab_background"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#null" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_plus_blue"
app:tint="#color/color_primary"
app:backgroundTint="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
As you can note I have put my viewpager and tabbed layout inside a linearlayout
This is my fragment layout
<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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_receivable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:text="Total Receivable: "
android:textColor="#color/color_primary_text"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.craftec.managed.RupeeTextView
android:id="#+id/amount_receivable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginTop="8dp"
android:textColor="#color/color_primary_text"
android:textSize="18sp"
app:layout_constraintStart_toEndOf="#+id/text_receivable"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/customer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:itemCount="10"
app:layout_constraintTop_toBottomOf="#id/amount_receivable"
tools:listitem="#layout/item_customers" />
</androidx.constraintlayout.widget.ConstraintLayout>
Can someone please help me understand what wrong I am doing here. I have been stuck here for a day now. Please help

change your activity layout to
<?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=".Activities.Products">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/MyAppBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_scrollFlags="enterAlways" />
<androidx.cardview.widget.CardView
android:id="#+id/card_total"
android:layout_width="match_parent"
android:layout_height="120dp"
android:backgroundTint="#color/color_primary_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Total Balance"
android:textColor="#color/white"
android:textSize="24sp" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/Widget.App.TabLayout"
android:layout_width="wrap_content"
android:layout_height="34dp"
android:layout_gravity="center"
android:background="#drawable/tab_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/card_total"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#null" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabs" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_plus_blue"
app:tint="#color/color_primary" />
</androidx.constraintlayout.widget.ConstraintLayout>
Update
What does android:layout_height="0dp" or android:layout_width="0dp" mean?
In ConstraintLayout 0dp is set for - whole empty space.
In case, the view is know where to start and end (constraintTop_... and constraintBottom_... are set), with 0dp it takes the whole space that display has.
For example, we have views that takes 20% of view, then RecyclerView or some other view with android:layout_width="0dp" would take 80% of display view
If there would be 2 views, each with layout_width="0dp", then they would take each 50% of free space.

NestedScrollView and AppBarLayout in a CoordinatorLayout: inability to scroll until the end of NestedScrollView

I have an activity layout that consists of:
A sticky non-collapsing Toolbar on the top of the page
A NestedScrollView that contains two headers for two RecyclerViews
A ConstraintLayout to position the items inside NestedScrollView
Two RecyclerViews
The XML file is below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/Theme.AppCompat.Light">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backButton"
style="#style/Icon"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_2" />
<View
android:id="#+id/view13"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/bg_white_ellipse_with_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/backButton"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView21"
style="#style/Icon"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="#+id/view13"
app:layout_constraintStart_toStartOf="#+id/view13"
app:layout_constraintTop_toTopOf="#+id/view13"
app:srcCompat="#drawable/ic_1" />
<EditText
android:id="#+id/searchField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#color/fui_transparent"
android:ems="10"
android:hint="Type something"
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/view13"
app:layout_constraintStart_toEndOf="#+id/imageView21"
app:layout_constraintTop_toTopOf="#+id/view13" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view8"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#color/colorLightGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view9"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#color/colorLightGray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rv1" />
<View
android:id="#+id/view12"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginBottom="16dp"
android:background="#color/colorLightGray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rv2" />
<TextView
android:id="#+id/textView21"
style="#style/HeadingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Dishes"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view8" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView21" />
<TextView
android:id="#+id/textView8"
style="#style/HeadingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Restaurants"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view9" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/view12"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
The toolbar is fixed at the top of the page as I wanted. Everything scrolls correctly. However, I can't scroll until the end of the NestedScrollView, i.e. the item was cut off and I cannot scroll to the last item in the second RecyclerView. How do I fix this?

For some reason, this attribute android:fillViewport="true" on CoordinatorLayout caused it to break. Removing that attribute corrects everything.

androidx.appcompat.widget.SearchView doesn't show up in toolbar

I'm working on a personal Android application. In this application, there is a single main Activity with two Fragments. In one of them, I want to implement the Algolia InstantSearch according to this guide.
This is my fragment layout:
<?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">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="0dp"
android:focusable="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:iconifiedByDefault="false"
tools:queryHint="Hello"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
<TextView
android:id="#+id/stats"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="16dp"
android:textAppearance="#style/TextAppearance.MaterialComponents.Caption"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/memory_recyclerview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="#+id/stats">
</androidx.recyclerview.widget.RecyclerView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:padding="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="#+id/stats">
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/add_memory_fab_menu"
android:layout_width="297dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:clickable="true"
app:menu_animationDelayPerItem="50"
app:menu_backgroundColor="#android:color/transparent"
app:menu_buttonSpacing="0dp"
app:menu_colorNormal="#color/babyBlue"
app:menu_colorPressed="#color/red"
app:menu_colorRipple="#99FFFFFF"
app:menu_fab_hide_animation="#anim/fab_slide_out_to_right"
app:menu_fab_show_animation="#anim/fab_slide_in_from_right"
app:menu_fab_size="normal"
app:menu_icon="#drawable/ic_add_white_24dp"
app:menu_labels_colorNormal="#333333"
app:menu_labels_colorPressed="#444444"
app:menu_labels_colorRipple="#66FFFFFF"
app:menu_labels_cornerRadius="3dp"
app:menu_labels_ellipsize="none"
app:menu_labels_hideAnimation="#anim/fab_slide_out_to_right"
app:menu_labels_margin="0dp"
app:menu_labels_maxLines="-1"
app:menu_labels_padding="8dp"
app:menu_labels_paddingBottom="4dp"
app:menu_labels_paddingLeft="8dp"
app:menu_labels_paddingRight="8dp"
app:menu_labels_paddingTop="4dp"
app:menu_labels_position="left"
app:menu_labels_showAnimation="#anim/fab_slide_in_from_right"
app:menu_labels_showShadow="true"
app:menu_labels_singleLine="false"
app:menu_labels_textColor="#FFFFFF"
app:menu_labels_textSize="14sp"
app:menu_openDirection="up"
app:menu_shadowColor="#66000000"
app:menu_shadowRadius="4dp"
app:menu_shadowXOffset="1dp"
app:menu_shadowYOffset="3dp">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/add_memory_fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_insert_comment_white_24dp"
app:fab_label="Create Memory"
app:fab_size="mini" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/add_memory_fab_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_search_white_24dp"
app:fab_label="Search"
app:fab_size="mini" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/add_memory_fab_logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_logout_new_white_24dp"
app:fab_label="Logout"
app:fab_size="mini" />
</com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is the androidx.appcompat.widget.SearchView doesn't appear in the toolbar. Instead, the toolbar still with empty space.
How can I fix this? Feel free to ask for additional information.

You forget change width and height
Use this code
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:iconifiedByDefault="false"
tools:queryHint="Hello"/>
Or if you want automatically fill parent when use ConstraintLayout you miss below line
app:layout_constraintEnd_toEndOf="parent"
So you can use this code too
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="0dp"
android:focusable="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:iconifiedByDefault="false"
tools:queryHint="Hello"/>

Bottom Align Floating Action Button - Constraint Layout

I'm simply trying to do this alignment with constraintlayout but I'm not sure It's possible or not.
How can I do it ?
Sample xml
<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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/com_facebook_profile_picture_blank_portrait" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
app:srcCompat="#android:color/holo_green_light" />
My workaround.

Constraining both the top and the bottom of the FloatingActionButton to the bottom of the ImageView will center it on the edge. Also android:layout_width="match_parent" of the ImageView should be changed to 0dp to enforce horizontal constraints. Example XML looks like 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">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="320dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/com_facebook_profile_picture_blank_portrait" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView"
app:srcCompat="#android:color/holo_green_light" />
</android.support.constraint.ConstraintLayout>

You can do it with constraint layout with the following code.
<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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/carrick" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="176dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/bcslogo" />
</android.support.constraint.ConstraintLayout>
otherwise you can use relative layout instead of constraint you can place your all content in relative layout like following
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:id="#+id/notesbg"
android:layout_gravity="bottom|end">
<android.support.v7.widget.RecyclerView
android:layout_marginTop="2dp"
android:id="#+id/myRecyclernote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_marginEnd="20dp"
android:layout_marginBottom="50dp"
app:backgroundTint="#00b4ed"
android:src="#drawable/floatingbtn"
app:borderWidth="0dp"
app:elevation="8dp" />
</RelativeLayout>

Categories

Resources