Android Material CardView with ConstraintLayout clip child not working - android

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>

Related

How to configure XML file so RecyclerView doesn't overlap the rest of the content?

What my layout file currently does:
My layout file after building an app looks like on the picture and before building
What I want it to do:
I want this info icon and "Basic calisthenics progression" to be on top on all devices without overlapping.
What I've tried:
I've tried to add CardView, moving from constraint layout to frame layout, etc, but nothing seems to work and recyclerView still overlaps the header.
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="640dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
Modifying your layout like this might fix the problem
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="20dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:layout_marginEnd="20dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_weight="1"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
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/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

ScrollView is not providing scrolling feature

The ScrollView is not scrolling. Although I have it and it is set to wrap_content, it contains only one child element, but there is not scrolling feature at all.How can I make it scroll? The scrolling should start after EditText that's why I have it below EditText, not as parent. Thanks in advance
<?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"
android:fitsSystemWindows="true">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/message"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="#dimen/dp_20"
android:src="#drawable/ic_messages"
app:layout_constraintBottom_toBottomOf="#+id/textViewDrawable"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/main_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_10"
android:fontFamily="#font/manrope_normal"
android:text="Платежи"
android:textColor="#071222"
android:textSize="34sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/message" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_10"
android:background="#drawable/search_bar"
android:drawableStart="#drawable/ic_search_grey"
android:drawablePadding="#dimen/dp_10"
android:hint="Какой платеж ищете?"
android:paddingVertical="#dimen/dp_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/main_title" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/card_popular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_26"
app:cardCornerRadius="#dimen/dp_12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/payments_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dp_16"
android:layout_marginTop="20dp"
android:layout_marginRight="#dimen/dp_16"
android:layout_marginBottom="#dimen/dp_20"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="4"
tools:listitem="#layout/recycler_popular_payment" />
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_16"
android:background="#color/colorWhite"
android:orientation="vertical"
android:paddingHorizontal="#dimen/dp_16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/card_popular">
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_16"
android:text="Сохраненные" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/saved_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
tools:listitem="#layout/recycler_item_saved_payment" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Your ScrollView should have these properties:
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
Using those and some dummy TextView(s) inside the LinearLayout I see that scrolling is working.
Now update the scroll view
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:fillViewport="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">

I want to reduce the space between the cardview in grid adapter

This is xml code. actually while running this code the output or the layout which I am expecting is not coming instead some different output is displaying. I have also attached the screenshot of the output which I am getting below.
<?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.cardview.widget.CardView
android:layout_width="191dp"
android:layout_height="170dp"
app:cardElevation="10dp"
app:contentPadding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.247"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="35dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="166dp"
android:layout_height="146dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="151dp"
android:layout_height="108dp"
tools:layout_editor_absoluteX="6dp"
tools:layout_editor_absoluteY="7dp"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="122dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
These are the snap of my outputs.
Try to android:layout_height="wrap_content" of the root view instead of match_parent
Also it's not right to use tools:ignore="MissingConstraints" in production, that will miss out your Views; instead hardcode the missing constraints.
I've fixed this in below
<?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="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="191dp"
android:layout_height="170dp"
app:cardElevation="10dp"
app:contentPadding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="166dp"
android:layout_height="146dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="151dp"
android:layout_height="108dp"
app:layout_constraintBottom_toTopOf="#id/textView15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView4" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView loads all items at once, causing Application Not Responding error

