Shadow in center on click image view

Question

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)

Answer 1

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>