CODEWITHSUNDEEP
javaandroidxmlandroid-layoutmaterial-design
Omid Zamani
Omid Zamani

Reputation: 424

ImageViews Into Rounded LinearLayout

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):
enter image description here

Upvotes: 3

Views: 2070

Answers (2)

Aditya Vyas-Lakhan
Aditya Vyas-Lakhan

Reputation: 13555

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

enter image description here

Upvotes: 4

CardDeath
CardDeath

Reputation: 132

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.

Upvotes: 1

Related Questions