Develop Reference

Can the Shadow be made as Blurr in Android?

I am not able to find the exact sloution to make the shadow with the blurr. I am using the simple Concept of displaying the shadow , but only getting the simple shadow without the blurr.How can the shadow be made blurr without using the bitmap images.
main layout
<*********.CustomFontLoginButton
android:id="#+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/buttonbordershadow"
android:clickable="true"
android:gravity="center"
android:padding="15dp"
android:text="Login"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="14sp" />
buttonbordershadow
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadow_button"/>
<item
android:drawable="#drawable/round_button_login"
android:bottom="10px" />
</layer-list>
shadow_button
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#59282323"/>
<corners android:radius="2dp"/>
</shape>
round_button_login
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#8B0318"
android:startColor="#E31124"></gradient>
<corners android:radius="2dp" />
</shape>
I am able to get the simple shadow , How can i get the blurr shadow??

have a look on the following code. It might help you.

Button and background margin shifted

I am using android studio, and I try to do some work on UI using some buttons.
I have created a background for some buttons, but when I apply this background on the buttons, the text inside the butons is not centered.
I think the marginof the button remains the same, whereas the applied background creates a smaller square than the marginn of the button. I don't know how to make the margin of the button fit the margin of the square coded in the background xml file.
Here the picture of the problem :
pic1
Here is the code of the background (bg_rectangle_grey.xml) :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
And here is the code of the xml file with the button :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/_15sdp"
android:style="?android:attr/buttonBarStyle">
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
I have looked for answers on google but it was never exactly what I am looking for.
If anyone can help.
Thank you in advance

Just use gravity center in button
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />

Please remove android:width="#dimen/_34sdp" android:height="#dimen/_34sdp" from below code and try again.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>

Ripple effect over imageview

To describe my problem i created small example.
I have linearlayout with imageview and textview. For linearlayout i've set ripple drawable as background. But when i click or long click on linearlayout ripple animation shows under imageview. How show animation over imageview ?
main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linear"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/ripple"
android:clickable="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#mipmap/index" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is ripple test"
android:textColor="#FF00FF00" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
drawable-v21/ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFF0000">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
</shape>
</item>
</ripple>
drawable/ripple.xml:
<?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="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FFFF0000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#FF000000" />
</shape>
</item>
</selector>
screenshot how it looks now:

Add the ripple like this
android:foreground="?android:attr/selectableItemBackground"
based on this answer https://stackoverflow.com/a/35753159/2736039

Add android:background="#null" for the ImageView

If your app needs to run on API < 23, you won't be able to use the foreground attribute on views other than FrameLayout, which means adding another [useless] level in the view tree hierarchy.
Another solution is to wrap your image with a <ripple>, set it as your ImageView's background, and use tint and tintMode to "hide" the src image so the background image that has the ripple over it is visible.
<!-- In your layout file -->
<ImageView
android:adjustViewBounds="true"
android:background="#drawable/image_with_ripple"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/image"
android:tint="#android:color/transparent"
android:tintMode="src_in" />
<!-- drawable/image_with_ripple.xml -->
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight">
<item android:drawable="#drawable/image" />
</ripple>
Not only this works on API 21+ but if your image has rounded corners – or is another type of non-rectangle shape, like a star or a heart icon – the ripple will remain in its bounds instead of filling the view's rectangle bounds, which gives a better look in some cases.
See this Medium article for an animated GIF to see how this technique compares to using a <FrameLayout> or the foreground attribute.

Resolve for API < 21
<ImageView
android:id="#+id/favorite_season"
style="?android:attr/borderlessButtonStyle"
android:background="?android:attr/selectableItemBackground"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_margin="22dp"
android:clickable="true"
android:focusable="true"
android:src="#drawable/ic_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

Simple use these two lines as attribute in that ImageView.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"

Android - Set seekbar progress always left to the thumb

IF the progress is near the borders the progress line will be ahead or behind the thumb if padding and thumboffset is set for seekbar(See image):
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:thumbOffset="0dp"
android:thumb="#drawable/meterknob"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:background="#android:color/darker_gray"
/>
I want seekbar always like this!
How can I implement this. Please help me Thanks in advance
EDIT
When I applied Karthika's code . I got like below image. The problem here is it is not touching its background image's borders. I have to start it from the starting of background image.

set
<SeekBar
android:id="#+id/progressplay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:background="#drawable/violetborderbox"
android:thumb="#drawable/playbtn"
android:progressDrawable="#drawable/seekbar_progress"
android:layout_centerVertical="true"
android:paddingLeft="35dp"
android:layout_centerHorizontal="true"
android:paddingRight="35dp"/>
inside your seeekbar
and the drawable file is
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#color/violetbg"
android:dither="true">
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"
/>
</layer-list>
my result was

Switch-Button thumb gets skewed?

