Develop Reference

How to set dropdown arrow in spinner with underline from image

List item
my code is in the style
this is inside the style.xml
<style name="SpinnerTheme">
<item name="android:background" >#drawable/bg_spinner</item>
</style>
bg_spinner.xml
<item>
<layer-list>
<item >
<bitmap android:gravity="bottom" android:src="#drawable/under_line" />
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/dropdown" />
</item>
</layer-list>
</item>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/SpinnerTheme"
android:layout_marginTop="15dp"
android:hint="Sex"
android:id="#+id/spinnerSex" />
date,month and year are in full width,and background image also less width, but when it comes sex its not showing full width.
i need the under line in sex full width, please do the needfull

You can draw line by xml code. like below
<item >
<layer-list>
<item>
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
<!-- background color of box -->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#323232" />
<!-- color of stroke -->
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/downlarrow" />
</item>
</layer-list>
</item>
output looks something like this

replace your xml code with this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 2dp width border around shape -->
<stroke
android:color="#000000"
android:width="2dp"
/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
</shape>
</item>

Full XML Code is:
Keep below code in your drawable directory. File name can be like this: "bg_spinner.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<!-- background color of box -->
</shape>
</item>
<item android:left="-2dp" android:right="-2dp" android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#323232" />
<!-- color of stroke -->
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#mipmap/arrow_down" />
</item>
</layer-list>
</item>
</selector>
In above code change bitmap src to your arrow image from drawable or mipmap directory. You can take nice arrow from "File -> New -> Vector Asset"
In your style.xml file keep below code:
<style name="SpinnerLineTheme" parent="android:Widget.Spinner">
<item name="android:background">#drawable/bg_spinner</item>
<item name="android:elevation">0dp</item>
<item name="android:popupBackground">#color/colorWhite</item>
</style>
And call the theme from spinner like below:
<Spinner
android:id="#+id/mySpinner"
style="#style/SpinnerLineTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorWhite"
android:dropDownWidth="300dp"
android:dropDownVerticalOffset="60dp"
android:gravity="start"
android:paddingEnd="30dp"
android:spinnerMode="dropdown" />
PS: Inspired by #Jayanth answer, as edit request queue is full.

Ripple effect in pressed state + transparency in normal state

I would like the ImageView in the ViewGroup, when pressed, draws the ripple and this is working! But when the ViewGroup is pressed, the ImageView inside it, should remain transparent otherwise the ImageView background is visible: (that color alpha-orange, you actually see, is the ripple when pressed).
This happens only with devices API 21+. With devices API <21 I use a selector and the image background remains transparent as wanted when the ViewGroup is pressed.
layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_detail_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/margin_left"
android:paddingStart="#dimen/margin_left"
android:paddingTop="#dimen/margin_top_item_field"
android:paddingBottom="#dimen/margin_bottom"
android:baselineAligned="false"
android:background="#drawable/layout"
android:stateListAnimator="#anim/touch_raise"
android:orientation="horizontal">
...
<ImageView
android:id="#+id/item_detail_showfield_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/button_mini_oval"
android:stateListAnimator="#anim/touch_raise"
android:clickable="true"
android:contentDescription="#null"
android:scaleType="center"
android:visibility="invisible"
android:src="#drawable/show_button"/>
...
</LinearLayout>
drawable/button_mini_oval.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/primary_highlight" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
drawable-v21/button_mini_oval.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</ripple>
I tried many configurations in the ripple xml, adding a <selector> it works (see below), but if you just tap the ImageView, the ripple is not visible (the ripple animation seems cut), only if you keep pressed you see the ripple...
What is the combination to have ripple in pressed state and transparent in normal state?
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item>
<selector>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</item>
</ripple>

Removing android:state_pressed="true", I've found 2 solutions but in both cases I lost the touch_raise animation (why?):
With masked ripple:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<selector>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</item>
</ripple>
With unmasked little ripple (nicer than 1):
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime"
android:color="?android:colorControlHighlight">
<selector>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</ripple>
I don't know why it is sufficient to add <selector> to have a ripple on a transparent background!!! a lot of people were trying to achieve this but it wasn't the intention of Google, instead it is very useful is such situations.

With me, it works
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white"
android:radius="3dp">
<item android:drawable="#drawable/transparent_ripple_button"/>
</ripple>
and a separate
transparent_ripple_button.xml
in your folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<solid android:color="#color/black_12" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/black_12" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="0.2dp" android:color="#color/white" />
<corners android:radius="3dp" />
</shape>
</item>
</selector>

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>