Add shadow to bottom of view - android

I've been having a lot of trouble with this layout.
Basically I have 2 linears, one that is slightly grey with that shadow on bottom and below another linear just white. My trouble here is adding that shadow to the end of the first linear. I tried "elevation" but that is now what i need since i want the shadow to be inside the linear kinda if the last 10dp are from a different color but I'm not getting it right.
This is my layout so far, i thought of putting a view inside the first linear but its not working that good.
Any ideas how to do this?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#f8f8f8"
android:layout_height="0dp">
<android.support.v7.widget.CardView
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"/>
</LinearLayout>
<LinearLayout
android:background="#ffffff"
android:layout_weight="1"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>
</LinearLayout>

Try using below line in the linearlayout under which your cardview is sitting.
android:elevation="8dp"
Let the cardElevation part in your cardView be as it is.
card_view:cardElevation="10dp"
card_view:cardPreventCornerOverlap="false"
Also just a suggestion :
If you're using android:layout_weight in both child linearLayout put android:weightSum="2" in your parent linearLayout as mentioned in answer given by #Ming Leung here
For more information on android:weightSum="2" you can refer to answers on this page
This page would help you for elevation in cardview
Hope that helps.

I was able to get it to work using a ConstraintLayout:
<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.cardview.widget.CardView
android:layout_width="312dp"
android:layout_height="204dp"
app:cardBackgroundColor="#android:color/holo_red_light"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Can't get CardView inside ListView to display corner radius or shadow

I'm trying desperately to get a shadow to appear all around for my CardView that's embedded in a ListView (as well as a corner radius on that card).
Here is my main layout XML:
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="...android.fragment.HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:clipToPadding="false">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/summary_list_view"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="15dp"
android:paddingBottom="15dp"
android:clipToPadding="false"
></ListView>
</LinearLayout>
</FrameLayout>
And here is my list view item XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/shadowed_container_view"
android:layout_margin="15dp"
android:padding="15dp"
app:cardCornerRadius="10dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:contentPaddingBottom="0dp"
android:outlineProvider="bounds"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Testing">
</TextView>
</androidx.cardview.widget.CardView>
hardwareAccelerated is also in my manifest so it's definitely not that.
But this is all I see:
Ok so I was able to fix the shadow issue by embedding the CardView's in a LinearLayout (I guess that's what allows the layout margin to take effect). However, I've still be unable to get the corner radius to show.
Edit: so it appears that calling setBackgroundColor() on a CardView disables the rounded radius. So by changing that to setCardBackgroundColor() I was able to get the border radius back.
Hope this helps someone else.

RecyclerView content goes behind and not over TextView above

