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>

TextView hidden by previous View in RelativeLayout

My issue is simple I have a basic layout with two views with two custom drawables as background, here is the code :
<RelativeLayout
android:id="#+id/relaunch_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:visibility="invisible"
android:clipChildren="false"
android:layout_above="#+id/playLayout">
<Button
android:id="#+id/relaunch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Relancer"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColor="#FFF0951C"
android:background="#drawable/rounded_button"
android:gravity="center_horizontal|center_vertical"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/nbspins_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:layout_marginRight="-10dp"
android:layout_marginTop="-10dp"
android:background="#drawable/circular_shape"
android:textColor="#color/white"
android:layout_alignRight="#+id/relaunch" />
</RelativeLayout>
And the shape for my Views :
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="15dp" />
<stroke android:width="2dp" android:color="#FFF0951C" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
TextView shape :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF0000" />
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
/>
</shape>
I can't figure out why, my TextView is not displayed above my Button, here is the result I get :
The result I want :
Can you see why ?

I think I know what you mean.
The button uses the following:
android:layout_alignParentTop="true"
so is aligning with the top of the RelativeLayout.
Remove that and change it to
android:layout_below="#id=nbspins_view"
and make the TextView align with the parent top.

Effect in EditText from xml

I am trying to give shadow effect as shown below to edittext
but i am unable to do it. Below is what i have done till now
My code are as follow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<LinearLayout
android:id="#+id/layout_linear_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img_6parcels"
android:layout_centerInParent="true"
android:layout_marginBottom="10dp"
android:background="#drawable/screen_background"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp" >
<EditText
android:id="#+id/edit_text_domain"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="Domain"
android:paddingBottom="3dp"
android:background="#drawable/edittext_shadow"
android:paddingTop="3dp">
<requestFocus />
</EditText>
<ImageView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/slice_address_transparent" />
<EditText
android:id="#+id/edit_text_invinzee"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/edittext_shadow"
android:gravity="center"
android:hint="Invinzee"
android:paddingBottom="3dp"
android:paddingTop="3dp" />
<EditText
android:id="#+id/edit_text_password"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/edittext_shadow"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:paddingBottom="3dp"
android:paddingTop="3dp" />
<Button
android:id="#+id/log_in_Button"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:gravity="center"
android:text="LOGIN" />
</LinearLayout>
<LinearLayout
android:id="#+id/img_6parcels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="20dp" >
<ImageView
android:id="#+id/parcel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/six3_03" />
</LinearLayout>
<TextView
android:id="#+id/text_delivery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_linear_login"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Perfect Job"
android:textColor="#353f41" />
</RelativeLayout>
</RelativeLayout>
My edittext_shadow.xml is as follow:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#660099" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#660099" />
</shape>
</item>
<!-- White Top color -->
<item android:top="-3px" android:left="-3px">
<shape android:shape="rectangle">
<solid android:color="#86ae0b" />
</shape>
</item>
</layer-list>
I tried as shown in this link Add drop shadow effects to EditText Field but unable to accomplish it.
Any Help!!!

Thanks, Guys For helping.
Mixing code from Add drop shadow effects to EditText Field and answer from babar sanah I was able to find the solution.
My solution is as below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important in order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
<!-- White Top color -->
<item android:top="5px" android:left="5px">
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
</layer-list>
Thanks alot for the help it means a lot to me.

Why you didn't try gradient? If it is possible please let me know..
<gradient
android:angle="270"
android:centerColor="#color/shadow_alpha"
android:endColor="#color/shadow_alpha1"
android:startColor="#color/shadow_alpha2" />
Define the colors as per your need..

create an xml shape.xml put in drawable folders and give your edit text background
android:background="#drawable/shape"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<gradient android:angle="-90"
android:endColor="#436EEE"
android:startColor="#436EEE"
android:centerColor="#4876FF" />
</shape>

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.

Text over image in Android layout like messages button in Facebook

I want to make a notification Button in Android Activity as the same as notification button in Facebook. I tried ImageButton and Button to do this but I failed to display the text drawn over the image in the same layer. Why?

If I'm getting your question right and you need the red circle containing the count of notifications, you create a drawable and use it as a background for your TextView
Here is a sample rounded-edges rectangular shape
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<solid android:color="#FFFFFF"/>
<corners android:radius="3dp"/>
</shape>
</item>
<item>
<shape>
<corners android:radius="3dp"/>
<solid android:color="#F00"/>
</shape>
</item>
</layer-list>
Then all you need is to use that as a background for your TextView
Edit: use FrameLayout to make the notification appear over the ImageView
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image" />
<TextView
android:id="#+id/notification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:background="#drawable/red_notification_frame"
android:gravity="center"
android:minWidth="15dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:textColor="#fff"
android:textStyle="bold" />
</FrameLayout>
And change the layout_gravity for the TextView to control its position over the image.

If you want a permanent text to be displayed over an Image, a shortcut option is to use a Image editing software and write the text over the Image.
Then use a ImageButton and place the Image.

I modified an answer and came up with a solution
<RelativeLayout
android:layout_height="102dp"
android:layout_width="102dp"
android:padding="15dp">
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/envelope" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="1dp"
android:layout_height="12dp"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignBottom="#+id/myImageView"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_marginTop="43dp"
android:layout_marginLeft="43dp"
android:gravity="center"
android:text="0"
android:background="#drawable/rounded_corners"
android:textColor="#android:color/white" />
</RelativeLayout>
The xml style, put it in the drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#android:color/holo_red_dark" />
<solid android:color="#android:color/holo_red_light" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:radius="20dp" />
</shape>
In my case when the text is beyong three chars, I say 9+