StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAndroid - Square TableLayout
text
Body
copied!<p>I have a need to create a perfect square TableLayout. The table is a grid of equal sized objects. The problem here is that in landscape layout, the table should take up the maximum amount of space but nothing more. In other words, I need the width of the table equal to the maximum height allowable. An ad appears ~10 seconds or so after the activity starts so that also adds to the complexity.</p> <p>Here is what I've tried so far to accomplish this:</p> <ul> <li>I created a invisible view that was aligned horizontally center. I then aligned the right side of the table to this view. This works but for some devices, the screen ratio doesn't make this setup perfect. On devices like the droid, the bottom row is squinched in because the table width is smaller than the height.</li> <li>I created an ImageView with adjustViewBounds set to true. I sourced it with a very large square image. I have it set to be above the adView and align top and align left. I then set the table layout to align to the bounds of that ImageView. This didn't work because it was a memory hog and the image bounds never fully adjusted when the ad popped up. The image source would go to a smaller scaled square but the right bound never adjusted to the new bounds.</li> </ul> <p>I think this could be very easy if I made a custom class of the TableLayout and set the tablewidth = tableheight. I am struggling with this idea because I don't know where all I would need place the necessary logic. I suppose I would need to add it when the table gets initially drawn and again when the Table adjusts after the ad moves into place.</p> <p>Can someone help with some sample code on the TableLayout class? Is there another way to do this?</p> <p><strong>Update 3/30 9:05PM PST</strong></p> <p>I've made some progress with a custom TableLayout class after looking through the suggestion from CommonsWare. I'm closer to achieving the solution using this class but have one left thing to solve. The new TableLayout doesn't adjust it's bounds so the width is still taking up additional space even though the contents are sized correctly. The width looks to be set when there isn't an ad and it never changes after that.</p> <p>Here is my really simple extended TableLayout class. Note the onMeasure method where I set the width and height both equal to the height:</p> <pre><code>public class SquareTableLayout extends TableLayout { public SquareTableLayout(Context context) { super(context); } public SquareTableLayout (Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(heightMeasureSpec, heightMeasureSpec); } } </code></pre> <p>Here is a screenshot of the problem. I added apurple background to the TableLayout to highlight the problem.</p> <p><a href="http://ribzy.com/images/tile_takedown_landscape.png" rel="nofollow">http://ribzy.com/images/tile_takedown_landscape.png</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload