Table layout only as wide as first image? - android

I'm building an Android app, and using a TableLayout ViewGroup to display my data.
I would like the TableView to occupy the entire width of the screen, however I'm having trouble getting this to work.
What seems to happen, is the table is only as wide as the widest element in the table, in this case, the image that I put in it.
Here's a screenshot to illustrate the problem.
Additionally, here's the XML source code of my layout.
What specifically should I do to have the layout stretch to the entire width of the screen?
Thanks in advance!

You only have 1 column. Therefore, it should be stretchColumns="0".

Creating a single-column TableLayout is pointless and wasteful. Use a vertical LinearLayout, please. You will probably find that it works better with respect to your problem as a side benefit.
Also, do not repeat the xmlns:android="http://schemas.android.com/apk/res/android" -- it only needs to go on the root element.
BTW, columns are indexed starting from 0, so you are stretching a non-existent column in your existing TableLayout.

Related

Prevent views being pushed off screen

I am trying to have 3 LinearLayouts ordered horizontally (basically forming three columns) within another LinearLayout where the width of the middle layout can vary depending on it's content.
All columns should be visible at all times filling the viewport from left. The left and irght column will be assigned a max width. So only the size of middle layout varies. If the total width of all columns exceeds the viewport size the middle column must not overlap or push out the other columns. But instead it should use the remaining space.
I tried using layout weights but that would put the right column always on the right side and the middle column would fill up all the space even though it's content would not require that.
When I try to use a RelativeLayout as a container I either end up with all three columns overlapping each other or the first column disappears.
I thought the below code (only schematic for now, as I don't have access to the code atm) should work, but as written above the first LinearLayout does not show up. The last LinearLayout seems to be in place as desired.
<RelativeLayout>
<LinearLayout
android:layout_alignParentStart>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_alignParentEnd>
</LinearLayout>
</RelativeLayout>
Does anyone know how I can fix this? Please let me know if you need more detailed code examples etc. I will try to provide them as soon as possible.
I found a few other questions concerning this or similar topics but the solutions always used either layout weights or something like the code snippet above. So far I had no luck with those approaches, maybe because those questions where either for slightly different use cases or a few years old so that the api has changed in the mean time.
Any pointers are greatly appreciated :-)
Yes. You want to defined the center columns with a layout_width="0dp" and a layout_weight="1". The left and right columns will be layout_width="wrap_content".
A LinearLayout should contain the 3 inner "column" LinearLayouts.
I finally found a solution that works.
Using the layout_weight as describe by Jeffrey Blattman alone does only work when the views get large enough to fill the screen.
But as long as the views only fill a part you get gaps between them as the middle view fills up the remaining space. This is something I want to avoid in this case.
For some other reason I had to put my layout into a fragment. Now when I set the dimensions of the fragment to wrap_content the behavior is exactly as I want it. So the views do not get blown up while they are to small but are laid out as if there was no layout_weight defined. But still when growing larger the edge views stay within the screen.

Android TableLayout Wrap Text issues

My tablelayout displays a bunch of values that are random and is created programatically.
The issue I am having is that because I don't know the content that'll be displayed on the table I am not able to use setColumnShrinkable(index, true) and therefore since the table is big, some of the columns would get cut off and not show.
I've tried playing with mTableLayout.setShrinkAllColumns(true); but that would result in columns that shouldn't shrink to shrink and thereby making the wrapping of the texts formatted poorly (see image below) and also the height of each column is too large.
I've also tried playing with minWidth of the columns but that doesn't seem to be doing anything.
What would be the best wayt to tackle this issue? Thanks!

Check-boxes for multi screen size compatability

I'm trying to create a layout that has a background (shown below) and have 10 check boxes (2 columns of 5 rows) in the white area. I can make this work via trial and error for one size view but how would i get this to keep the same aspect ratios for different screen sizes?
I'm open to any ideas, whether it's multiple layouts for different sizes or something more clever.
As you want to build a table of checkboxes (and associated text labels, I assume), I would suggest you use TableLayout.
Basically wrap your check boxes with LinearLayout and don't give hard coded values for
android:layout_width=""
android:layout_height=""
If you can't, my answer will change. Also TableLayout another approach for your work.

Layout alignment in List Activity

I'm creating a list view in Android where each row is shown with LinearLayout. The problem that I have is that since the text is different in each line, it isn't aligned in the same way. See for e.g. the "Date" - in different position on each line. What is the best way to create such a view?
Thanks in advance,
Noam
This is the same problem why browsers are slow with showing tables with variable width: you have to calculate the widths after you've parsed all content.
The quickest way is to manually assign a size (width) to your columns.
If you really can't do that because your content is very unpredictable (are you sure?) you could try and find out what the sizes should be from all your content, and then award the sizes.
Have a couple LinearLayouts in your row layout. Set their orientation to vertical and their layout_width to fill_parent. Also set their layout_weight to 1. These will act as columns and when you put stuff inside and for example center it it will always be in the same place.

Android Layout On Top of an Image

I am struggling with a Layout Problem on Android. This is very simple to do on the iPhone, but with the various screen sizes and the Layout classes available. I am having a hard time doing this.
One thing that I have noticed is that setting backgrounds on objects in the xml really messes up the layout on the device. I generally have to put in a FrameLayout and an ImageView to get a background.
So Am trying to get to this. http://www.calidadsystems.com/images/AndroidListItem.png (Sorry I don't have enough pts to post the image)
his is a status view and is an item in a List View. There are 8 TextViews that need to be set. Each of the 222 fields will change. The current background has the colors in there at specific locations and I am trying to line up the Labels and TextViews to get the picture below. I built this one with AbsoluteLayout which is deprecated, but it also does not work very well on the device.
I have constantly struggled with the layouts on Android. Does someone have some good sample code that could do this?
You're probably going to want to use a RelativeLayout. You can use the android:layout_alignTop="id" attribute to make the rows be in line correctly. And android:layout_alignLeft="id" for the columns. Other than that its just a matter of playing with the android:layout_marginLeft="XXdip" attribute to get the space between them how you want it. Check out this page for an overview and examples of all of the Layout types. Here is some more sample RelativeLayout code. And one more page with another example. RelativeLayout is a bit tricky to get used to but once you've used it a few times its pretty easy to understand and get the Layout that you want. The benefit of it is that your UIs look nice on several different screen sizes when you define them this way.
Why not just composed the layout in a table layout and set the table layout's background to a custom made graphic you make? This should work well with you. Specifically the design of your design would be like 4 columns with x rows. Then using the strechcolumn property, you should be able to accomplish what you are trying to do!
If you scale the graphic properly, then you shouldn't have this problem overall.

Categories

Resources