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

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

Related

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.

I tried using ScrollView in a fragment, but it doesn't work

I have a question about my Android App. I have a menu with different options. For the home button, I use a fragment, in which I want to scroll. First time, I added ScrollView in the fragment xml, but it didn't work at all. Then, I tried ScrollView in the main activity with the menu, but it didn't work.
Here is the main activity 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"
android:fillViewport="true"
android:isScrollContainer="false">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottomAppBar" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/green_700"
app:fabAlignmentMode="center"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="30dp"
app:fabCradleVerticalOffset="10dp"
app:contentInsetStart="0dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:itemIconTint="#color/light_grey"
app:itemTextColor="#color/light_grey"
app:itemTextAppearanceActive="#font/josefin_sans_semibold"
android:background="#drawable/background_transparent"
app:menu="#menu/bottom_navigation_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onPressFab"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</ScrollView>
And here is the fragment 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
app:layout_constraintTop_toTopOf="parent">
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:cardBackgroundColor="#color/green_700"
app:cardElevation="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.428"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MaterialCardView.Cut">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#drawable/search_outline"
android:fontFamily="#font/josefin_sans_semibold"
android:hint="Search Barcode"
android:inputType="text"
android:maxLines="1"
android:paddingLeft="30dp"
android:paddingTop="10dp"
android:paddingRight="30dp"
android:paddingBottom="10dp"
android:textColor="#color/dark_grey"
android:textColorHint="#color/grey_200"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.183"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/sbutton"
android:layout_width="90dp"
android:layout_height="60dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="16dp"
android:background="#drawable/background_transparent"
android:drawableLeft="#drawable/search_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<ImageView
android:id="#+id/imageView4"
android:layout_width="450dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="64dp"
android:layout_marginRight="64dp"
android:src="#drawable/home_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="208dp"
android:layout_height="138dp"
android:layout_marginTop="120dp"
android:layout_marginEnd="4dp"
android:layout_marginRight="4dp"
android:gravity="center"
android:text="Welcome back!"
android:textColor="#color/darker_grey"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/myCoordinatorLayout" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_marginTop="340dp"
android:clipToPadding="false"
android:foregroundGravity="center"
android:overScrollMode="never"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/myCoordinatorLayout">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>
I would be greatful if you have any suggestions. Thank you!

I am not sure if I understood your use case correctly but if you want your fragment to be scrollable then use scrollview inside your fragment layout and make sure android:isScrollContainer is set to true.

Android Material CardView with ConstraintLayout clip child not working

I want to overlap (take half the image outside) of the card view. The ShapeableImageView is a child of the card view.
I have tried adding clipChilder="false" on card view as well as on the child constraint layout but no luck. I also tried the same in runtime again no luck.
Layout
<?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=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Screenshot
Another Test
I have tried out without MaterialCardView but the result is the same.
I have no idea why it is not working.
<?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=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
app:elevation="1dp"
android:clipToPadding="false">
<ImageView
app:elevation="16dp"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot
Test 3
It won't work with LinearLayout too :(
<LinearLayout
android:orientation="vertical"
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
android:elevation="1dp"
android:clipToPadding="false">
<ImageView
android:elevation="#dimen/app_space"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:translationY="-60dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</LinearLayout>

In my case you can add this to MaterialCardView xml file
android:outlineProvider="none"

Alright, so after trying so many different ways, finally found the solution.
In my case, I have an image wrapped by a card view, and the card view is inside a constraint layout. So here I have to set android:clipChildren="false" for both views, ConstraintLayout the parent and the CardView a child. See the final code below.
<?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=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
android:clipChildren="false"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

CollapsingToolbarLayout with inner viewgroup prevents from clicking on nested views inside it

This is the top of my activitys XML -
<?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:id="#+id/activity_product_page_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/activity_product_page_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/activity_product_page_top_product_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/activity_product_page_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/marketplace_14dp"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:contentDescription="#string/marketplace_productvendor_page_back_button"
android:onClick="backButtonPressed"
android:src="#drawable/arrow_left"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/activity_product_page_vendor_icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/marketplace_14dp"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:contentDescription="#string/marketplace_productvendor_page_vendor_image"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_width="200dp" />
<FrameLayout
android:id="#+id/activity_product_page_shopping_cart_framelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/marketplace_14dp"
android:layout_marginEnd="#dimen/marketplace_14dp"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/activity_checkout_cart_imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_margin="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/icons_32_x_32_black_shopping_cart" />
<TextView
android:id="#+id/activity_product_page_shopping_cart_counter"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="end"
android:layout_marginTop="5dp"
android:layout_marginEnd="3dp"
android:background="#drawable/textview_round_background"
android:elevation="1dp"
android:gravity="center"
android:maxLines="1"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="10sp"
android:textStyle="bold"
android:visibility="gone"
app:autoSizeMaxTextSize="16sp"
app:autoSizeMinTextSize="10sp"
app:autoSizeStepGranularity="2sp"
app:layout_constraintStart_toEndOf="#+id/activity_checkout_cart_imageView"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="SmallSp"
tools:text="1"
tools:visibility="visible" />
</FrameLayout>
<View
android:id="#+id/activity_shopping_cart_top_view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/marketplace_view_line_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
The issue I am facing now is the fact that all views inside the Constraint Layout that is inside my CollapsingToolbarLayout are not clickable.
I have checked multiple questions on this subject and none helped me - some suggested to make a custom Toolbar class that overrides onTouchEvent() to false always but when I try to use this class it does not show in the XML editor for some reason.
Other solutions I have found accross the net did not provide me with any usefull solutions.
So how can I make the nested views clickable?

Solved, I added the following line to my CollapsingToolbarLayout -
android:descendantFocusability="blocksDescendants"

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.

Categories

Resources