Android xml Table Layout - android

So I'm trying to create a table that looks something like this:
shrimp: 12pc $10.99 24pc $18.99
scallops: 10pc $11.99 15pc $14.99
...etc
but somethings wrong with my code that is making the first column (for example shrimp) take most of the screen space and the count and price end up squished on the right side of the screen.
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_conent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Shrimp:" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="12pc - $10.99" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="24pc - $18.99" />
</TableRow>
Can someone tell what I have wrong here? I tried playing around with the layout width and heights but the only way I can get it to look the way I want is if I type something wrong in the layout width for the first columns. It looks the way I want that way but I get a compiler error if I do so.

It's because of layout_weight attribute, try to remove it, and add some space between your TextViews.
Then it will be such as you need.

Related

set the Columns of a TableRow in a TableLayout

well basicly I'm getting data from a database and I want to adapt this data in a kind of "DataGridView" on any other lenguaje, Basicly I have an GridView in a Main layout define like this:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gastoGridView"
android:stretchMode="columnWidth"
android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="1"
android:clipChildren="true"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip" />
other hand I have a second xml layout file than define every item(row) for this gridView, It is my item_gridview xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TableLayout android:id="#+id/TableLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TableRow android:id="#+id/TableRow01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal">
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fechaAtt"
android:gravity="left"
android:layout_gravity="left" />
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/descpAtt"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal" />
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/saldoAtt"
android:layout_gravity="right" />
</TableRow>
</TableLayout>
Ok, basicly I'm getting 3 attributes from database, I already developed the adapter to this gridview, so I show the information on it, but not in the way I want, I'll try to explain you, Currently it's being show like this
| Date | Description | Price |
2014-11-17 any description it have 50.85$
I'm trying to divide my tablerow (width:fill_parent) on 3 sections(columns) I'm not sure if It's possible, because I'm not very involved on this subject, but I want to divide this tablerow on those 3 section, I want a small section on the left side of the row which will be my date, a large section in the center_horizontal wich will be my Description, and another left section wich will be my price, I'm not sure if you guys get my point but I want some like this.
| Date | Description | Price |
2014-11-17 Get the description Centered Here 50.85$
I've tried to use the layout_span and layout_column on every TextView, but I get a Null Pointer error which I don't understand, maybe I'm doing that in a wrong way.
Could you guys help me to get this style? I've been reading about it a lot, It's a kind of difficult because Android do not support an DataGridView tool as others lenguages do.
Thanks you beforehand, I really need it
Your difficulty stems from the fact that your trying to bring your concept of the DataGridView into Android which is problematic. What you really want to do use a ListView with a proper Adapter and Loader (use a Loader if possible).
Now, with a ListView what happens is it creates View for every row returned from the Cursor using the Adapter to create (inflate) this view and populate it (binding). This is useful since you can now think about each row as a set of three items and lay them out appropriately. I recommend just using the regular LinearLayout with the appropriate layout_weight set for your layout. You'll have to remember to set the LinearLayout to horizontal.
Edit:
For clarification. With LinearLayout you can specify in the layout.xml file the android:layout_weight parameter. This allows you to set 'relative' sizes (width or height depending on horizontal or vertical LinearLayout). Once you do this the android:layout_width is ignored but you should set it to 0dp. An Example:
<LinearLayout
android:id="#+id/row_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Now you have three TextView in a horizontal LinearLayout each with a weight set to 1. That would make them all equal size. You can adjust the weight values to change their relative sizes to each other and the parent width.

What would be a way working with layout weight

I have tried this. I planned to do like this:
But it showing in this way:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvHiragana"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hiragana"
android:layout_weight="2"
android:textSize="22sp" />
<TextView
android:id="#+id/tvKanji"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanji"
android:textColor="#color/redColor"
android:layout_weight="1"
android:textSize="20sp" />
</LinearLayout>
What should I do make it work correct in the terms of layout_weight? How to avoid making new lines in TextView?
What should I do make it work correct in the terms of layout_weight?
First, when using weight with a horizontal layout, your width should be 0dp. Similarly, if your layout is vertical then your height should be 0dp.
How to avoid making new lines in TextView?
use android:singleLine="true" if you want to
Constrains the text to a single horizontally scrolling line instead of letting it wrap onto multiple lines
TextView Docs
If this doesn't answer your question then please be a little more clear because its a bit confusing on what you're asking.

Why is this button placed here, not on the right side?

I'm doing Derek Banas' Android Development Tutorial 11 and I just wanted to move the save button to the right.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
<TableRow
android:id="#+id/tableRow7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/save_button" />
</TableRow>
</TableLayout>
Here's how it looks like:
I expected this button to be on the right side, why does it stop awkwardly in the middle of the screen?
The Button is where you would expect it to be: on the right of the first column of that Row. If you set the layout_gravity of the Table to be "right", then the first column will push to the right in the absence of a second column, and you will get the desired effect.
A more systematic approach is to put a View (with no content) just before the "Button", ie. filling the first column of that view with nothing intentionally.
I think you can also add android:layout_span="2" to the Button to also achieved your desired effect.
<TableRow android:id="#+id/tableRow7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right">
<View android:layout_width="0dp"
android:layout_height="0dp"/>
<Button android:id="#+id/addButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save_button"
android:onClick="addNewContact"/>
</TableRow>
Something has to go in the first cell of the row. For example, you can generate an empty view like this to achieve that or use one of these attributes in the <Button> tag.
android:layout_column - The index of the column in which this child should be.
android:layout_span - Defines how many columns this child should span.
I think it's because your row is not spanning the two columns (though it's strange that the edge of the button overlaps the start of the textfields), try adding android:layout_span=2 to the Button's TableRow.
Try android:layout_gravity="right"

RelativeLayout with ImageView on the right and 3 text views to the left of the image, one below another

I'm trying to use a RelativeLayout to display an image on the left side, and 3 text views, one below another, to the right of the image. Similar is explained here: http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html. The problem I'm having is that the 3rd text view does not display.
My code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="2dip">
<ImageView android:layout_width="96dip"
android:layout_height="96dip" android:layout_alignParentTop="true"
android:layout_alignParentBottom="true" android:layout_marginRight="2dip"
android:id="#+id/myIcon" android:src="#drawable/icon" />
<TextView android:id="#+id/Line1" android:layout_width="fill_parent"
android:layout_height="30dip" android:layout_toRightOf="#id/myIcon"
android:layout_alignParentRight="true" android:text="Line 1" />
<TextView android:layout_width="fill_parent"
android:layout_height="30dip" android:layout_toRightOf="#id/myIcon"
android:layout_below="#id/Line1"
android:text="Line 2" android:id="#+id/Line2" />
<TextView android:layout_width="fill_parent"
android:layout_height="30dip" android:layout_toRightOf="#id/myIcon"
android:layout_below="#id/Line2"
android:id="#+id/Line3" android:text="Line 3" />
</RelativeLayout>
It's probably something really simple or obvious that I'm either doing wrong or forgetting to do, but I could really use a fresh pair of eyes taking a glance at this.
Thanks!
Try adding
android:layout_alignParentTop="true"
to your Line1 TextView. I'm not sure if this will fix your issue, but it's something to try.
Also, in regard to the '+' sign for IDs: These are for your id declarations. So, in all of your elements, you would have something like this:
android:id="#+id/SomeId"
Which is what you have. However, you do not need them for reference purposes. So
android:layout_below="#id/SomeId"
would be correct. Think of the '+' as declaring an ID and for referencing it, you do not need it.
Also: Try placing some background colors behind your views to make sure they are showing up how you expect them to. That's a debug tip that I use constantly.

Dynamically sizing Views as a percentage (or similar)?

To use as an example: lets say that I have 2 EditTexts and one Button that I'm using as a login form. I want the EditTexts to be the same size, one after the other, with the login Button half their widths. Something like this:
The only way that I've been able to find to make the button 1/2 the width (but still maintain it's dynamic sizing) is to use a TableLayout with an empty view as the first field. Something like this:
<TableLayout
android:stretchColumns="0,1"
android:shrinkColumns="0,1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/login_EditText_password">
<TableRow>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="#string/login_login"
android:id="#+id/login_Button_login"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
That feels like a god-awful hack and there has GOT to be a better way. Do you know of one?
Usually layout_weight is used to achieve percentage like behavior. But this is usually within a parent view. You could make an empty view to take up the other half in this situation, but it's a strange use case to want the button to be half the width of the above fields.
Edit, here's an example:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/login_EditText_password"
android:orientation="horizontal">
<View
android:layout_width="0dip"
android:layout_height="0dip"
android:layout_weight="1" />
<Button
android:text="#string/login_login"
android:id="#+id/login_Button_login"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>

Categories

Resources