Reputation: 1
Using Android Studio, I want to create an android phone app that presents a field of staggered circles, like those in this picture.
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);
}
}
What layouts, widgets and techniques will help me achieve the effect in the first image?
Thank you.
Upvotes: -1
Views: 62