Mike Anderson
Mike Anderson

Reputation: 1

How to create staggered/overlapped images in Android Studio

Using Android Studio, I want to create an android phone app that presents a field of staggered circles, like those in this picture.

Example of staggered elements

Here is a portion of code that I have used to create a field of rectangularly-arranged circles. The result is not the arrangement I need.

<HorizontalScrollView android:layout_width="match_parent" android:id="@+id/horizontalScrollView1" android:layout_height="0dp" android:isScrollContainer="true"
    android:layout_weight="13">
    <TableLayout android:id="@+id/tableLayout1" android:layout_width="match_parent" android:layout_height="match_parent">
        <TableRow android:layout_height="match_parent" android:id="@+id/tableRow1" android:layout_width="match_parent">
            <TextView android:id="@+id/Bubble0000" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0001" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0002" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0003" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0004" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0005" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0006" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0007" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0008" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0009" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0010" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0011" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceSmall" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
        </TableRow>
        <TableRow android:layout_height="match_parent" android:id="@+id/tableRow2" android:layout_width="match_parent">
            <TextView android:id="@+id/Bubble0100" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0101" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0102" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0103" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0104" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0105" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0106" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0107" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0108" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0109" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0110" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
            <TextView android:id="@+id/Bubble0111" android:background="@drawable/blank" android:textAppearance="?android:attr/textAppearanceMedium" android:gravity="center" android:layout_height="40dp" android:layout_width="40dp"></TextView>
for (int i = 0; i < nRows; i++) {
    for (int j = 0; j < nCols; j++) {
      bubbleIndex = Math.abs(generator.nextInt() % 5);
      bubble[i][j] = new Bubble(i, j, bubbleIndex, color, Bubble.selectableYes);
      bubbleImage[i][j].setBackgroundDrawable(res.getDrawable(bubbleID[bubble[i][j].getSelectedValue()][bubble[i][j].getColor()][bubble[i][j].getImageIndex()]));
      bubbleImage[i][j].setClickable(true);
      savedBubble[i][j] = new Bubble(i, j, blankImageIndex, color, Bubble.selectableYes);
    }
}

Circles in a rectangular array

What layouts, widgets and techniques will help me achieve the effect in the first image?

Thank you.

Upvotes: -1

Views: 62

Answers (0)

Related Questions