Develop Reference

Custom drawable not showing properly when applied to a layout

I designed a custom shape
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="30dp"
android:right="30dp"
android:top="-30dp">
<shape android:shape="rectangle">
<size
android:width="80dp"
android:height="40dp" />
<solid android:color="#color/colorPrimary" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#color/colorPrimary" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
Now when I try to apply this to a layout background Which is BottomSheet it doesn't have any effect and simply covers up the entire screen with blue background (It becomes a solid flat blue rectangle)
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_features"
android:padding="32dp"
app:behavior_hideable="false"
app:behavior_peekHeight="#dimen/partial_features_peek_height_50dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
How can I apply this custom background in its shape

You can try it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="30dp"
android:right="30dp">
<shape android:shape="rectangle">
<size
android:width="80dp"
android:height="40dp"/>
<solid android:color="#color/colorPrimary"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
</item>
<item
android:top="30dp"
>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp"/>
<solid android:color="#color/colorPrimary"/>
<corners android:radius="0dp"/>
</shape>
</item>
</layer-list>
Let me know the result if it is the layout which you want to achieve or not. Hope it help

use layer list
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Apply the margin value on the "item" element -->
<!-- This example creates a 15dp visible margin around the dialog -->
<item
android:top="15dp"
android:bottom="15dp"
android:left="15dp"
android:right="15dp">
<shape
android:shape="rectangle">
<!-- Add attributes specific to your background (e.g. corner radius, colors, etc.) -->
<!-- Set "padding" at minimum to match margin and add additional content padding as well, if desired -->
<!-- This example creates 10dp of internal padding for content -->
<padding
android:top="25dp"
android:bottom="25dp"
android:left="25dp"
android:right="25dp" />
</shape>
</item>
</layer-list>

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.

Create a custom background drawable for a EditText

I'm trying to set a custom drawable to a EditText as expected below:
So I wrote this custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingBottom="12dp"
android:paddingLeft="36dp"
android:paddingRight="12dp"
android:paddingTop="12dp">
<item>
<shape>
<corners android:radius="6dp"/>
<solid android:color="#android:color/white"/>
<stroke
android:width="1dp"
android:color="#BBBBBB"/>
</shape>
</item>
<item
android:width="32dp"
android:gravity="left">
<shape android:shape="rectangle">
<size android:width="32dp"/>
<corners
android:bottomLeftRadius="6dp"
android:topLeftRadius="6dp"/>
<solid android:color="#AAAAAA"/>
</shape>
</item>
<item android:left="8dp">
<bitmap
android:gravity="left"
android:src="#drawable/ic_email"
android:tileMode="disabled"/>
</item>
</layer-list>
The result in preview is quite good (except different corner size, not handled by Android Studio)
But in device, it totally not works...
The second item is stretched and does not respect the width attribute.
I know, I can do it with a 9-patch, but I want to know if is it possible with drawables?

Managed to do it with a single background drawable and a compound drawable on the EditText.
bg_edittext_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape>
<solid android:color="#AAAAAA" />
<corners android:radius="6dp" />
</shape>
</item>
<item
android:left="34dp">
<!-- left is icon size + 2x side padding around icon-->
<!-- 18 + 8 + 8 -->
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="6dp"
android:topRightRadius="6dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="6dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#BBBBBB" />
</shape>
</item>
</layer-list>
In your layout, use it like that:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_edittext_icon"
android:inputType="textEmailAddress"
android:drawableLeft="#drawable/ic_email_white_18dp"
android:drawablePadding="20dp"
android:paddingLeft="8dp"
android:paddingRight="12dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:hint="Email"
/>
With paddingLeft the icon padding inside the grey box and drawablePadding the padding inside the grey box + padding of the edit zone.
Here is the result from Genymotion (aka, real device):
Hope you like it !

How can I add depth to a shape

I need to make my EditText look like its got depth like in the image below.
I have this shape I don't know what to add to it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>

you can accomplish that with a drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--background to compensate the transparency under shadow and glow (for bigger depth values)-->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
</item>
<!--top, dark, inner shadow-->
<item
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1A000000" />
</shape>
</item>
<!--bottom, light, outer glow-->
<item
android:top="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#4DFFFFFF" />
</shape>
</item>
<!--your color-->
<item
android:top="#dimen/depth"
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark />
</shape>
</item>
</layer-list>
and define a dimen in dimens.xml
<dimen name="depth">2dp</dimen>
by changing of the dimen you can change the depth of the drawable

This might also make your field look close to the effect but with a little more depth (see below). It might be worth adding the background to a outer view to wrap the edit text too so you can indent the text if you haven't already done this.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- outer shine -->
<item
android:top="4dp"
android:left="4dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1597FB" />
</shape>
</item>
<!-- inner shadow -->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#004173" />
</shape>
</item>
<!-- inner background -->
<item
android:top="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#006EC3" />
</shape>
</item>
</layer-list>
And then you EditText as below;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="#drawable/rounded_rect_layered_combined">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:textColor="#ffffff"/>
</FrameLayout>

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>