Develop Reference

Circular ripple issue

I am trying to create a circular ripple effect on a CircularProgressIndicator but ripple effect goes outside over the View.
I want it to be on the CircularProgressIndicator and not going outside it. An help will be appreciated.
Here is my code:
<RelativeLayout
android:id="#+id/play_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/play_prev"
android:background="#drawable/btn_ripple_circular">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="#+id/progress_circular"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:indeterminate="false"
android:max="100"
app:indicatorColor="#color/colorAccent"
app:indicatorSize="44dp"
app:trackColor="#color/colorAccentOpacity"
tools:progress="50" />
<ImageButton
android:id="#+id/btn_play"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_centerInParent="true"
android:background="#color/colorTransparent"
android:clickable="false"
android:contentDescription="#string/cover"
android:focusable="false"
android:src="#drawable/ic_play"
app:tint="#color/colorAccent" />
</RelativeLayout>
btn_ripple_circular.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccentOpacity"
android:radius="36dp">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccentOpacity" />
<corners android:radius="36dp" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners android:radius="36dp" />
<solid android:color="#color/colorTransparent" />
</shape>
</item>
</ripple>

app:tabRippleColor="#color/transparent"

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>

Android white background EditText that act as button

I'm trying to Style an EditText to look like the one in the above picture.
I tried setting a background but the result was not at all as excpected
Could you someone point me to the right direction?

use this xml as background fro your edittext:
<?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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
and put some padding in your edittext.

You can use android CardView Library and set EditText background to null
Below is the sample code for it
Add the library in gradle for cardview
compile 'com.android.support:cardview-v7:21.0.+'
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:padding="10dp"
android:elevation="10dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="vertical">
<!-- Card Contents go here -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<EditText
android:id="#+id/edt_first_name"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:editable="true"
android:ellipsize="end"
android:text="Text"
android:inputType="text"
android:singleLine="true" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_menu"
android:layout_height="wrap_content"
></ImageView>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

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>

Android: Round Image inside ring shape

I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/. I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.
I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.
Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks
custom_button.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/map"/>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:innerRadiusRatio="1.75"
android:shape="ring"
android:thicknessRatio="25"
android:useLevel="false"
>
<gradient
android:angle="90"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<size
android:width="50dp"
android:height="40dp" />
<solid android:color="#008000" />
</shape>
</item>
</layer-list>
custom_layout (in res/drawable for linearlayout's background)
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#FF000000"
android:endColor="#FFFFFFFF"
android:type= "linear" />
<stroke
android:width="1dp"
android:color="#FF000000" />
<padding
android:left="5dp"
android:right="5dp"
/>
<size
android:height="50dp"
/>
<solid
android:color="#00FF00"
/>
</shape>
header.xml (in res/layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_layout"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:contentDescription="Button"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:background="#drawable/custom_button"
android:scaleType="fitXY"
android:color="#ff0000"
/>
<ImageButton
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Map"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/weather"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Weather"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/citilink"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="CitiLink"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
</LinearLayout>

You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.