set the Columns of a TableRow in a TableLayout - android

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.

Related

Relativelayout position view between two views

so I'm currently working on an app on Android, and I got stuck on a specific problem regarding the RelativeLayout, which I can't find a way to solve.
I have in the layout three views as follows: TextView, Textview and ImageView (laid horizontally), here is a screenshot of the ios counterpart:
the Textview at the middle should stick to the first one, until he gets to the Imageview, when he does, he keeps his minimum size (wrap content), while the first Textview truncate.
On IOS I setted priorities to the constraint to accomplish this, but I can't figure out how to solve this on Android.
Here what I tried:
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/daily_movie_title_box">
<TextView
android:id="#+id/daily_header_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="New Text aawi oa ioawfwi"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"
android:lines="1"
android:singleLine="true"
android:layout_alignParentStart="true"
/>
<TextView
android:id="#+id/duration_text"
android:text="138 mins"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textSize="13sp"
android:textColor="#color/white"
android:lines="1"
android:layout_alignBaseline="#id/daily_header_textview"
android:layout_toStartOf="#+id/certification_icon"
android:layout_toEndOf="#id/daily_header_textview"
/>
<ImageView
android:id="#id/certification_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/uk12a"
android:layout_alignBottom="#id/daily_header_textview"
app:layout_aspectRatio="100%"/>
</android.support.percent.PercentRelativeLayout>
Which resulted in this (which is what I want):
But when I increase the first Textview text it's not behaving as I desire...
Is it possible to achieve the behaviour I want in Android (keep the middle Textview wrap content, and truncate the first one if needed)?
I will post an update if I find a solution eventually, just wanted to see if anyone can find an easy way to achieve this behaviour, as I suspect there is.
Thanks.
From my understanding, you want the first TextView to be as large as possible, without adding space after the text if the text is too small. The second TextView should only wrap_content, but it should fill the rest of the parent layout when the row doesn't. The ImageView is set to wrap_content.
I tested it with this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Shrinking text dddddddddddddddddddddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Midle column"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
</TableRow>
</TableLayout>
</LinearLayout>
The only problem is that if the second column has a incredibly large text, it will push the other views out of the parent. But in your case, I don't think that will be a problem. Otherwise, I think it does the job.
These are some suggested solutions:
You can use LinearLayout with horizontal orientation and weight for each component (TextViews and ImageView).
You can set the minimum and maximum text length for the second TextView.
But i prefer to apply the first solution. You can assign a weight for each component ( amount of space on the screen ) using:
android:layout_height

Decision: ListView or ScrollView

I need an Android Activity, which should show a field like a headline with an image and several dynamic generated items (1 to 100 I think) below it.
If I would not want the headsection to scroll, I would use a LinearLayout and put the headsection layout in it. Below this, I would add a ListView for scrolling the items, but I want the headsection to be scrolled to, as a top of the list.
Should I just put the stuff in a ScrollView or is there a better idea?
should show a field like a headline with an image and several dynamic generated items (1 to 100 I think) - use a ListView as it can recycle views (efficiency reason). Also, it's easier to change and maintain a list adapter than a complex UI structure.
If I would not want the headsection to scroll, I would use a LinearLayout and put the headsection layout in it. - Why not use a RelativeLayout that has the header on top and tha list occupies the rest of the height. This way you have the expected result.
but I want the headsection to be scrolled to, as a top of the list - then set the list header, or use different views in your listview and make your first item look different. More on this topic - search android listview different views in Google.
Either way to put it - use a ListView!
Have a ScrollView with a LinearLayout as it's child, and put your stuff into the LinearLayout. Remember ScrollViews can only have one child layout. That should work fine. Something like this:
ScrollView android:id="#+id/ScrollView02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/aboutFormLinearLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<TextView android:id="#+id/aboutFormVersionDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="true"
android:text ="Version: "
android:textSize="15sp"
android:textColor="#000000"/>
<TextView android:id="#+id/aboutFormVersion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="false"
android:textSize="20sp"
android:textColor = "#000000"
android:layout_marginBottom ="20sp"/>
<TextView android:id="#+id/aboutFormCompanyDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="true"
android:textSize="15sp"
android:text ="Company: "
android:textColor="#000000"/>
<TextView android:id="#+id/aboutFormCompany"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="false"
android:textSize="20sp"
android:textColor = "#000000"
android:layout_marginBottom ="20sp"
/>
</LinearLayout>

