Android圆角布局，带有填充的平铺图像

Question

I'm hoping there is an xml solution to this... I am trying to create a layout that has rounded corners and then filling that layout with an image (tiled, repeat). So basically I have a LinearLayout that has a drawble layered-list assigned to the background. Here is the test layout (xml):

<?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" >

    <LinearLayout
        android:id="@+id/rate_buttons"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:padding="0dp" 
        android:background="@drawable/test_rounded">
    </LinearLayout>
</LinearLayout>

here is the test_rounded drawable xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item ><bitmap android:src="@drawable/my_tiled_image" android:tileMode="repeat"/></item>
    <item >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >     
            <stroke android:width="3dip" android:color="#B1BCBE" />
            <corners android:radius="20dip"/>   
        </shape>
    </item>
</layer-list>

The image is overflowing at the corners of the shape/layout border. I get the following

As you can see the corners are overflowed. I heard about modifying the image part (blue pattern) in code but I have issues with that since I do modify it and animate it along the way. SO, if its at all possible to just fill in the layout with that image, please let me know. Thank you all for your help.

Answer 1

You can do this only programatically. But if you want to do this using xml, you have to add the background image in a layout above the rounded corner layout with the help of Relative layout and set margin. This will not give a perfect solution but will solve your problem.

The first is the XML way Create an xml file in your respective drawable folder for the round border. I have namedd it as popupborder.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke android:width="2dp" />
<corners android:radius="15dip" />
</shape>


The main 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:layout_gravity="center"
android:layout_margin="10dp"
android:background="@drawable/popupborder" >

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp" >

<LinearLayout
    android:id="@+id/property_details"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Inner view with Background and margin"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000" />
</LinearLayout>
</RelativeLayout>

Answer 2

i recommend you to use an image loader library such as universal image loader, picasso etc. Here is an example code for it:

String url = "file://" + your_file_path
com.nostra13.universalimageloader.core.ImageLoader.getInstance().displayImage(url, ivPicture, options);

You have to add

.displayer(new RoundedBitmapDisplayer(px))

to your Universal Image Loader display options.

Also there is another library (i think this is what you are looking for) https://github.com/vinc3m1/RoundedImageView

You can check this. But in second way you can get "Out of Memory Exception" cause of loading big sized image.

I hope this'll help you.