Background
I've made a tiny library, which shows how to mimic the style of the stock contacts app of Android Lollipop, here.
The problem
It seems that on Android 5.1 , the fast scroller looks very different than the previous one, and it's too close to the right, so it's hard to use it.
screenshot of Android 4.4 :
Here's a screenshot on Android 5 :
and on Android 5.1 :
What I've found
I've tried to go over all of the "what's new" section of Android 5.1, and also in some related classes docs, but I didn't find anything special, except for "setFastScrollStyle" . However, I couldn't find any explanation of how to use it (plus it's from API 21 , so that might not be the reason).
The question
How can I make the fast scroller to be located a bit to the left, so that it will be easier to touch it?
How do you use setFastScrollStyle? Is there any tutorial for this?
I had the same problem and after a few hours of research I came up with a solution. This AOSP commit helped me the most, it shows the changes made to the scrollbar in Android 5.1 (SDK 22): Update scrollbars to match Material spec
There are two possibilities:
A: Use the new style and add padding
This will keep the same new rectangle from API 21 (Android 5.1), but add some padding left and right.
1: Copy the fastscroll_thumb_material.xml to your drawables folder
This should be the content (removed AOSP comments to save space):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:tint="?attr/colorControlActivated"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
<item>
<shape android:tint="?attr/colorControlNormal"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</selector>
2: Edit your theme
Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_material</item>
3: Edit fastscroll_thumb_material.xml
You can edit it to your liking, but I did the following, which adds 8dp to the left and right of the scrollbar. I added a layer-list and item around each shape and added android:right="8dp" and android:left="8dp" to the new item. I tried adding that to the original items, but that didn't work, neither did adding padding to the shape.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:right="8dp" android:left="8dp">
<shape android:tint="?attr/colorControlActivated"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<item android:right="8dp" android:left="8dp">
<shape android:tint="?attr/colorControlNormal"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
B: Change the scrollbar to the old style
This will use the API 21, Android 5.0 style
1: Add the old drawables to your project
You can download them from the commit above (fastscroll_thumb_mtrl_alpha.png and fastscroll_track_mtrl_alpha.9.png), but I also bundled them, you can also download them from my Google Drive.
2: Add fastscroll_thumb_material.xml to your drawables
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<bitmap android:src="#drawable/fastscroll_thumb_mtrl_alpha"
android:tint="?attr/colorControlActivated" />
</item>
<item>
<bitmap android:src="#drawable/fastscroll_thumb_mtrl_alpha"
android:tint="?attr/colorControlNormal" />
</item>
</selector>
3: Add fastscroll_track_material.xml to your drawables
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/fastscroll_track_mtrl_alpha"
android:tint="?attr/colorControlNormal" />
4: Edit your theme
Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_material</item>
<item name="android:fastScrollTrackDrawable">#drawable/fastscroll_track_material</item>
I hope this helps to achieve your goal :)
Why not set padding on the right side of your layout containing the ListView? Google webpage # setPadding(). Personally I used android:paddingLeft for a similar issue like yours.
Another common trick is to add a (hidden) ImageView in the layout on the right side (horizontal orientation). The ImageView would be hidden and the (width) size can be set.
Glad to help a frequent SO user, hope I did. Regards, Tommy Kwee.
Related
I am new to Android programming. I want to add ripple effect to cardview. Actually I found the solution, however, after touching cardview element, it seems that the effect doesn't cover entire cardview. I mean that the effect fades out suddenly and doesn't reach the edges of the cardview.
The result which I'm getting is as follows:
While I want something like this one posted in this blog post.
This is the approach I have tried:
cardview_item.xml
<android.support.v7.widget.CardView
android:layout_width="match_parent"
style="#style/MyCardViewStyle"
android:layout_height="280dp"
android:id="#+id/appletCard"
app:cardBackgroundColor="#color/cardDefaultBg"
android:clickable="true"
android:foreground="#drawable/ripple_effect"
>
//Some TextViews here ...
</android.support.v7.widget.CardView>
And this is the ripple_effect.xml in the drawable-v21 package:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white"/>
</ripple>
If it is important, I use support library.
You should apply mask to your ripple. Try this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
</ripple>
You can use android default ripple effect with "?attr/selectableItemBackground"
<android.support.v7.widget.CardView
android:id="#+id/appletCard"
android:layout_width="match_parent"
android:layout_height="280dp"
style="#style/MyCardViewStyle"
android:clickable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#color/cardDefaultBg">
</android.support.v7.widget.CardView>
Or create custom
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape
android:shape="rectangle">
<solid android:color="#color/RippleColor" />
</shape>
</item>
<item android:state_pressed="true">
<shape
android:shape="rectangle">
<solid android:color="#color/RippleColor" />
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/backColor" />
</shape>
</item>
</selector>
If you want that effect reach the edges, use this library that provides you OnRippleCompleteListener, so you can wait until it finish effect and reach the edges
After checking the similar applications which are using ripple effect for their ui elements, I found out that the effect has changed over different versions of Android. The case I'm looking for is used in Lollipop Android devices. So as I ran the emulator on API 25 (Nogut), I didn't get the desired result.
Thank you all for ur responses.
Due to a bug in my app on android 4.4, I had to change some of my xml drawable files.
Now I have this xml file that I use to give a background color and to round the corners:
My xml file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" android:state_pressed="false">
<shape>
<corners android:radius="5dp" />
</shape>
</item>
</selector>
The problem is that my corners are not rounded at all!
Note that if I remove this attribute of the "item" tag:
android:drawable="#android:color/white"
it works.
But obiouvsly the background color is gone. I also underline that I cannot use this method:
<solid android:color="#android:color/white" />
This because for some unknown reasons it crashes on android 4.4 (as I said on top).
Does anyone know why corners aren't rounded and how can I fix it?
Thanks in advance.
Today I saw the Inbox App.
(source: cbsistatic.com)
I'd like to know how can I make THAT switch button on the toolbar (left of searchButton).
I didn't find references to (Or I don't search a lot).
thanks ^^
This is an old question. But I'd like to answer to this question because I found a way of achieving the same thing without using any third party library.
1 - Add SwitchCompat to your layout
<android.support.v7.widget.SwitchCompat
style="#style/SwitchCompatStyle"
android:id="#+id/toolbar_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"/>
2 - Create an XML shape. switch_thumb_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<!--shadow color-->
<solid android:color="#color/colorGray2" />
</shape>
</item>
<!--padding to have shodow effect-->
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch thumb color-->
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch image-->
<!--NOTE: switch_color_selector is not a color but a selector-->
<bitmap
android:src="#drawable/ic_network_on"
android:tint="#color/switch_color_selector" />
</item>
</layer-list>
ic_network_on is icon that is shown on switch thumb. You can add states/selector here if you like. switch_color_selector tints the icon according to the state switch is in.
3 - Here's the color selector switch_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorAccent" android:state_checked="true" />
<item android:color="#color/colorGray1" />
</selector>
4 - Create a style to be applied on the Switch added in first step.
<style name="SwitchCompatStyle" parent="Widget.AppCompat.CompoundButton.Switch" >
<item name="android:thumb">#drawable/switch_thumb_on</item>
<item name="trackTint">#color/switch_color_selector</item>
</style>
And thats the result I got.
Cheers.
Here you go. https://android-arsenal.com/details/1/1985
You can find similar material in the same site. Its easy to reuse something that is already available. Cheers!! Happy coding!
I want to create a family of buttons. They all look the same, except for their color. The brute force way of doing this would be to copy/paste the layout into N files, then change the colors in each one.
What’s the more elegant way of achieving this? In the sample code below, I'd like to use different colors instead of #color/round_green_button_pressed_background and #color/round_green_button_unpressed_background, but everything else should ideally stay in one place.
Doing this programmatically seems even worse than copy/pasting the files, so hopefully, there’s an answer that involves pure XML-based layouts.
Sample code: button_green.xml.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<size android:width="120dp" android:height="120dp"/>
<solid android:color="#color/round_green_button_pressed_background"/>
</shape>
</item>
<item>
<shape>
<size android:width="120dp" android:height="120dp"/>
<solid android:color="#color/round_green_button_unpressed_background"/>
</shape>
</item>
</selector>
Following code run correct on emulator. But wrong on real device.
I have 3 xml files for corresponding button status: button_default.xml\button_pressed.xml\button_selected.xml. Here is one of them. Others are same with it except for colors.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF484747" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FF484747" android:endColor="#FF000000"
android:type="linear" android:angle="270"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
</layer-list>
Then I wrote button.xml as following:
<?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/button_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/button_selected" />
<item android:drawable="#drawable/button_default" />
</selector>
Last is the styles.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="button" parent="android:Widget.Button">
<item name="android:background">#drawable/button</item>
</style>
</resources>
This is the view on emulator(it's same on emulator 2.3 and 4.0):
(I can't upload image now. you can find it here:http://i.stack.imgur.com/uVtd9.jpg)
But it will be a yellow background button when I install the *.apk to my android pad(with android 2.3).
Anyone can provide me any direction to solve it? Thanks in advance!!!
Maybe your button is getting Highlighted? Does your emulator have the same specs as your phone? (Touchscreen specially)
Try adding another one into your Activity (If you only have one) and play with it.
Your selector has the state "android:state_focused" which defines the color of the button when the button has a focus on it. Try to use "android:state_selected" and see if it helps.
Btw, I would recommend to replace all the "5px" in your xml files to "5dp" to make it suitable for different screen densities.