Develop Reference

How to make a rounded background (grey transparant) behind the arrow button like twitter button on header?

I need to make a background behind my button that already have background (its like 2 layer background). it just like twitter header button for edit profile and back.
i already use android:background on first layer and styles on second layer. but the it just show one of them, not both.
this is my example button code:
<Button
android:onClick="backDialog"
style="#style/buttonBackStyle"
android:id="#+id/btnBack"
android:background="#drawable/ic_left_arrow_2"
android:layout_width="15dp"
android:layout_height="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:onClick="openEditScreen"
android:id="#+id/btnEditPofile"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="#drawable/ic_edit_profile"
android:gravity="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
i expected the button change like this
and what i got is like this

Make a round drawable file in drawable folder
round_white.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<!-- solid background -->
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="#dimen/_15sdp"
android:bottomRightRadius="#dimen/_15sdp"
android:topLeftRadius="#dimen/_15sdp"
android:topRightRadius="#dimen/_15sdp" />
<!-- draw a border around rectangle shape-->
<stroke android:width="0.5dp" android:color="#0575E6" />
</shape>
</item>
</selector>
In your layout file use it like this
<RelativeLayout
android:layout_width="#dimen/_40sdp"
android:layout_height="#dimen/_40sdp"
android:layout_above="#+id/view_shadow"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_5sdp"
android:background="#drawable/round_white"
android:clickable="true"
android:padding="#dimen/_10sdp"
android:visibility="gone">
<ImageView
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_centerInParent="true"
android:clickable="false"
android:src="#drawable/edit" />
</RelativeLayout>

round_transparent.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<!-- solid background -->
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="#dimen/_15sdp"
android:bottomRightRadius="#dimen/_15sdp"
android:topLeftRadius="#dimen/_15sdp"
android:topRightRadius="#dimen/_15sdp" />
<stroke android:width="0.5dp" android:color="#4D212121" />
</shape>
</item>
</selector>
In your layout file use it like this
<RelativeLayout
android:layout_width="#dimen/_40sdp"
android:layout_height="#dimen/_40sdp"
android:layout_above="#+id/view_shadow"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="#dimen/_15sdp"
android:layout_marginBottom="#dimen/_5sdp"
android:background="#drawable/round_transparent"
android:clickable="true"
android:padding="#dimen/_10sdp"
>
<ImageView
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_centerInParent="true"
android:src="#drawable/edit" />
</RelativeLayout>

Adding a colored shadow to a Button

I need to add a shadow to a Button with these attributes "from zeplin":
and this is the design
I tried this code
<Button
android:id="#+id/btn_sign_in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="35dp"
android:background="#drawable/auth_button_shape"
android:shadowColor="#41ff4800"
android:shadowDx="0"
android:shadowDy="8"
android:text="#string/sign_in"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="14sp" />
auth_button_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff7c44" />
<corners android:radius="100dp" />
</shape>
But not worked and the other attributes "Blur" and "Spread" How I can set them for the button.
Thanks.

Thanks to Taras I have solution. You can use this library for creating colored shadow to button. Just place your view element inside shadow layout. Of course basic layout is ConstraintLayout.
Some pieces of code for example
<com.gigamole.library.ShadowLayout
android:id="#+id/shadowLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:sl_shadow_angle="90"
app:sl_shadow_color="#color/light_orange_color"
app:sl_shadow_distance="2dp"
app:sl_shadow_radius="7dp"
app:sl_shadowed="true">
<ImageView
android:id="#+id/ivYourImageName"
android:layout_width="144dp"
android:layout_height="44dp"
android:background="#drawable/button_shape"
android:foregroundGravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</com.gigamole.library.ShadowLayout>
Button shape :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp" />
<gradient android:angle="180" android:endColor="#ffc349" android:startColor="#ff8006" />
</shape>
</item>
</selector>
Result:

