androidframegradientdrawable
Android: Add frame like border to ImageView with xml drawable and gradient
I'm trying to simulate a frame border for an ImageView without using an image but with a drawable xml, but I'm not being able to.
The frame I'd like to simulate, and this is my "test" 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">
<gradient
android:type="linear"
android:startColor="#86592d"
android:endColor="#ffffca" />
</shape>
</item>
</layer-list>
My ImageView definition:
<ImageView
android:id="@+id/ivBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:contentDescription="@string/desc"
android:padding="10dp"
android:scaleType="centerCrop"
android:cropToPadding="true"
android:background="@drawable/border_image" />
What I'm getting:
I wouldn't mind going with an image (if I have a good suggestion) but the problem is my images are loaded dynamically and all of them have different dimensions so first, adjusting the frame to every dimensions makes it lose its proportions and, what's more important, it's really difficult to calculate frame borders width so the image fits exactly inside the frame.
PS. It doesn't have to look exactly the same, but as close as possible.
Solution
Ok, I'm really very stubborn and persistent and I don't like the "it's not possible" 's :) so I kept trying and trying and finally got what I'm looking for.
This is my drawable xml:
<?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="#58452f" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<solid android:color="#624D35" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#795f41" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape android:shape="rectangle" >
<solid android:color="#8e6f4c" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<solid android:color="#a17d56" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle" >
<solid android:color="#ffffd9" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape android:shape="rectangle" >
<solid android:color="#a17d56" />
</shape>
</item>
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle" >
<solid android:color="#8e6f4c" />
</shape>
</item>
<item
android:bottom="9dp"
android:left="9dp"
android:right="9dp"
android:top="9dp">
<shape android:shape="rectangle" >
<solid android:color="#795f41" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<solid android:color="#624D35" />
</shape>
</item>
<item
android:bottom="11dp"
android:left="11dp"
android:right="11dp"
android:top="11dp">
<shape android:shape="rectangle" >
<solid android:color="#58452f" />
</shape>
</item>
</layer-list>
And this is my result:
Of course you can notice it's not a real frame, but it's really very very close to.
I know I can simplify my xml using two or three gradients, but for the moment I'll keep it like this as it's working and I have spent a lot of time in it.
Edit: My last attempt.
Keep on improving!
New xml:
<?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="#58452f" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#624D35"
android:centerColor="#4e3d2a"
android:endColor="#624D35"
android:type="linear" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#795f41"
android:centerColor="#604c34"
android:endColor="#795f41"
android:type="linear" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#8e6f4c"
android:centerColor="#71583c"
android:endColor="#8e6f4c"
android:type="linear" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#a17d56"
android:centerColor="#806444"
android:endColor="#a17d56"
android:type="linear" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#ffffd9"
android:centerColor="#707047"
android:endColor="#ffffd9"
android:type="linear" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#a17d56"
android:centerColor="#806444"
android:endColor="#a17d56"
android:type="linear" />
</shape>
</item>
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#8e6f4c"
android:centerColor="#71583c"
android:endColor="#8e6f4c"
android:type="linear" />
</shape>
</item>
<item
android:bottom="9dp"
android:left="9dp"
android:right="9dp"
android:top="9dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#795f41"
android:centerColor="#604c34"
android:endColor="#795f41"
android:type="linear" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#624D35"
android:centerColor="#4e3d2a"
android:endColor="#624D35"
android:type="linear" />
</shape>
</item>
<item
android:bottom="11dp"
android:left="11dp"
android:right="11dp"
android:top="11dp">
<shape android:shape="rectangle" >
<gradient
android:angle="45"
android:startColor="#58452f"
android:centerColor="#463725"
android:endColor="#58452f"
android:type="linear" />
</shape>
</item>
</layer-list>
And the new (and much better) result:
