I want to set the background of my layout to semi-transparent color with top border (not transparent) on it. I tried to achieve this. Currently my drawable file looks like the following:
<?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="#FF0000FF" />
</shape>
</item>
<item android:top="5dp">
<shape>
<solid android:color="#7F000000" />
</shape>
</item>
</layer-list>
But in this xml the semi-transparent shape goes on the non-transparent shape, so in the result it isn't semi-transparent at all. Can you please help me to get the background I want?
Thanks in advance.
After searching the web and trying to find the right solution, finally I've got the answer from the guys in the chat. The solution is to create one more layout on top of the first one and for example give it a height of 10dp and the width of match_parent.
Here is the working example:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_bg"
android:orientation="vertical"
android:padding="5dp"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/Box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/Border"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_weight="0.64"
android:background="#drawable/border"
android:orientation="vertical"
tools:ignore="InefficientWeight" >
</LinearLayout>
<TextView
android:id="#+id/Content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.64"
android:padding="5dp"
android:text="#string/example"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
main_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="5dp">
<shape>
<solid android:color="#FF990000" />
</shape>
</item>
</layer-list>
background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="5dp">
<shape>
<solid android:color="#55000000" />
</shape>
</item>
</layer-list>
border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="5dp">
<shape>
<solid android:color="#FFFF0000" />
</shape>
</item>
</layer-list>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Transparent Views</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="example">Content …</string>
<color name="white">#FFFFFFFF</color>
</resources>
Hope it will be helpful for someone else too.
Here is one simple solution.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-5dp" android:bottom="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:width="5dp" android:color="#color/borderColor" />
<solid android:color="#color/backgroundColor" />
</shape>
</item>
</layer-list>
Related
I want to set following xml shape as my linear layout background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
<solid
android:color="#android:color/transparent">
</solid>
</shape>
And I also want to show the press effect by these lines of code:
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:background="?android:selectableItemBackground"
But as you know, it is impossible to have two background for a view. So, What is the solution?
Try this:
<LinearLayout
android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ll_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:onClick="doSomething"
android:padding="8dp"
android:weightSum="3">
<TextView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Greeting" />
<TextView
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
Then in drawable/ folder add:
button_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#D50000">
</stroke>
</shape>
button_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid
android:color="#D50000">
</solid>
<stroke android:color="#D50000" android:width="2dp"/>
</shape>
Then create ll_background.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"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
Finally for ripple create drawable-v21 folder and add ll_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#D50000">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke
android:color="#D50000"
android:width="1dp" />
</shape>
</item>
</ripple>
The first three files (button_normal.xml, button_pressed.xml & ll_background.xml) will be for api < 21 and the 4th (ll_background.xml) ripple will be on all other devices including api 21 and above.
I try to create half circle background, in development IDE preview it works, but when I launch in emulator it doesn't work.
Here is my shape code :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="50dp">
<shape>
<solid android:color="#color/colorAccentDark" />
</shape>
</item>
<item android:top="-500dp" android:bottom="0dp" android:left="-100dp" android:right="-100dp">
<shape>
<corners android:radius="500dp" />
<solid android:color="#color/colorAccentDark" />
</shape>
</item>
</layer-list>
And here is my layout code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_profile"
android:layout_weight="1">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_avatar"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_default_avatar"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"/>
<TextView
android:id="#+id/profile_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/profile_avatar"
android:layout_marginTop="20dp"
android:textColor="#color/neutralWhite"
android:textStyle="bold"
android:textSize="18sp"
android:text="Avatar Ang"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4.04">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android!"/>
</RelativeLayout>
</LinearLayout>
Maybe any other tweak to handle that?
Thank you
you can try this :
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#900021df"/>
<size
android:width="10dp"
android:height="5dp"/>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"/>
</shape>
it gives this shape:
curve_toolbar_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"/>
</item>
<item
android:bottom="0dp"
android:left="-100dp"
android:right="-100dp"
android:top="-80dp">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/rounded_corner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
You cannot create a semicircle from xml. but you could achieve what you are looking for using a circle with appropriate margin & padding.
You can use a circle shape .xml file.
Create a fixed sized circle like this:
Example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#006AC5" />
<size
android:height="50dp"
android:width="50dp" />
</shape>
Try this. Remove the gradient part then it will look like same as you want.
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00B0EA" />
</shape>
</item>
<item
android:bottom="400dp"
android:left="-100dp"
android:right="-100dp"
android:top="-200dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="90"
android:endColor="#65FFFFFF"
android:startColor="#65FFFFFF" />
</shape>
</item>
<item
android:bottom="402dp"
android:left="-100dp"
android:right="-100dp"
android:top="-280dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF" />
</shape>
</item>
Background.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" />
</shape>
</item>
<item
android:bottom="410dp"
android:left="-100dp"
android:right="-100dp"
android:top="-300dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#7181A1" />
</shape>
</item>
</layer-list>
Output like
You can try to use ShapeOfView.
<io.github.florent37.shapeofview.shapes.ArcView
android:layout_width="match_parent"
android:layout_height="300dp"
android:elevation="4dp"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<!-- YOUR CONTENT -->
</io.github.florent37.shapeofview.shapes.ArcView>
Image result
I have an android button, where I want to give it a background color and both ripple effect
my ripple xml is as below.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#BDA0CB"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#BDA0CB" />
</shape>
</item>
</ripple>
and my button is
<Button android:id="#+id/Button_activity_login_ViewProfile" style="?android:textAppearanceSmall"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:text="Save"
android:textStyle="bold"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:textColor="#ffffffff"
android:fontFamily="sans-serif"
android:background="#ff7e51c2" />
To give the ripple effect I have to remove background color...Is there a way I can keep both.
This can be achieve by adding the android:drawable in your ripple.xml.
First add this to your color.xml. Assuming that #ff7e51c2 is the background color you want for your button.
...
<color name="btn_bg_color">#ff7e51c2</color>
....
Then create a drawable for the button background(/drawable/btn_bg.xml):
<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid
android:color="#color/btn_bg_color" />
</shape>
Then use the drawable in your ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_bg"/>
</ripple>
You can do something like this in the xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple"/>
Change your ripple.xml in the the drawable/ folder as follows:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
create ripple_effect.xml in your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#1182bc"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#1182bc" />
</shape>
</item>
</ripple>
use this xml as your view's background like below
android:background="#drawable/ripple_effect"
hope this will help ..
Create two different versions of xml file so that it will work on Pre Lollipop devices.
drawable/button_effect.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
drawable-v21/button_effect.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:tools="http://schemas.android.com/tools"
android:color="#635a5a"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="lollipop">
<item android:drawable="#drawable/round_button" />
</ripple>
Create shaped drawable in drawable folder
drawable/round_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
You can do something like this in the layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_effect"/>
Trying to do something really simple here and have looked up a bunch of SO resource, but to no avail. I am trying to get the ripple effect on a button which uses a drawable background of type of shape drawable. The relevant files:
background_button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1px"
android:color="#80ffffff" />
<solid android:color="#android:color/transparent" />
</shape>
ripple.xml within the drawable-v21 folder:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="#drawable/background_button"/>
</ripple>
Button.xml:
<Button
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#drawable/ripple"
/>
What is wrong here.
Thanks!
My advice would be not to use <ripple tag. I have 2 reasons: it is not that easy to do exactly what you want and you have to 2 different .xml files for every background. I don't like to have drawable-v21 folder.
My solution is to wrap your Button with FrameLayout and use android:foreground attribute. This way you can have whatever background you want and you can keep the ripple effect.
<FrameLayout
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:foreground="?attr/selectableItemBackground">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_button"/>
</FrameLayout>
Notice that I moved all the attributes and the id to FrameLayout. You should set onClickListener to FrameLayout instead of the Button.
Btw, ?attr/selectableItemBackground is great. Use it as much as possible. It replaces blue Holo color with gray for old devices from Android 4.0 to 4.3.
Try this.
ripple_effect.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#2797e0"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#2797e0" />
</shape>
</item>
button.xml
<Button
android:id="#+id/login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#drawable/ripple_effect"/>
build.gradle
compile 'com.android.support:appcompat-v7:23.1.1'
More simple solution - to use this drawable-xml as value of property "android:background" of the Button:
drawable/bkg_ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</ripple>
button.xml:
<Button
android:id="#+id/mybutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:background="#drawable/bkg_ripple"
/>
I had the similar task. Let me explain how i solve it. It outputs circle imageViews with shadow and ripple effect not goes beyond circle boundaries.
<ImageView
android:id="#+id/iv_undo"
android:layout_width="#dimen/iv_width_altmenu"
android:layout_height="#dimen/iv_height_altmenu"
android:src="#drawable/undo"
android:elevation="#dimen/elevation_buttons"
android:foreground="#drawable/ripple_effect"
android:background="#drawable/buttons_inactive_coloring"
/>
The following provides ripple effect:
android:foreground="#drawable/ripple_effect"
The following provides circle imageView.
android:background="#drawable/buttons_inactive_coloring"
The following provides shadow:
android:foreground="#drawable/ripple_effect"
Another problem you may be probably face is ripple effect goes out of circle boundaries. In order to solve, use following file(ripple_effect.xml)
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/button_active"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_active" />
</shape>
</item>
</ripple>
If you do not use the following :
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_active" />
</shape>
</item>
ripple effect goes beyond circle boundaries and this does not looks nice. Be careful and takes it easy.
That works for me
drawable/rect.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<stroke android:width="1dp" android:color="#FF4C71F5" />
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="5dp" />
<solid android:color="#00000000" />
</shape>
and for ripple drawable/rip.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
and for your button
<Button
android:id="#+id/nm"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/rect"
android:enabled="true"
android:text="#string/vnm"
android:textColor="#color/colorpr"
android:textStyle="bold"
android:foreground="#drawable/rip"/>
Hope this helps!
This work for me..
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/smooth_white"
tools:targetApi="lollipop">
<item android:drawable="#drawable/button_green_background" />
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/smooth_white" />
</shape>
</item>
</ripple>
The point is section
<item android:drawable="#drawable/button_green_background" />
Try this:
card_back.xml
<?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="20dp" />
<solid android:color="?attr/cardBGColor" />
<stroke android:width="1dp" android:color="?attr/borderColor"/>
</shape>
</item>
</selector>
card_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#bbb">
<item android:drawable="#drawable/card_back" />
</ripple>
And setup it this way: android:background="#drawable/card_ripple"
Quick solution
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/blue"
tools:targetApi="lollipop">
<item
android:id="#android:id/mask"
tools:targetApi="lollipop">
<shape android:shape="rectangle">
<solid android:color="#color/blue" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<stroke
android:width="0.1dp"
android:color="#312D2D" />
<solid android:color="#FFF" />
<corners android:radius="50dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
</ripple>
This will help
<com.abcd.ripplebutton.widget.RippleButton
android:id="#+id/Summit"
android:layout_width="260dp"
android:layout_height="50dp"
android:text="Login"
android:textColor="#color/white"
android:textStyle="bold"
app:buttonColor="#color/Button"
app:rippleColor="#color/white" />
For more See this
For me only this work
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#cccccc">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
</ripple>
And in layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:background="#drawable/ripple_white"/>
Yes, it should be clickable
i am trying to show rounded shadow in center when status is pressed.
but it is giving full view (rectunglar) shadow in current case.
here is what i am trying...
1. left_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape >
<solid android:color="#ffffff"></solid>
</shape>
</item>
<item android:state_focused="true"><shape>
<solid android:color="#40454a"></solid>
</shape></item>
<item><shape>
<solid android:color="#40454a"></solid>
</shape></item>
</selector>
here is the xml layout where i am applying ...
<RelativeLayout
android:id="#+id/relative_activity_camera_bottom"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:background="#layout/footer_color" >
<LinearLayout
android:id="#+id/bottom_layout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:weightSum="1.0" >
<ImageView
android:id="#+id/captureImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#layout/left_button"
android:src="#layout/camera_image"
/>
<ImageView
android:id="#+id/recordButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:src="#layout/videocamera_image"
android:background="#layout/left_button"
android:onClick="startRecording"
/>
</LinearLayout>
</RelativeLayout>
original condition-
current case- (but i want to show white only in center)
For example, use a selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true" android:state_window_focused="false"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="#drawable/gradient_round_press_effect_inverse" android:state_selected="false"/>
</selector>
With two drawable shapes, the first when clicked (gradient_round_press_effect):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#color/clr_the_color_behind"
android:gradientRadius="130"
android:startColor="#66000000"
android:type="radial" />
</shape>
Adapt the size of the radius with the size of the button
For start color use #66FFFFFF if you want white (66 is for the transparency)
For end color maybe you can use transparent ? i didn't try this
and when not clicked define your own colors (gradient_round_press_effect_inverse) not really "inverse" but this is an example of another gradient. You can just use a color instead
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#color/clr_gradient2"
android:endColor="#color/clr_gradient1"
android:startColor="#color/clr_gradient3"
android:type="linear" />
</shape>