ImageViews Into Rounded LinearLayout

Question

I have some imageview in to this rounded LinearLayout. here is my simple code:

<LinearLayout
    android:layout_width="128dp"
    android:layout_height="128dp"
    android:id="@+id/point_image_table1"
    android:orientation="vertical"
    android:drawable="@drawable/image_view_style"
    android:layout_below="@+id/repoint_p_name"
    android:weightSum="4">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:id="@+id/imageView61"
        android:layout_marginBottom="1dp"
        android:src="@color/realRed"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView71"
            android:layout_marginRight="1dp"
            android:layout_marginEnd="1dp"
            android:scaleType="centerCrop"
            android:src="@drawable/pinpoint_logo_large"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/imageView51"
            android:scaleType="centerCrop"
            android:src="@drawable/pinpoint_logo_large"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginLeft="1dp"
            android:layout_marginStart="1dp"
            android:scaleType="centerCrop"
            android:id="@+id/imageView81"
            android:src="@drawable/pinpoint_logo_large"/>

</LinearLayout>

but Images corner covered the LinearLayout corner and finally border if LinearLayout has'nt seen.
how can I fix it? i need to set some imageview in to linear layout and also i need to set border and rounded corner to linearlayout.
Thanks.

Edit: I want to have something like this( four images in to the rounded corner layout):

so basically you want something like collage of images with container rounder corners? — Mohammed Atif, Oct 18 '16 at 17:52

score 4 · Accepted Answer · answered Oct 25 '16 at 12:25

I suggest you to use cardview with multiple images it will be easy to get collage view,try this way

<android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        card_view:cardCornerRadius="10dp">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="300dp"
        android:layout_height="300dp">



        <LinearLayout
            android:id="@+id/left_container"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_width="150dp"
            android:layout_height="300dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/dog"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"

                android:background="@drawable/mmm" />


            <ImageView
                android:id="@+id/bottom_left_image"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginTop="5dp"
                android:background="@drawable/mmm" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/right_container"
            android:layout_width="150dp"
            android:layout_height="300dp"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/left_container"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/top_right_image"
                android:layout_width="150dp"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/mmm" />


            <ImageView
                android:id="@+id/bottom_right_image"
                android:layout_width="50dp"
                android:layout_height="0dp"
                android:layout_weight="0"
                android:background="@drawable/mmm" />

        </LinearLayout>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"/>

    </RelativeLayout>

    </android.support.v7.widget.CardView>

OUPUT

works like a charm! that is exactly what i want. thanks – Omid Zamani Oct 25 '16 at 13:02 — Omid Zamani, Oct 25 '16 at 13:02
glad to help you..happy coding...:) – Aditya Vyas-Lakhan Oct 26 '16 at 03:35 — Aditya Vyas-Lakhan, Oct 26 '16 at 03:35

score 1 · Answer 2 · answered Oct 18 '16 at 17:15

1

First you want to create a simple drawable and use this code. You can change the width or the stroke and colour to your choosing. The radius can also be simplified to android:radius=dpValue.

?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffffff"/>    

    <stroke android:width="3dp"
            android:color="#ff000000"/>

<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

Once you've created this you can then assign it as the background of your imageView with:

android:background="@drawable/yourDrawableName"

I'd maybe try making your image views wrap_content. You should also try setting a 0dp on the height of your imageviews.

Hope this helps.

answered Oct 18 '16 at 17:15

CardDeath

132
11

Thanks for your reply. I already used this solution .but images covered border of linearlayout – Omid Zamani Oct 18 '16 at 17:31
Can you please update your question with a screenshot of your activity? I want to see what you mean by "images covered border of linearlayout". I do understand but I want to see it so I can think how to solve it. – CardDeath Oct 19 '16 at 01:59
provide padding for linear layout – Vinay Oct 19 '16 at 07:13
Ok so I imagine that the image you provided is a dummy version that you created and not the actual XML render? If so then I think you need to add the background that has your radius to your LinearLayout. `android:background="@drawable/yourDrawableName"` Notice how I use background and not `android:drawable` Side note - I see that you have images from the wildlife photography awards! Cool stuff :D – CardDeath Oct 19 '16 at 16:17

ImageViews Into Rounded LinearLayout

2 Answers2