How to replicate Google photos scrolling thumb for RecyclerView - android

I'm trying to replicate the google photos scrolling behavior in our app and failing miserably.
Desired outcome:
I have a simple recyclerview where right now I'm using the fastscroller line and thumb.
The problem with that it redefines the height of the thumb drawable based on the content size.
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:id="#+id/pages"
app:fastScrollEnabled="true"
app:fastScrollHorizontalThumbDrawable="#drawable/thumb_drawable"
app:fastScrollHorizontalTrackDrawable="#drawable/line_drawable"
app:fastScrollVerticalThumbDrawable="#drawable/thumb_drawable"
app:fastScrollVerticalTrackDrawable="#drawable/line_drawable">
</androidx.recyclerview.widget.RecyclerView>


you can do it by defining height and width for thumb
here is how I have done it
ic_scroll.png
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_scroll" android:width="44dp" android:height="40dp"/>
</layer-list>
thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb" android:state_pressed="true" />
<item android:drawable="#drawable/thumb" />
</selector>


This is an easy and customizable option
Create an ic_asset_1.xml drawable /* This is a Vector */
Customize the background and arrows color according to your needs
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="22.94dp"
android:height="38.3dp"
android:viewportWidth="22.94"
android:viewportHeight="38.3">
<path
android:pathData="M22.94,37.2a15.65,15.65 0,0 1,-5.76 1.1C7.69,38.3
0,29.72 0,19.15S7.69,0 17.18,0a15.56,15.56 0,0 1,5.54 1"
android:fillColor="#4298f5"/>
<path android:pathData="M8.02,21.06l7.31,0l-3.65,5.45l-3.66,-5.45z"
android:fillColor="#fff"
/>
<path
android:pathData="M15.23,16.02l-7.11,0l3.56,-5.55l3.55,5.55z"
android:fillColor="#fff"
/>
</vector>
Create an scrollbar_thumb.xml drawable
Customize height and width according to your needs
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_asset_1"
android:width="30dp"
android:height="40dp"
/>
</layer-list>
Create a new style in styles.xml
<style name="scrollbar_style">
<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
<item name="android:scrollbarStyle">outsideOverlay</item>
<item name="android:scrollbars">vertical</item>
<item name="android:fadeScrollbars">true</item>
<item
name="android:scrollbarThumbVertical">#drawable/scrollbar_thumb</item>
<item name="android:scrollbarFadeDuration">800</item>
<item name="android:scrollbarDefaultDelayBeforeFade">500</item>
</style>
Add this style in recyler view like this
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/scrollbar_style"
android:scrollbars="vertical"
/>

Related

Bottom Navigation Not showing original color

I have designed a bottom navigation view for my application. The idea is simple, green colored bottom bar will have white colored icons. I wrote a selector for this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:color="#android:color/white" />
<item android:color="#android:color/holo_blue_dark" />
</selector>
And it works, it changes the icon colors, but it does not make it completely white, the color looks gray-ish.
I have also tried the <item android:state_selected="true" android:color="#android:color/white" /> but it also doesn't work. I have added the images below for you to see the difference.
Please help

If you want your icon to have same default color use this in your activiy.
bottomNavigation.setItemIconTintList(null);

Here is what worked for me:
theme.xml
<item name="elevationOverlayEnabled">false</item>
It appears that for anything that has elevation set, there will be an overlay. In my case my BottomNavigationView had elevation manually set and thus received a dark overlay.

You should use state_selected
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:color="#color/color1" />
<item android:color="#color/color2" />
</selector>
app:itemIconTint="#color/navigate_state"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#android:color/holo_blue_dark" />
<item android:color="#android:color/darker_gray" />
</selector>
and kind of
add it on android.support.design.widget.BottomNavigationView app:itemIconTint="#drawable/nav_item_color_state" app:itemTextColor="#drawable/nav_item_color_state"

If you using BottomNavigationView from com.google.android.material, you should specified colors especially for icon and text, for example:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
app:itemIconTint="#color/bottom_bar_icon_tint"
app:itemTextColor="#color/bottom_bar_icon_tint"
app:menu="#menu/navigation_menu" />
and bottom_bar_icon_tint.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/white" />
<item android:color="#color/cool_grey" />
</selector>
also pay attention to: android:state_checked="true"

Your xml files seems to have an alpha channel/transparency
You need to change the "android:alpha" parameter to "1.0" or remove it in your icon.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="#color/white"
android:alpha="0.8">
<path
android:fillColor="#color/white"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM6.5,17.5l7.51,-3.49L17.5,6.5 9.99,9.99 6.5,17.5zM12,10.9c0.61,0 1.1,0.49 1.1,1.1s-0.49,1.1 -1.1,1.1 -1.1,-0.49 -1.1,-1.1 0.49,-1.1 1.1,-1.1z"/>

Android drawable rotate inside button

I need to have a button series with inside text and icon.
The icon inside the 4 buttons must rotate to cover every poly.
Follow an example with two buttons where the top is create with the original (vector drawable) icon and the "left" button rotating the vector.
<Button
style="#style/Buttons.Small"
android:drawableLeft="#drawable/ic_vertical_align_top_white_12dp"
android:text="#string/optional" />
<Button
style="#style/Buttons.Small"
android:drawableLeft="#drawable/arrow_left"
android:text="#string/optional" />
The vector drawable:
ic_vertical_align_top_white_12dp
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12dp"
android:height="12dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M8,11h3v10h2V11h3l-4,-4 -4,4zM4,3v2h16V3H4z" />
</vector>
The rotate drawable:
arrow_left.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="-90"
android:toDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:drawable="#drawable/ic_vertical_align_top_white_12dp">
</rotate>
The style
<style name="Buttons.Small">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#color/buttonSmallBackground</item>
<item name="android:layout_margin">2dp</item>
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
<item name="android:textSize">12sp</item>
<item name="android:drawablePadding">4dp</item>
<item name="android:paddingLeft">4dp</item>
<item name="android:paddingRight">4dp</item>
</style>
And following the result
Nougat (PERFECT)
Marshmallow (WRONG)
I already tried to play with the vector viewport without success.
Thanks