Consider this video from material design on drag & dropping items:
Material design reordering list
In the video you see a RecyclerView and above it a TextView with the text "Playlist". When the row is dragged up you see it going over the Playlist.
In my code the row goes behind the Textview. I've put RecyclerView's layout_height to match_parent. And I used a FrameLayout and placed the TextView below the RecyclerView. Why isn't it going over it?
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Use Constraint layout as a parent layout and add textview at the top by giving top constraints to the textview. then add
recyclerview's top constraint to the the bottom of textview and recyclerview bottom constraint to the bottom of parent then set height 0 it will work
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/txtTitle"
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.constraintlayout.widget.ConstraintLayout>
Have you tried elevation? the problem might be that in the z axis the TextView is higher than the RecyclerView. try adding android:elevation="10dp" or higher... like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/general_margin"
android:text="#string/activity_bible_order_explanation"
android:layout_gravity="start|top" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp" (if it doesn't work try maybe higher elevation, 20dp etc.)
android:background="#android:color/transparent"
android:layout_marginTop="96dp"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
Hope it works for you (: let me know!
What is the parent layout of this?
Because you set match_parent in recyclerview and list have many content that's why this issue facing.
Please give fix height or use relative layout and apply position above of text view in recyclerview
Problem with your layout code:
You're using a FrameLayout
Inside FrameLayout, you're also using top margin on your RecyclerView
android:layout_marginTop="96dp" <-- This causing the issue.
Solution:
You should LinearLayout instead of FrameLayout. And, also set LinearLayout's orientation as vertical.
android:orientation="vertical"
Also remove this line from your RecyclerView:-
android:layout_marginTop="96dp"
Solution Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
The issue is not that the dragged view is going behind the TextView but, rather, the dragged view is not being drawn outside the bounds of the RecyclerView. The effect is the same.
To allow the RecyclerView to draw outside of itself, set the following for the parent of the RecyclerView:
android:clipChildren="false"
For the RecyclerView set
android:clipToPadding="false"
That should solve the problem.
The RecyclerView is above the text view in your FrameLayout. Currently, it appears that the underlying TextView is above the RecyclerView as you have given the background for the RecyclerView as:
android:background="#android:color/transparent"
To make this work as normal, either remove this line or change the background of RecyclerView to any value other than transparent.
There is 1 more issue. You need to place the recycler view first. Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Hello World"/>
</LinearLayout>

Android - how to make a scrollable constraintlayout?

I want to make a layout that lets me scroll down using constraint layout, but I don't know how to go about it. Should the ScrollView be the parent of the ConstraintLayout like this?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/Constraint"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Or the other way around? Maybe someone can point me to a good tutorial on this or give an example, I can't seem to find one.
Also, I don't know if this is a bug or some configuration that I don't have set up but I've seen images like this one :
where there are some components outside the blueprint "blue rectangle" yet they are visible, while on my side if I place a component on the "white space" I can't see it or move it anywhere, and it appears on the component tree.
UPDATE :
I found a way to make the constraint layout scrollable in the design tool, using a horizontal guideline to push down the constraint layout border and extend it beyond the device, after that, you can use the guideline as the new bottom of the constraint layout to anchor the components.
It seems that it is working, I don't know what dependency you were working with but in this one
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Is working, this is what I did
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/til_input"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Escriba el contenido del archivo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/btn_save"
app:layout_constraintTop_toTopOf="#id/btn_save"
app:layout_constraintVertical_chainStyle="spread">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/btn_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickButtonSave"
android:text="Guardar"
app:layout_constraintLeft_toRightOf="#+id/til_input"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/til_input"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_weight="1" />
<Button
android:id="#+id/btn_delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickButtonDelete"
android:text="Eliminar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/txt_content"
app:layout_constraintVertical_chainStyle="spread" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Scroll Top
Scroll Bottom
There is a type of constraint which breaks the scroll function:
Just make sure you are not using this constraint on any view when wanting your ConstraintLayout to be scrollable with ScrollView :
app:layout_constraintBottom_toBottomOf=“parent”
If you remove these your scroll should work.
Explanation:
Setting the height of the child to match that of a ScrollView parent is contradictory to what the component is meant to do. What we want most of the time is for some dynamic sized content to be scrollable when it is larger than a screen/frame; matching the height with the parent ScrollView would force all the content to be displayed into a fixed frame (the height of the parent) hence invalidating any scrolling functionality.
This also happens when regular direct child components are set to layout_height="match_parent".
If you want the child of the ScrollView to match the height of the parent when there is not enough content, simply set android:fillViewport to true for the ScrollView.
Use NestedScrollView with viewport true is working good for me
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="700dp">
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
for android x use this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.....other views....
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
To summarize, you basically wrap your android.support.constraint.ConstraintLayout view in a ScrollView within the text of the *.xml file associated with your layout.
Example activity_sign_in.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SignInActivity"> <!-- usually the name of the Java file associated with this activity -->
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
tools:context="app.android.SignInActivity">
<!-- all the layout details of your page -->
</android.support.constraint.ConstraintLayout>
</ScrollView>
Note 1: The scroll bars only appear if a wrap is needed in any way, including the keyboard popping up.
Note 2: It also wouldn't be a bad idea to make sure your ConstraintLayout is big enough to the reach the bottom and sides of any given screen, especially if you have a background, as this will ensure that there isn't odd whitespace. You can do this with spaces if nothing else.
Just use constraint layout inside NestedScrollView or ScrollView.
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
thats it. enjoy your coding.
A lot of answers here, nothing really simple. It's important that the ScrollView's layout_height is set to match_parent while the layout_height of the ContraintLayout is wrap_content
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
Please use below solution it has taken my lots of time to fix.
Enjoy your time :)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
>
<ScrollView
android:id="#+id/mainScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fillViewport="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Use Exactly like this u will definitely find your solution...
TO make a scrollable layout, the layout is correct. It will not be scrollable until there is reason to scroll(just like in any other layout). So add enough content and it will be scrollable, just like with any layout(Linear, Relative, etc). However, you cannot scroll properly in Blueprint or design-mode when designing with ConstraintLayout and ScrollView.
Meaning:
You can make a scrollable ConstraintLayout, but it will not scroll properly in the editor due to a bug/scenario that wasn't considered. But even though scrolling doesn't work in the editor, it works on devices. (I have made several scrolling COnstraintLayouts, so I have tested it)
Note
Regarding your code. The ScrollView is missing a closing tag, I don't know if it is the case in the file or if it is a copy-paste miss, but you may want to look at it.
For completing the previous answers I am adding the following example, which also takes into account the use of the AppBar. With this code, the Android Studio design editor seems to work fine with the ConstraintLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/bg"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.ActionBar.AppOverlayTheme">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_id"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/intro"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<TextView
android:id="#+id/desc_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:text="#string/intro_desc"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_id" />
<Button
android:id="#+id/button_scan"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:backgroundTint="#color/colorAccent"
android:padding="8dp"
android:text="#string/intro_button_scan"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="#+id/desc_id" />
<Button
android:id="#+id/button_return"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:backgroundTint="#color/colorAccent"
android:padding="8dp"
android:text="#string/intro_button_return"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_recycle" />
<Button
android:id="#+id/button_recycle"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:backgroundTint="#color/colorAccent"
android:padding="8dp"
android:text="#string/intro_button_recycle"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="#+id/button_scan" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
you need surrounded my constraint-layout with a ScrollView tag and gave it the property android:isScrollContainer="true".
Take out bottom button from the nestedscrollview and take linearlayout as parent. Add bottom and nestedscrollview as thier children. It will work absolutely fine. In manifest for the activity use this - this will raise the button when the keyboard is opened
android:windowSoftInputMode="adjustResize|stateVisible"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_city_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="20dp"
android:hint="#string/city_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/city_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:digits="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
android:lines="1"
android:maxLength="100"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:onClick="onSubmit"
android:padding="12dp"
android:text="#string/string_continue"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent" />
</LinearLayout>
There is a bug in version 2.2 that makes it impossible to scroll the ConstraintLayout. I guess it still exists. You can use LinearLayout or RelativeLayout alternatively.
Also, check out: Is it possible to put a constraint layout inside a ScrollView.
Constraintlayout is the Default for a new app. I am "learning to Android" now and had a very hard time figuring out how to handle the default "sample" code to scroll when a keyboard is up. I have seen many apps where I have to close the keyboard to click "submit" button and sometimes it does not goes away. Using this [ScrollView / ContraintLayout / Fields] hierarchy it is working just fine now. This way we can have the benefits and ease of use from ConstraintLayout in a scrollable view.
You can use HorizontalScrollView and it'll work as well!
This is how I resolved it:
If you are using Nested ScrollView i.e. ScrollView within a ConstraintLayout then use the following configuration for the ScrollView instead of "WRAP_CONTENT" or "MATCH_PARENT":
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/someOtherWidget"
app:layout_constraintTop_toTopOf="parent">
in scrollview make height and width 0
add Top_toBottomOfand Bottom_toTopOf constraints
that's it.
For me, none of the suggestions about removing bottom constraints nor setting scroll container to true seemed to work. What worked: expand the height of individual/nested views in my layout so they "spanned" beyond the parent by using the "Expand Vertically" option of the Constraint Layout Editor as shown below.
For any approach, it is important that the dotted preview lines extend vertically beyond the parent's top or bottom dimensions