you need to add this line of code inside button tag
android:stateListAnimator="#null"
because button override any evelation value you set by passing null to android:stateListAnimator it will remove stateList attrs
for color you can add this line to show colored shadow
android:outlineSpotShadowColor="#303030"
check answer
Android elevation not showing shadow on Button

use AppCompatButton instead of Button,use elevation and use android:backgroundTint for button colour.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sign_in"
android:backgroundTint="#ccd3e0ea"
android:elevation="4dp"/>
output is,

bg_test.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="-6dp"
android:drawable="#android:drawable/dialog_holo_light_frame"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
</item>
<item
android:bottom="-6dp"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<stroke
android:width="#dimen/_1sdp"
android:color="#color/yellow" />
</shape>
</item>
</layer-list>
Activity.xml code:
<Button
android:layout_width="#dimen/_150sdp"
android:layout_height="48dp"
android:layout_marginTop="10dp"
android:text="#string/sign_In"
android:layout_marginLeft="#dimen/_80sdp"
android:layout_gravity="center"
android:textSize="14sp"
android:background="#drawable/bg_test" />
Design Button :

change background with animation when user clicks on it

I used one LinearLayout in my activity for changing two views. Here, i used two textviews. When user clicks on linear layout i change views as per my requirnments. xml file is here,
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/customswitchselector"
android:textStyle="bold"
android:layout_below="#+id/linearTab"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:showText="true"
android:id="#+id/switch1"
android:checked="false"
android:weightSum="2">
<TextView
android:id="#+id/tv_switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textStyle="bold"
android:textColor="#272351"
style="bold" />
<TextView
android:id="#+id/tv_switch_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:layout_gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColor="#ffffff"
style="bold"
/>
</LinearLayout>
These two images show my two conditions. I have done enough to change this. Now i want to do animation while i am changing background for textviews on layout clicks. I have checked transitiondrawable example but it not helpful to me.
customswitchselector.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">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
custom_track.xml This is used for textview with blue background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle"
android:useLevel="false"
android:visible="true">
<gradient
android:angle="270"
android:endColor="#292850"
android:startColor="#292850" />
<corners android:radius="30dp" />
<size
android:width="100dp"
android:height="30dp" />
</shape>

A possibility would be to set the white drawable as background of a FrameLayout and add a View for the blue oval and two TextViews for the titles to it.
To still acchieve that the views takes exactly the half of the container you could use PercenFrameLayout (read more about it in the official docu). To use it you need to add this dependency to your build.gradle: compile 'com.android.support:percent:25.2.0'
After creating the layout you just animate the gravity of the blue oval from left to right or the other way round.
So your layout would look like this:
<PercentFrameLayout
android:id="#+id/container"
android:animateLayoutChanges="true"
android:background="#drawable/white_oval"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- blue oval -->
<View
android:id="#+id/blue_oval"
android:gravity="start"
android:background="#drawable/blue_oval"
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:transformPivotX="0dp" />
<!--2 textviews-->
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="left"
android:gravity="start"/>
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="right"
android:gravity="end"/>
</FrameLayout>
Then in your code animate the gravity change of the blue oval like this:
private void animateGravity(int toGravity) {
LayoutTransition layoutTransition = container.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
layoutTransition.setDuration(YOUR_ANIMATION_DURATION);
layoutTransition.setInterpolator(LayoutTransition.CHANGING, new AccelerateDecelerateInterpolator());
FrameLayout.LayoutParams layoutParams = (LayoutParams) blueOvalView.getLayoutParams();
layoutParams.gravity = toGravity;
blueOvalView.setLayoutParams(layoutParams);
}

Custom EditText: input-box type for for login page

I'm trying to create a sign-in activity. So, I chose the login activity, but the login page looks quite plane. Here's the layout I would like to implement at the login page
I'm using the following drawable layout for the changes:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#C8CAD0"/>
<corners
android:radius="1dp" />
</shape>
Which gives me this:
I want the common border between the two fields to be merged into a single line of thickness 1dp.
Here's the xml for the two fields - username and password:
<AutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint=" Username or Email"
android:inputType="textEmailAddress"
android:background="#drawable/box_input_field"/>
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/box_input_field"
android:hint=" Password"
android:imeActionId="#+id/login"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:inputType="textPassword" />

