create side by side images from RelativeLayout

Question

i am trying to add 4 images, of half of the width of mobile screen device size with left right margin.

Here i am using a layout as RelativeLayout where i want to create a grid view sort of view. Here is how my layout should look like:

Here is how i am trying to show the layout view in android XML.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:layout_gravity="center"
    android:id="@+id/li_profile"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/relative1_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <ImageView
        android:src="@drawable/lamp"
        android:id="@+id/profile_image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:src="@drawable/lamp"
        android:id="@+id/profile_image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </RelativeLayout>
    <RelativeLayout
        android:layout_below="@+id/relative1_profile"
        android:id="@+id/relative1_profile1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/lamp"
            android:id="@+id/profile_image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:src="@drawable/lamp"
            android:id="@+id/profile_image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
</RelativeLayout>

as per the above code we are trying to add this view in a ViewPager so it can swipable.

To make it consistent with different screen sizes we have added some dynamic margin to external @+id/relative1_profile.

Any suggestions related to this will be helpful to understand. We tried working with GridView as well, but then the "brown" image is not displaying well in all the mobile resolutions.

Thank you! (in advance)

As per your requirement i will personally suggest you to use CardView and Recycler View By using material design. here is tutorial link let me know if i can help you. https://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/ — Zaigham Raza, Nov 28 '17 at 12:03
Possible duplicate of [Simple Android grid example using RecyclerView with GridLayoutManager (like the old GridView)](https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the) — MSpeed, Nov 28 '17 at 12:08

Sachin Varma · Accepted Answer · 2017-11-28T12:44:52.023

Worst coding is done,but you can acheieve it.

Better to go with LinearLayout and add weights,

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical"
    >

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="10dp"
      android:orientation="vertical"
      >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:background="#ccc"
          />
      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:background="#000"
          />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:background="#2529a3"
          />
      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:background="#318339"
          />
    </LinearLayout>
  </LinearLayout>
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="end"
        android:layout_weight="1.2"
        android:gravity="end"
        android:weightSum="2"
        >


      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_gravity="end"
          android:elevation="@dimen/dimen5"
          android:layout_marginStart="-50dp"
          android:layout_weight="1"
          android:background="#746e6e"
          />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          />
      <ImageView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          />
    </LinearLayout>
  </LinearLayout>
</FrameLayout>

The screenshot is provided below.

But i want one of the image to be overlapping on other 3 images. — user3201500, Nov 28 '17 at 12:07

score 0 · Answer 2 · answered Nov 28 '17 at 12:34

You can take a look at the new ConstraintLayout, by adding guides on percentages of the screen and specifying ratios for each content.

Add it to your gradle

compile 'com.android.support.constraint:constraint-layout:1.0.2'

And then simply make the ConstraintLayout parent view. If you want one to overlap, simply add a vertical guide to 50% of the screen and another horizontal guide to 50% of the screen, giving you four equally spaced squares. To make the last square overlap, you can add a third and fourth guide (horizontal/vertical) to 40%/60% of the screen, and constraining the last square to it.

create side by side images from RelativeLayout

2 Answers2