CardView bottom border is cut off inside ScrollView android

I am putting the cardview inside scrollview, we expect to see that at the bottom, the border should be shown(see pic below). But its not. The problem is that I cannot scroll to the bottom to see the border of cardview.
All the solutions on SO is to change layout_margins to paddings, but its not the case for cardview if we want to show the border. I basically tried everything. But still doesnt work.
Picture 1. scroll to bottom cannot see the border
Picture 2. We can see the top border
Following is xml code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
...
</LinearLayout>
</CardView>
</LinearLayout>
references:
ScrollView doesn't scroll to the bottom
ScrollView cuts off the top and leaves space at the bottom
I can't show LinearLayout at bottom to scroll view
Android ScrollView refuses to scroll to bottom
UPDATED
This will work better now with a NestedScrollView and a MaterialCardView. I added this NestedScrollView to a ConstraintLayout.
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true">
This is working for me without the LinearLayout wrapper.
===========================================================================
OLD WAY LEFT HERE
I ran into the same problem and had to do the following (the key is the LinearLayout wrapper around the cardview where I added the paddingBottom):
<ScrollView
android:id="#+id/item_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
tools:visibility="visible">
<LinearLayout
android:id="#+id/item_wrapper_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/content_margin"
android:paddingBottom="32dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/item_cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#color/colorPrimary"
card_view:cardCornerRadius="4dp"
card_view:cardUseCompatPadding="true">
Adding the LinearLayout wrapper around the cardview is what worked for me.
Also note, I had to add card_view:cardUseCompatPadding="true" on the cardview to get the border shadow looking correct.
Here is the end result where the red box shows where the padding has been added when the cardview is expanded and scrolled up.
Setting clipToPadding to false on a ScrollView usually works for me:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="16dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:contentPadding="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Lorem ipsum..." />
</com.google.android.material.card.MaterialCardView>
</ScrollView>
One solution I just found is to wrap CardView with a LinearLayout or RelativeLayout and set its padding. For example, If you want some drop shadow effect in cardView, lets say 8dp, you can set 4dp padding of your LinearLayout or RelativeLayout and 4dp layout_margin of CardView.
In my case I just have to change ScrollView with NestedScrollView to solve the problem.
FYI, my NestedScrollView is placed inside a fragment which is a child of CoordinatorLayout with appbar_scrolling_view_behavior set.
The best solution is adding View with marginTop at last
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
...................
...................
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:layout_marginTop="10dp"/>
</LinearLayout>
</ScrollView>
I had same issue. Moving margin from child to ScrollView worked for me
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_margin="8dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
...
</LinearLayout>
</CardView>
</LinearLayout>

Cardview not showing shadow along bottom

I have the following xml for a cardview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent" android:padding="2dp">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="#+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Which results in these shadows which have no shading on the bottom at all
But I am trying to get something like this shadow, that more nicely surrounds the whole card.
I've tried changing the elevation to no avail, and searching on this issue seems to bring up nothing but people with no shadows at all issues which is not my case.
How can I get the shadows right?
Thanks.
You need to add this xml property in your card view
app:cardUseCompatPadding="true"
Adding clipChildren="false" to the parent LinearLayout should also work.
set elevation using card_view:cardElevation property
I was having the same problem until I remembered that if the parent is wrapping its content, then it will not wrap the shadow, so I gave the parent a bigger size than the child that way it will include the child and the shadow of the child
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="110dp">
<androidx.cardview.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="98dp"
android:layout_height="98dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:srcCompat="#drawable/manhattan" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
add these lines in your cardView
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"

Categories

Resources