How can I evenly space my ImageViews in a RelativeLayout

Question

I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.

Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.

I feel like I need to make use of the android:scaleType... maybe center crop:

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?

Snippet of code right now:

<RelativeLayout
   android:layout_width="fill_parent"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:orientation="horizontal" >
   <ImageView
       android:id="@+id/dragcircle"
       android:layout_width="wrap_content"
       android:tag="circle"
       android:layout_alignParentLeft="true"
       android:layout_height="wrap_content"
       android:adjustViewBounds="false"
       android:scaleType="centerCrop"
       android:src="@drawable/circle" />
    <ImageView
       android:id="@+id/dragsquare"
       android:layout_width="wrap_content"
       android:tag="square"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/dragcircle"
       android:adjustViewBounds="false"
       android:src="@drawable/square" />
    <ImageView
       android:id="@+id/dragtriangle"
       android:layout_width="wrap_content"
       android:tag="triangle"
       android:layout_height="wrap_content"
       android:layout_toRightOf="@id/dragsquare"
       android:adjustViewBounds="false"
       android:src="@drawable/triangle" />

---

Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:

Android: how evenly space components within RelativeLayout? and android RelativeLayout, equal spacing?

But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:

Note the example, I have 3 ImageViews with basic shapes, but I also have a 4^th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout

Answer 1

I think you're going to want to go back to your original LinearLayout to meet all of your needs here.

If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.

Something like:

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal" >
   <ImageView
       android:id="@+id/dragcircle"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:tag="circle"
       android:layout_height="wrap_content"
       android:scaleType="centerCrop"
       android:src="@drawable/circle" />
    <FrameLayout
       android:id="@+id/centerimagewrapper"
       android:layout_height="wrap_content"
       android:layout_width="0dp"
       android:layout_weight="1" >
       <ImageView
          android:id="@+id/dragsquare"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:tag="square"
          android:src="@drawable/square" />
       <ImageView
          android:id="@+id/arrow"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/arrow"
          android:visibility="invisible" />
    </FrameLayout>
    <ImageView
       android:id="@+id/dragtriangle"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:tag="triangle"
       android:layout_height="wrap_content"
       android:src="@drawable/triangle" />

Answer 2

You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
>
<ImageView
    android:id="@+id/img"
    android:layout_width="100dip"
    android:layout_height="100dip"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:background="@android:color/transparent"
    android:src="img1_src"
/>

<ImageView
    android:id="@+id/imgOverlap"
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:src="img2_src"
    android:visibility="gone"
/>
</RelativeLayout>

It appears not possible to use "layout_weight" in a RelativeLayout. You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.

Answer 3

you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.

Answer 4

Try this

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/dragcircle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:scaleType="fitXY"
            android:src="@drawable/circle"
            android:tag="circle" />

        <ImageView
            android:id="@+id/dragtriangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/triangle"
            android:scaleType="fitXY"
            android:tag="triangle" />

        <ImageView
            android:id="@+id/dragsquare"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/dragtriangle"
            android:layout_toRightOf="@id/dragcircle"
            android:src="@drawable/square"
            android:scaleType="fitXY"
            android:tag="square" />

</RelativeLayout>