The thumb for my Switch-button seems to get skewed(for on&off state). There were similar problems on github, but those were for people making libraries to support Switch button in API 4.0-
main contains the switch-button, and there is a thumb and track drawable applied to it
This is what is happening:
This is how its suppose to loook:
switch_track_on.png
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="112dp"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector"
android:textOn=""
android:textOff=""/>
</RelativeLayout>
switch_thumb_selector.xml
<selector>
<item android:drawable="#drawable/switch_thumb">
</item>
</selector>
switch_track_selector.xml
<selector>
<item android:drawable="#drawable/switch_track_on" android:state_checked="true"/>
<item android:drawable="#drawable/switch_track_off" android:state_checked="false"/>
</selector>

For Custom Switch (Like IOS switch) I tried below Steps:
Create a drawable track_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#ca120f" />
<corners android:radius="25dp" />
<size android:width="2dp" android:height="18dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#27170432" />
<corners android:radius="25dp" />
<size android:width="2dp" android:height="18dp" />
</shape>
</item>
</selector>
Create a drawable thumb_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#ffffff" />
<corners android:radius="100dp" />
<size android:width="24dp" android:height="25dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
</selector>
In your layout :
<Switch
android:id="#+id/checkboxAttendanceSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:thumb="#drawable/thumb_selector"
app:track="#drawable/track_selector" />
Its working fine for me.

I had the same requirement. I checked Android code and found that
switch ignores any vertical margin/padding applied to a thumb shape drawable (thus thumb always touch the top and bottom of the track)
the width of the thumb is calculated by taking the horizontal paddings + the max width of the on and off texts.
This makes really hard to make a circle thumb.
But if you specify the thumb drawable as a layer drawable for the sole reason to be able to specify padding for the single layer of the drawable, you can get the desired effect.
Thumb selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--
NOTE
We want a thumb with padding around it inside the track.
Sadly, a switch draws its track and thumb with the same height ignoring
any padding of the drawable, so using a shape with padding does not work.
To overcome, we apply a trick. We create layer list because the
LayerListDrawable draws itself with taking the top, left, right, bottom
values into account.
-->
<layer-list>
<item
android:top="#dimen/switch_thumb_padding"
android:left="#dimen/switch_thumb_padding"
android:right="#dimen/switch_thumb_padding"
android:bottom="#dimen/switch_thumb_padding">
<!--
NOTE
No need to specify size because:
- The thumb fills the track in height.
- The thumb width is determined from thumb max(on, off) text +
text padding + drawable padding.
-->
<shape android:shape="oval">
<solid android:color="#color/switch_thumb"/>
<!-- NOTE did not work, had to set Switch's thumbTextPadding to the radius -->
<!--
<padding android:right="#dimen/switch_thumb_radius"
android:left="#dimen/switch_thumb_radius"/>
-->
</shape>
</item>
</layer-list>
</item>
</selector>
I set the on and off text of switch to empty (actually to "" to prevent warning about empty resource).
track:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<size android:height="#dimen/switch_track_height"/>
<corners android:radius="#dimen/switch_thumb_radius"/>
<solid android:color="#color/switch_track_off"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<size android:height="#dimen/switch_track_height"/>
<corners android:radius="#dimen/switch_thumb_radius"/>
<solid android:color="#color/switch_track_on"/>
</shape>
</item>
</selector>
Switch style:
<style name="CustomSwitch">
<!-- NOTE this way the switch will be as width as required minimally -->
<item name="android:switchMinWidth">0dp</item>
<item name="android:track">#drawable/switch_track</item>
<item name="android:thumb">#drawable/switch_thumb</item>
<item name="android:textOff">#string/switch_thumb_off</item>
<item name="android:textOn">#string/switch_thumb_on</item>
<!-- NOTE if set to 0dp, the thumb was not visible even with padding
of the thumb drawable set to -->
<item name="android:thumbTextPadding">#dimen/switch_thumb_radius</item>-->
<!--<item name="android:thumbTextPadding">0dp</item>-->
</style>
And finally, the dimens:
<dimen name="switch_track_height">30dp</dimen>
<dimen name="switch_thumb_radius">15dp</dimen>
<dimen name="switch_thumb_padding">2dp</dimen>
So the only 'tricky' thing is to keep height = radius * 2.

No clue why this happens but solved it by placing the Switch-button within a linearLayout.
There must be some propery(width) of the thumb that has a "match_parent" of some sort that must've been causing it.
Edit: It happens when I remove the default 'ON' and 'OFF' text. So to hide the text i changed its color to white.
How to change textcolor of switch in Android
main.java
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.toggle_button);
Switch sw = (Switch) findViewById(R.id.switch1);
//Both of these need to be used to change the text color to white
sw.setTextColor(Color.WHITE);
sw.setSwitchTextAppearance(this, Color.WHITE);
//Doing this would skew the circle
//sw.setTextOn(" ");
//sw.setTextOff(" ");
}
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp" >
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector" />
</LinearLayout>

You can always horizontally stretch the graphic itself (ie, "switch_thumb.png") if you can't use the other answers.
If you use the original software used to design the graphic and re-export it after stretching, it shouldn't cause blurring of the image. You'll have to eye-ball it for your dimensions, but starting at +30% stretching should get you close.