What I do in this Method is.
Create 2 different drawables for email view and password view.
Show 2 drawables below,
I set <item android:top="-1dp"> in edittext_bottom_curv_gray.xml for make middle line thin.
This will look like this =>
<EditText
android:id="#+id/edtTxtUserEmail"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/edittext_top_curv_gray"
android:hint="Email"
android:inputType="textEmailAddress" />
<EditText
android:id="#+id/edtTxtUserPassword"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="-1dp"
android:background="#drawable/edittext_bottom_curv_gray"
android:hint="Password"
android:inputType="textPassword" />
Style of EditText style.xml
<style name="EditTextStyle">
<item name="android:textColor">#000000</item>
<item name="android:gravity">center_vertical</item>
<item name="android:singleLine">true</item>
<item name="android:textSize">15sp</item>
<item name="android:padding">10dp</item>
<item name="android:textColorHint">#9A9A9A</item>
Drawable 1 for email field.
edittext_top_curv_gray.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#BBBBBB" >
</stroke>
<corners
android:topLeftRadius="3dp"
android:topRightRadius="3dp" />
</shape>
</item>
</layer-list>
Drawable 2 for password field.
edittext_bottom_curv_gray.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-1dp">
<shape
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#BBBBBB" >
</stroke>
<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp" />
</shape>
</item>
</layer-list>

Check and modify according to your needs:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#drawable/rounded_linear"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/org_editBox"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#null"
android:hint="#string/hint_org"
android:paddingEnd="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingStart="10dp"
android:textSize="14sp" />
<View
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="0.3dp"
android:background="#D3D3D3" />
<AutoCompleteTextView
android:id="#+id/salesperson_editBox"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#null"
android:hint="#string/hint_sales_person"
android:paddingEnd="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingStart="10dp"
android:textSize="14sp" />
<View
android:id="#+id/view3"
android:layout_width="fill_parent"
android:layout_height="0.3dp"
android:background="#D3D3D3" />
<EditText
android:id="#+id/orgtype_editBox"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#null"
android:hint="#string/hint_org_type"
android:paddingEnd="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingStart="10dp"
android:textSize="14sp" />
</LinearLayout>
rounded_linear.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke
android:width="0.3dp"
android:color="#D3D3D3" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>

You could put the two EditText in a vertical LinearLayout, and set the divider attribute to handle the line inbetween the two fields. You can then set your existing drawable as the LinearLayout bg with no change required.

To make this simple, you could:
place those edittexts inside a LinearLayout
Add a simple View between them with the background color (#C8CAD0) and the height with the same value as the stroke (2dp)
set box_input_field as the LinearLayout background

Android : Help me To resize drawable's image on Button

i design a Button combine between image.png and text . i have been searching but still can't get like what i want.
for selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid
android:color="#00ffffff" />
<!--make button border solid color, nontransparent-->
<stroke
android:color="#ffffff"
android:width="2dp"/>
<corners
android:radius="2dp"
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp"
/>
<padding
android:left="5dp"
android:right="5dp"
/>
</shape>
</item>
</selector>
for button.xml
<Button
android:layout_width="350dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:text="Guest"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textStyle="bold"
android:textSize="20sp"
android:gravity="left|center_vertical"
android:paddingLeft="20dp"
android:drawableRight="#drawable/ico_arrow_white_xhdpi"
android:background="#drawable/button_guest_register_login_border"/>
this image that i want to resize :
Thank in advance

Instead of button you can use this and implement click event of framelayout.
<FrameLayout
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="<Your Background image>">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="<Your text>"
android:textSize="18sp" />
<ImageView
android:id="#+id/image"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right|center"
android:layout_marginRight="10dp"
android:gravity="center|right"
android:src="<image drawable>" />
</FrameLayout>