I solved with a trick.
Appling directly the rotation inside the vector.
Now arrow_left.xml become
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12dp"
android:height="12dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group android:rotation="-90"
android:pivotX="12"
android:pivotY="12">
<path
android:fillColor="#FFFFFF"
android:pathData="M8,11h3v10h2V11h3l-4,-4 -4,4zM4,3v2h16V3H4z" />
</group>
</vector>
I don't know why in Marshmallow the rotation not work properly but this solve my case.
Thanks

RecyclerView Item drawable states not working

I am using a Recyclerview. It has a GridLayoutManager and contains/displays a grid of images using the Glide/Picasso library. My item in the recyclerview has the following layout.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_recycler_view"
android:clickable="true"
android:focusable="true"
android:foreground="#drawable/item_recycler_view">
<ImageView
android:id="#+id/savedPhoto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:transitionName="imageScale" />
I have set the following states drawable(item_recycler_view) to the parent FrameLayout.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/holo_red_dark" android:state_selected="true" />
<item android:drawable="#android:color/holo_red_dark" android:state_pressed="true" />
<item android:drawable="#android:color/transparent" />
I change in state does not take place on pressing the item in the recyclerview.
How do I set different drawables for the different states of a RecyclerView item while continuing to use Picasso/Glide ??

I had same problem and I solved with android:state_focused="true" attribute in this way:
in your item_recycler_view
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/colorAccent"
android:state_focused="true" />
</selector>
</item>
</ripple>

Why is this ripple effect is not working as expected?

I am using a drawable to change the background and text of textViews inside of my navigation drawer. I would like to keep the background white for the text area, but by testing keeping the background white does not show the ripple effect on the background, instead it does it to the text making the text gray. In the picture below, the middle one is being pressed causing the ripple effect.
Here are my drawable files that are used to make the changes in colors
Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/selected" android:state_activated="true" />
<item android:drawable="#color/white" />
</selector>
Text:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primary" android:state_activated="true" />
<item android:color="#color/primary_text" />
</selector>
textView layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25.0sp"
android:background="#drawable/activated_background"
android:textColor="#drawable/activated_text"
android:id="#id/text1"
android:layout_weight="0"
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip" />
</RelativeLayout>

you should use 2 drawable files and use it as your view background.
for pre-lolipop versions:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white_list_item_selected_background" android:state_pressed="true" />
<item android:drawable="#android:color/white" />
</selector>
for lolipop (v21):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white_list_item_selected_background" >
<item android:drawable="#android:color/white" />
</ripple>

If you use custom background, ripple effect will not be shown. You may have to use other ripple library such as Material Ripple.

In my case ripple effect is working after the first click, but for first click it didn't work for me. Have changed the background selector file with android:state_activated="true" and in main.xml android:clickable="true" then it's work fine for all time.
selector.xml (under res\drawable\selector.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#drawable/card_bg_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_focused" android:state_enabled="true" android:state_focused="true"/>
<item android:state_activated="true" android:drawable="#drawable/card_bg_selected" android:state_enabled="false" android:state_selected="true"/>
</selector>
In activity_main.xml
<com.mysample.RecyclingImageView
android:id="#+id/imageview_overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/selector"
android:clickable="true" />

Android LinearLayout with color resource: What am I doing wrong?

I followed this tutorial to create a color state list for a particular Android view. I just want it to highlight when clicked so the user knows why the screen just changed.
When the view is rendered, I get the following error:
org.xmlpull.v1.XmlPullParserException: Binary XML file line #3: tag requires a 'drawable' attribute or child tag defining a drawable
My color XML (in res/color/viewcolor.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#ff33ffff"/> <!-- pressed -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
My layout XML (in res/layout/myview.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myview"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:background="#color/viewcolor">
<!--crap in the layout-->
</LinearLayout>
What did I miss?

I remember that I worked around this error by using state drawable instead of state color. For some reason layout background just doesn't work with stateful colors. So try creating a stateful drawable (for example list of shape drawables with different colors) and use it as background.
res/drawable/pressed.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ff33ffff" />
</shape>
res/drawable/normal.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ff000000" />
</shape>
res/drawable/background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/normal" />
</selector>
Then use background.xml drawable as background :)

Instead of using shapes in your drawable, you can use the android:drawable attribute which accepts a color resource (e.g. #color/black).
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myview"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:background="#drawable/myDrawable">
<!-- other views in layout-->
</LinearLayout>
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item android:state_focused="true" android:drawable="#color/YOUR_COLOR_HERE" />
<!-- focused and pressed-->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/YOUR_COLOR_HERE" />
<!-- pressed -->
<item android:state_pressed="true" android:drawable="#color/YOUR_COLOR_HERE" />
<!-- default -->
<item android:drawable="#color/YOUR_COLOR_HERE" />
</selector>
In my_drawable.xml you need to make sure that the colors you specify are defined in res/values/colors.xml, or this won't work.
If you want to use an image instead of a color change from a color resource to a drawable resource.
Example:
android:drawable="#color/YOUR_COLOR_HERE"
android:drawable="#drawable/YOUR_IMAGE_HERE"

Categories

Resources