I have a Layout with structure of following :
<?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=".Activites.Settings.ContactsActivity">
<FrameLayout
android:id="#+id/fl_contacts"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
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/tv_mirriom_contacts">
</FrameLayout>
some other widgets
</androidx.constraintlayout.widget.ConstraintLayout>
in this frameLayout I show a fragemnt that contains a recyclerView.
i am going to scroll all layout not just recyclerView.
so i implemented this structure
<androidx.constraintlayout.widget.ConstraintLayout >
<NestedScrollView>
<androidx.constraintlayout.widget.ConstraintLayout >
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
Other widgets
</androidx.constraintlayout.widget.ConstraintLayout >
</NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout >
in this mode scrolling is right but all items of recycler load together and cause app not responding
this is my fragment
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Activites.Event.Fragments.MirriomContactsFrag">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_contact"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/item_user" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit
my fragment xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Activites.Event.Fragments.MirriomContactsFrag">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_contact"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/item_user" />
</androidx.constraintlayout.widget.ConstraintLayout>
main 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activites.Settings.ContactsActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fl_contacts"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
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/tv_mirriom_contacts">
</FrameLayout>
<include
android:id="#+id/app_bar"
layout="#layout/search_appbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView27"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="deleteSyncedContactsItemClicked"
android:padding="12dp"
android:text="#string/delete_synced_contacts"
android:clickable="true"
android:background="#drawable/my_ripple"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar"
android:focusable="true" />
<TextView
android:id="#+id/textView28"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="12dp"
android:text="#string/sync_contacts"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView27" />
<TextView
android:id="#+id/textView29"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_share"
android:drawablePadding="12dp"
android:padding="12dp"
android:onClick="inviteFriendsToMirorimItemClicked"
android:text="#string/invite_friends_to_mirorim"
android:textColor="#color/colorAccent"
android:clickable="true"
android:background="#drawable/my_ripple"
app:drawableTint="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView28"
android:focusable="true" />
<com.example.mirriom.Widget.SwitchButton
android:id="#+id/swt_sync_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
app:layout_constraintBottom_toBottomOf="#+id/textView28"
app:layout_constraintEnd_toEndOf="#+id/textView28"
app:layout_constraintTop_toBottomOf="#+id/textView27"
app:sb_checked="true"
app:sb_checked_color="#77d672"
app:sb_checkline_width="56dp"
app:sb_show_indicator="false"
app:sb_uncheckcircle_width="26dp" />
<TextView
android:id="#+id/tv_mirriom_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:onClick="mirriomContactItemClicked"
android:padding="#dimen/text_clickable_padding"
android:text="#string/mirriom"
android:textColor="#color/influencer_text_selection"
android:textSize="#dimen/default_text_size"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/recycler_contact"
app:layout_constraintEnd_toStartOf="#+id/tv_all_contacts"
app:layout_constraintTop_toBottomOf="#+id/textView29" />
<TextView
android:id="#+id/tv_all_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:onClick="AllContactItemClicked"
android:padding="#dimen/text_clickable_padding"
android:text="#string/all"
android:textColor="#color/influencer_text_selection"
android:textSize="#dimen/default_text_size"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/recycler_contact"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView29" />
<TextView
android:id="#+id/textView30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="#string/contacts"
android:textColor="#color/text_color"
android:textSize="#dimen/default_text_size"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/tv_mirriom_contacts"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_mirriom_contacts" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Your RecyclerView's layout_height is set to wrap_content, which tells it to inflate all of its items at once and then set its height to the total height of the items with no scrolling (that is, the scrolling is coming only from the parent NestedScrollView). You want to put it outside of the NestedScrollView and set its height to match_parent (or 0dp if it's in a ConstraintLayout with constraints that will size it appropriately), which will tell it to fill the space available. If you want nested scrolling with the RecyclerView for things like a collapsing toolbar, see this question for how to use CoordinatorLayout to accomplish this.

I am struggling to control the gravity of a textView inside my CardView items once I put it inside a GridView

Below is a screenshot of my gridView currently:
Even though I have centered the TextField inside the card, they are still pinned to the left. How do I fix this so that the Text is centered in the middle? It seems like once I add an item to a gridView, the gridView attributes overrule their children.
Here is my layout code:
CARDVIEW
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
layout_height=""
android:layout_width="120dp"
android:layout_height="120dp"
app:cardBackgroundColor="#E73737"
app:cardElevation="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/tvCategoryTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Fragment
<?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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.fragments.CategoryViewFragment">
<GridView
android:id="#+id/gvCategories"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:clickable="true"
android:clipChildren="false"
android:gravity="center"
android:horizontalSpacing="8dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
Add android:gravity="center" in your textview like following.
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"/>
use relative layout insists of ConstraintLayout.
use center_horizontal to the text view=true
Can you please try this and change your constraint layout ?
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources