Wednesday, 9 April 2014

How to add a shadow and a border on imageView in android

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/drop_shadow"
        android:orientation="vertical" >
     <ImageView
        android:id="@+id/imageView1"
        android:src="@drawable/logo"
        style="@style/myImageView"
        android:layout_width="160dp"
        android:layout_height="160dp"/>
    </LinearLayout>
</RelativeLayout>

values
   colors.xml
  
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="image_border_start">#6698ff</color>
    <color name="image_border_end">#6698ff</color>
    <color name="image_border_center">#6698ff</color>
    <color name="image_backg">#FFFFFF</color>
</resources>

values
   styles.xml

<resources>
    <style name="myImageView">
    <item name="android:padding">5dp</item>
    <item name="android:background">@drawable/image_stroke</item>
    <item name="android:scaleType">fitCenter</item>
</style>
</resources>

res
  drawable
    drop_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item>
        <shape>
            <padding
                android:bottom="1.5dp"
                android:right="1.5dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="1.5dp"
                android:right="1.5dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="1.5dp"
                android:right="1.5dp" />
            <solid android:color="#20CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="1.5dp"
                android:right="1.5dp" />
            <solid android:color="#30CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="1.5dp"
                android:right="1.5dp" />
            <solid android:color="#50CCCCCC" />
        </shape>
    </item>
    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

res
  drawable
    image_stroke.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:centerColor="@color/image_border_center"
                android:endColor="@color/image_border_end"
                android:startColor="@color/image_border_start" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/image_backg" />
        </shape>
    </item>
</layer-list>




No comments:

Post a Comment