TextView shrinks TableLayout

I want to create a simple flag game. You are given the country name and you must then guess the correct flag. On my play screen, i have a TextView and a TableLayout with 4 images in 2 rows. These images are the same dimension.
The problem is: The TextView "shrinks" the second TableRow, so that the images no longer are equally big. If I remove the TextView, everything is fine.
I tried to debug in Hierachy Viewer, which told me that the property mMeasuredHeight of the second TableRow had a value of a very high value (16777526)
My play activity xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="4dp"
tools:context=".PlayTimeModeActivity" >
<TextView
android:id="#+id/tvFlagName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Hello"
android:textSize="50dp" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal" >
<TableRow>
<ImageView
android:id="#+id/ivFlag1"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag1" />
<ImageView
android:id="#+id/ivFlag2"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag2" />
</TableRow>
<TableRow>
<ImageView
android:id="#+id/ivFlag3"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag3" />
<ImageView
android:id="#+id/ivFlag4"
android:layout_margin="4dp"
android:contentDescription="#string/cdFlag4" />
</TableRow>
</TableLayout>
</LinearLayout>
Do you need additional info?
I wonder if this layout of images can be done better?
Edit:
The images are pretty high resolution
Try this:
Make the root of your layout (LinearLayout) have the following attributes android:layout_width="match_parent" and android:layout_height="match_parent"
Set your TableLayout to have android:layout_height="wrap_content". This will make it take up any remaining space on the screen after the text has been placed, rather than squashing the Hello text.
For each TableRow add android:layout_weight="1". This will make each row take up an even amount of space in the TableLayout.
For each ImageView in the table, set android:layout_weight="1". Again, this will set an even amount of space for each of your flags.
The flag should scale accordingly. If the scaling isn't correct, try different values in the ImageView for android:scaleType.

Uneven LinearLayout weight distribution

I have a LinearLayout that has four views layed out horizontally. The first and last component are a set size. For the inner two views I want to just share the available space 50:50. I set each to a weight of "1" but when the views are layed out, the views are different sizes depending on the content they hold.
Here is my layout xml for reference.
<?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="wrap_content">
<ImageView
android:id="#+id/status"
android:src="#drawable/white"
android:paddingRight="10dip"
android:layout_height="35dip"
android:layout_width="35dip">
</ImageView>
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/status"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/description"
android:text="Description"
android:layout_toRightOf="#id/name"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/time"
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/description"
android:textSize="25dip">
</TextView>
</LinearLayout>
Obviously these aren't the actual column names but I changed them for privacy purposes. This layout is used by a ListView which changes the text of each view to be whatever value its presented. The name and description fields should line up since they're both given 50% of the remaining screen but when the name is longer the description is shifted right. Why?
For the weight to be considered, the layout dimension needs to be 0 (zero)
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
I also recommend making your weight add up to either 1 (and use fractions) or 100.
So instead of 1 you would use either 50 or .5 for each view. The LinearLayout code will work properly with any weight sum, but it gets difficult if you want to modify your view later with additional sections.
Also, if you are not using relative layout, get rid of the toRightOf attributes. Less is more.
Try to use android:layout_width="fill_parent" instead of "wrap_content" in all children of LinearLayout. Or better yet, make such a structure in your xml:
<RelativeLayout>
<ImageView /> # status, fixed width, alignParentLeft="true"
<TextView /> # time, fixed width, alignParentRight="true"
<LinearLayout> # layout_width="fill_parent", toLeftOf="time" toRightOf="status"
<TextView /> # name, use layout_weight="1"
<TextView /> # description, use layout_weight="1"
</LinearLayout>
</RelativeLayout>
This should do what you want. Using LinearLayout instead of RelativeLayout might work too, but you have to experiment a bit (I believe using nested Layout, as in my example, will do the work).

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