How to prevent imageview overlapping in android

Question

i wanna put multiple imageview in a row like this

but there is some bugs, the imageview are overlap on top of each other, i want to place them side by side with each other

http://imgur.com/WUHbzCd

Below is my XML file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/background"
    android:clipChildren="false"
    android:clipToPadding="false"
    tools:context=".MainActivity" > 

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="182dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/music_720p" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView1"
        android:layout_toEndOf="@+id/imageView1"
        android:layout_marginTop="182dp"
        android:layout_marginRight="70dp"
        android:layout_marginEnd="70dp"
        android:scaleType="centerCrop"
        android:src="@drawable/video_720p" />
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView2"
        android:layout_toEndOf="@+id/imageView2"
        android:layout_marginTop="182dp"
        android:layout_marginRight="70dp"
        android:layout_marginEnd="70dp"
        android:scaleType="centerCrop"
        android:src="@drawable/photo_720p" />
    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView3"
        android:layout_toEndOf="@+id/imageView3"
        android:layout_marginTop="182dp"
        android:layout_marginRight="10dp"
        android:layout_marginEnd="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/web_720p" />
    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4"
        android:layout_marginTop="182dp"
        android:layout_marginRight="10dp"
        android:layout_marginEnd="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/setting_720p" /> 

</RelativeLayout>

Any help is appreciated.

Use `GridView` or `HorzontalScrollView`. And use `RelativeLayout` property properly. — Piyush, Sep 18 '14 at 05:30
Do You know about `GridView` & HorizontalScrollView` in android? — GrIsHu, Sep 18 '14 at 05:31

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

I would suggest you should go for HorizontalScrollView which provides functionality as you want.

Checkout link shows you how you can implement HorizontolScrollView

I hope this will help you.

You can also check the answer of vijju who have shown implementation totally HERE

edited May 23 '17 at 12:12

Community

1
1

answered Sep 18 '14 at 05:35

GrIsHu

29,068
10
64
102

score 0 · Answer 2 · answered Sep 18 '14 at 06:00

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:clipChildren="false"
    android:clipToPadding="false"
    tools:context=".MainActivity" > 

  <HorizontalScrollView
      android:id="@+id/horizontalScrollView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="false"
      android:scrollbars="none" >

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <ImageView
                        android:id="@+id/setupImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|left"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="20dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/uploadImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/visulizationImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|right"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/setupImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|left"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="20dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/uploadImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/visulizationImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|right"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />
                </LinearLayout>

            </HorizontalScrollView>

</RelativeLayout>

Please try this. I hope help you.

score 0 · Answer 3 · answered Sep 18 '14 at 06:10

0

I can see that you have used wrap_content everywhere,so u can either reduce the width and height of your images or you can define it explicitly in layout file or .java file.

For your scenario using GridLayout is better option than using RelativeLayout.try it... Here is a good example on GridLayout :- http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources

answered Sep 18 '14 at 06:10

Jazz Haque

380
4
13

I change to GridLayout and it works perfectly, thanks! – LEW CC Sep 23 '14 at 02:13

How to prevent imageview overlapping in android

3 Answers3