Changing position of scrollbar in Android RecyclerView - android

Hey I was wondering if it is possible to change the position of the scroll bar in Android RecyclerView. I would like to move the scroll bar closer to the right side of the display. If someone could just point me in the right direction with a link or something I would really appreciate that because currently I can't find anything on this.
Thanks!

I have only one workaround idea,
you can add to your main content layout only top and bottom padding (or margin).
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="4dp"
android:paddingBottom="4dp">
Then RecyclerView without defining styles, like this:
<android.support.v7.widget.RecyclerView
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
and if you use CardView or other element, you can add left and right borders to him, then scrollbar keep on right side and element is not until the edges:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:layout_marginRight="6dp"
android:layout_marginEnd="6dp">

Related

Cardview shadow looks different when inside a ScrollView

I stumbled upon something weird. I am using the same CardView component in more than one place in my app, all with the same elevation (3dp), and they all looks the same. However, for one scenario I need to embed the CardView inside a ScrollView. I didn't change anything in the CardView configuration, but the shadow now looks different.
This is my layout:
<ScrollView 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:clipChildren="false"
android:clipToPadding="false"
android:padding="16dp"
android:scrollbars="none">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
app:cardCornerRadius="8dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<!-- some other views-->
</androidx.cardview.widget.CardView>
</ScrollView>
In the picture below you can see on the right the CardView and on the left the two shadows: on the top the shadow generated by the CardView alone, on the bottom the one generated when the CardView is inside a ScrollView. As you can see the second one appears darker and thicker.
NOTE: The background color (#FAFAFA) is the same in both scenario.
For both cases, I would check the following properties as it could contribute to the difference you're seeing:
getTranslationZ()
getElevation()
getOutlineAmbientShadowColor() (this is only valid in API 28+)
getOutlineSpotShadowColor() (this is only valid in API 28+)
Plus, checking Layout inspector to see if there's any view that could affect to the rendering.
Also, this article from Sebastiano Poggi could be of help.

Make over scroll glow be outside the padding

I have the following:
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
I add this for a cleaner UI:
android:paddingEnd="16dp"
android:paddingStart="16dp"
However, now the scroll bar is inside the padding and looks funky. So I add:
android:scrollbarStyle="outsideInset"
The scroll bar is now outside the padding, however, the over scroll glow is still inside the padding.
How do I get the over scroll glow to stretch across the padding?
EDIT:
Here's the full layout code that encounters the same issue as above.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 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/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
What you need to do is to apply android:clipToPadding="false" to RecyclerView. Consider this xml:
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="40dp"
android:paddingBottom="40dp"
android:clipToPadding="false"/>
Here's the result:
Your best bet would be to put padding inside RecyclerView's item layout and not on RecyclerView itself.
However, you could just use margins and the glow should stay inside the RecyclerView.
While the answer given by #azizbekian works, it's also possible to set clipToPadding programmatically.
In Kotlin: recyclerView.clipToPadding = false
In java: recyclerView.setClipToPadding(false)
My personal favorit is to extend RecyclerView and set a LayoutManager, clipToPadding and such in the init function (constructor).

How to have a scrollable floating Cardview like this?

Does anyone know how to have a floating Cardview like this?
http://chairnerd.seatgeek.com/images/autocomplete_checkout.gif
The background image should be able to change programmatically and the cardviews should be scrollable. And the position of the first Cardview should be somewhere below the image. Thanks in advance!
I figured it out myself and I will post my solution here in case anyone run into the same situation.
Here how the layout file should look like:
<RelativeLayout 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"
android:focusableInTouchMode="true"
android:background="#color/bgGrey">
<ImageView
android:layout_width="match_parent"
android:layout_height="125dp"
app:srcCompat="#drawable/soccer"
android:id="#+id/imageView"
android:scaleType="centerCrop"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="120dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp">
EDIT: Within the LinearLayout, something like a place holder should be added. Otherwise a part of the content at the end would not be shown. So I used a textview to do so.
<TextView
android:layout_width="match_parent"
android:layout_height="120dp" />
Note: The height here should match the marginTop in the LinearLayout
Yes it is a cardView directly on a ScrollView, or a ListView simply with the item's layout with background transparency.
The scrollview/listview is placed on a FrameLayout or RelativeLayout. Either there is a padding/margin on top, or a "stub" first element which is transparent".
Bellow (declared first in the parent layout) the scrollview/listview you can place an image or any other static component whatsoever.
And above you can place other floating components (like the Check-out button on your example)

Cardview - white border around card

I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so :
card_view:cardElevation="0dp"
and in code in my custom view that extends CardView and uses this layout:
setCardElevation(0);
setMaxCardElevation(0);
But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.
I know it's a bit late, but for anyone having a similar problem:
I had the same issue: A white border was shown on pre-lollipop devices.
I solved it setting the cardPreventCornerOverlap to false on your XML.
Like this:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- some other views -->
</LinearLayout>
</android.support.v7.widget.CardView>
Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:
I might be late in the game, but I had the same issue. Just wanted to share a simple solution!
My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:
Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)
Code snippet:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvSettings"
style="#style/DefaultCardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Remove this -->
app:cardElevation="#dimen/default_card_elevation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.
.
.
</android.support.v7.widget.CardView>
Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:
<com.example.android.custom.MyCustomView
android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin" <!-- Move it here-->
cv:pt_widgetColor="#color/colorAccent" />
After the change, much cleaner :) :
use cardBackgroundColor="color" in xml card_view
sample code :
<android.support.v7.widget.CardView
android:id="#+id/card_view_khaterat"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:cardBackgroundColor="#f56f6c"/>

Navigation Drawer from Bottom with horizontal scrollbar

i'm trying to implement a menu which i want on the bottom outside of the screen. When i swipe up from the bottom edge of the screen i want it to appear there.
Furthermore i want a HorzizontalScrollView in there. Actually it should work like a Navigation Drawer on the side.
Here is the layout I already tried. I used the umano AndroidSlidingUpPanel:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="200dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<TextView
android:text="Hier wird das pdf gezeigt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/file_scroll_view"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/file_scroll_view_linear_layout"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
The slide up works, but i don
t know how to position it outside of the screen and how to let it only slide up until it aligns the bottom edge.
Furthermore I want the ScrollView working. Before I tried with the SldingUpPanel it worked like charm but now its not scrollable.
Anyone got an idea or any hint how to solve this?
for nothing to be seen you have to:
slidePanel.setPanelHeight(0); // I couldn't find anything on XML for that
and for it to stop midway through:
slidePanel.expandPane(0.1f); // for example for 10% of screen.

Categories

Resources