Develop Reference

Customize webview scrollbar

I have to customize scrollbar in webview - change track and thumb colors, shapes (simple rectangles). I couldn't find any information about customizing webview scrollbar, only listviews.
So far, i created:
styles.xml
<style name="CustomScrollBar">
<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/custom_scrollbar_thumb</item>
<item name="android:scrollbarTrackVertical">#drawable/custom_scrollbar_track</item>
<item name="android:scrollbarSize">12dp</item>
<item name="android:scrollbarFadeDuration">2000</item>
<item name="android:scrollbarDefaultDelayBeforeFade">1000</item>
</style>
drawable/custom_scrollbar_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#color/gray"
android:startColor="#color/gray" />
<corners android:radius="6dp" />
</shape>
drawable/custom_scrollbar_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#color/green"
android:startColor="#color/green" />
<corners android:radius="6dp" />
</shape>
However, wv.setScrollBarStyle(R.style.CustomScrollBar); gives me an error:
Must be one of: View.SCROLLBARS_INSIDE_OVERLAY,
View.SCROLLBARS_INSIDE_INSET, View.SCROLLBARS_OUTSIDE_OVERLAY,
View.SCROLLBARS_OUTSIDE_INSET

It was easier than i thought.
Just added
android:scrollbarThumbVertical="#drawable/custom_scrollbar_thumb"
android:scrollbarTrackVertical="#drawable/custom_scrollbar_track"
attributes to my webview in layout file. Of course i had to remove corners attributes from drawable files.

Ripples on a shape with a transparent background

I am using the following shape in my app
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval" >
<solid android:color="#color/primary_light"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="#color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>
It is there in my drawable folder. Now I am updating my app to Lollipop and I wish to give a ripple feedback on the circular button that I used.
So in drawable-v21 folder I changed it to a ripple selector:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary_light">
<item>
<selector>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="#color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>
</item>
</ripple>
But unfortunately the ripple effect is not generated by using the above drawable in Lollipop. Is it because of the <solid android:color="#android:color/transparent"/>?
Can anyone show me where I have go wrong? Thanks

After a few trial and errors it seems I have misunderstood the hierarchy of the selector and item.
The following works perfectly.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary_light">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#android:color/white"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</ripple>

This works with a transparent background:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="3dp"/>
<!-- This color is needed to be set - doesn't affect anything -->
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="#android:color/transparent"/>
</shape>
</item>
</ripple>
This was modified a bit from this answer: Transparent ripple

You can have a ripple effect on transparent or semi-transparent background when the ripple mask is specified. The ripple mask is a Drawable but only the alpha value is used setting the ripple alpha per pixel. Here is an example for creating programmatically.
var background = new android.graphics.drawable.GradientDrawable();
background.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color
var mask = new android.graphics.drawable.GradientDrawable();
mask.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background
var rippleColorLst = android.content.res.ColorStateList.valueOf(
android.graphics.Color.argb(255,50,150,255)
);
// aaaand
var ripple = new android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);
(Sorry for the JavaScript/NativeScript code, probably one can understand it)

Following code works for custom shape with ripple effect for transparent button -
main_activity_buttons_ripple_with_background.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#888888"
tools:targetApi="lollipop">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="25dp" />
<!-- This color is needed to be set - doesn't affect anything -->
<solid android:color="#000" />
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#FFF" />
<corners android:radius="25dp" />
</shape>
</item>
</ripple>
styles.xml
<style name="MainActivityButtonsStyle">
<item name="android:background">#drawable/main_activity_buttons_ripple_with_background</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_margin">15dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">50dp</item>
<item name="android:textColor">#FFF</item>
<item name="android:textSize">18sp</item>
</style>
activity_main.xml
<LinearLayout 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"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_alignParentTop="true"
style="#style/MainActivityButtonsStyle"
android:text="#string/button_search_by_id" />
</RelativeLayout>
</LinearLayout>

Android - make an arrow shape with xml

I want to make a button for my shape like this one
Is there a way to do this with xml ?
Like setting some points, in my case I have 5..

What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.
Here is the shape file called arrow_shape.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="-40dp"
android:bottom="65dp"
android:right="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="65dp"
android:bottom="-40dp"
android:right="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Then use it as button's background, for example
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow_shape"/>
Here is the screenshot:
More info on Layer-List you can find here.
EDIT:
Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="50dp" android:height="10dp" android:right="6dp">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
<corners
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"/>
</shape>
</item>
<item android:width="7dp" android:height="7dp"
android:left="50dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>

With the Material Components library you can just use the standard MaterialButton defining the shapeAppearanceOverlay attribute:
Something like:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:
<style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>

Scrollbar track style android

I have a Listview and I want to give the scrollbar a style :
<style name="scrollbar">
<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/apptheme_fastscroll_thumb_holo</item>
</style>
This works fine :P but no track here I would like it scrollbarVertical Track to be black thin line. I tried this drawable for line :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<stroke android:width="1dp" android:color="#android:color/black"/>
<size android:width="2dp" />
</shape>
But if I append this to scrollbar style like
<item name="android:scrollbarTrackVertical">#drawable/track</item>
I cant see the thumb ...

It looks like you're missing transparency on the track drawable, so the thumb isn't visible when the style is applied. Try adding this to your #drawable/track.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- add transparency to ensure thumb visibility -->
<solid
android:color="#00000000" />
<stroke
android:width="1dp"
android:color="#android:color/black" />
<size
android:width="2dp" />
</shape>

How to do an outer glow via xml on button?

I have a customized button with rounded corners, I put some shadow for when it's pressed but I want to do an outer shadow just to the bottom part of the button, I am making the drawable via xml, so if the glow could be that way would be great.
These are the relevant parts of the code:
button_pressed_shadows.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:startColor="#color/black_overlay"
android:endColor="#color/btn_login"
android:angle="270"/>
<corners android:radius="4dip" />
</shape>
</item>
<item
android:top="2px">
<shape android:shape="rectangle">
<solid android:color="#color/btn_login"/>
<corners android:radius="4dip" />
</shape>
</item>
</layer-list>
style_login.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/button_pressed_shadows" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_login" /> <!-- default -->
</selector>

Since I have the button design on photoshop, I made a 9 patch image with it, and put it on the style selector, everything went fine, think is the better (easiest) way.

Also while using layer-list you can use appropriate color combinations and padding to make it like glow or shadow.
edit_text_background
<?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="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke
android:width="1dp"
android:color="#dadad7" />
<solid android:color="#fff" />
</shape>
</item>