How to get the right cells closer to left celss in TableLayout? - android

I have the following code:
<TableLayout
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shrinkColumns="*"
android:stretchColumns="*"
android:layout_marginTop="15dp">
<TableRow
android:id="#+id/table_row1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<Spinner
android:id="#+id/spinner_project2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
<TableRow
android:id="#+id/table_row2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Very long test"/>
<Spinner
android:id="#+id/spinner_project2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
</TableLayout
It basically creates the following table:
text [spinner]
very long text [spinner]
I want the spinner to be closer to the text so I don't want the row to be 50-50. Rather I want to take the longest string in the text and this will be the size of the cells in the first column. I will get:
text [spinner] <Nothing here>
very long text [spinner] <Nothing here>
I tried to use marginLeft but it didn't help. I also tried use weights=3 with inserting empty text-view. It looks better but then I get empty textview in the middle of the code. I'm sure there is a way to do it. How can I do it?

Use android:shrinkColumns="1" for TableLayout currently you are using * and remove android:stretchColumns="*"
<TableLayout
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:layout_margin="15dp"
>
<TableRow
android:id="#+id/table_row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
<TableRow
android:id="#+id/table_row2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Very long test"/>
<Spinner
android:id="#+id/spinner_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
</TableLayout>
Note : Indexing starts from 0 i.e if you want to shrink/stretch 1st
column you have to use 0 not 1

Related

TableLayout enforce text in one line

I have a little problem with my table layout.
I have two columns
column1 | column 2
The column1 content is static and indicates a property e.g. "locations", "products".
The second column is populated using an adapter.
My problem is that the text view breaks the word in column1. I want the word of column1 to be displayed in exactly one line (enforce that the line does not break). And the size of the second column has to adapt.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:shrinkColumns="*"
android:stretchColumns="*"
>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="products"
android:padding="5dp"
/>
<TextView
android:id="#+id/newID"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Branche"
android:padding="5dp"/>
</TableRow>
</TableLayout>
I tried to set
android:singleLine="true"
However the device (S3) only shows the first few letters and ...
I also tried to set a layout_weight. However I was not able to fix this issue.
Thanks for your help
Try this code:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:shrinkColumns="*"
android:stretchColumns="*">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="products"
android:padding="5dp"/>
<TextView
android:id="#+id/newID"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:text="ancheBrrancheBraeBrancheBrancheBrancheBrancheBrancheBrancheBrancheBrancheBranche"
android:padding="5dp"/>
</TableRow>
</TableLayout>
If you use a layout_weight attribute, you should remeber about the fact that layout_width must be set with 0dp (in this case of course).

Place Button just after end of TextView in multilline TextView?

I'm developing an Android application that contains some text view and button.
I need to put Button just after the text view. When my TextView is single line that's working well. But when using multiple line of text view , my button was placed to the end of line 1.
How to place button in the right position (after last line in the text view)?
after edit :
this is my xml , I use it in my code and generate it dynamically .
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow android:id="#+id/tableRow1" >
<Button
android:id="#+id/ayehPlace_btnCounter"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ayeh_counter"
android:text="" />
<TextView
android:id="#+id/ayehPlace_txtAyeh"
android:layout_width="wrap_content"
style="#style/ayehPlace_txt"
android:layout_height="wrap_content"
android:text="" />
</TableRow>
</TableLayout>
Use Table Layout instead .... It worked for me ..
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text" />
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
</TableRow>
</TableLayout>
Use RelativeLayout and add
android:layout_toRightOf="#+id/textviewid"
to Button.
I'll prefer to use table layout instead..it makes the UI uniform and adjusts automatically
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow android:id="#+id/tableRow1" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main Status "
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/retentionMainStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLICK ME" />
</TableRow>
</TableLayout>
I think, you need to use TableLayout together with android:gravity="bottom". Try it.

Android, setting column sizes in TableLayout

So, I'm creating TableLayout from code by inflating layout files. I'm trying to get first row spanning over two columns, and each next row contains two TextViews: key and value. Problem is that value can be quite long, so I was playing around with settings android:stretchColumns, android:shrinkColumns in TableLayout xml. Now Key column and Value Column looks fine, but first, spanned, header is wider that screen size.
Current situation of my files looks like this:
tale_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<TextView
android:id="#+id/key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textStyle="bold"
android:layout_marginRight="10dp" />
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black" />"
</TableRow>
header_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_span="2"
style="#style/group_separator_style"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
</TableRow>
table.xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
</TableLayout>
Any ideas, what could be the reason? Setting attributes clipChildren and clipToPadding to true didn't help.
It looks like setting android:stretchColumns="1" and android:shrinkColumns="1" solved the problem

Android question about TableLayout and ellipsis

I'm having a problem with my TableLayout. It consists of two columns and multiple rows. When the TextView of the second column contains text of a longer width, then it pushes the TextView's in that column (in the below rows) off of the screen (to the right). Instead, I want it to keep the text to the left and have it cap the text at the end with an ellipsis. Can anyone see what's wrong with my XML?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#4096cc" >
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/roundedshape"
android:layout_margin="5dp"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Server Name"
android:textStyle="bold"
android:padding="10dip" />
<TextView
android:id="#+id/txtServerName"
android:text=""
android:gravity="right"
android:ellipsize="end"
android:padding="10dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:text="Status"
android:textStyle="bold"
android:padding="10dip" />
<ImageView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="10dip"
android:src="#drawable/icon" />
</TableRow>
.
.
.
</TableLayout>
</LinearLayout>
Depending on which column you want to put the cap on, you need to use
android:shrinkColumns=x
in your TableLayout where x is the index of the column you want to ellipsize.
You probably also want to set the maxLines on the TextView to 1 as well.

Align buttons inside a TableRow

I'm developing an Android application.
I have this:
<?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="200px"
android:orientation="vertical">
<TextView
android:id="#+id/gameTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:text="aaaaa"/>
<TextView
android:id="#+id/gameDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"
android:text="dddddd"/>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:text="#string/yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="#string/no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
I want to put playGame button in the left side of the center, and noPlayGame button in the right side of the center.
Now, both appear aligned to the left of the TableRow.
How can I do this?
Thank you.
EDIT: I've added the complete layout and the modifications suggested by Ashay.
2nd EDIT: THE SOLUTIONI've added to TableLayout the following: android:stretchColumns="0,1". Now the buttons are center aligned but they fill their entiry column!!!
I hope this helps:
<TableRow
android:id="#+id/tableRow1"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/stringtxt1"></Button>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:text="#string/stringtxt2"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"></Button>
</TableRow>
I posted my code, I hope that will help others users to resolve theirs problems (center content). I wanted to center two buttons in table row, here is my code, which solve this problem:
we indicate which columns will be stretched in prop android:strechColumns="a,b.." using comma-delimited list
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1" >
<TableRow>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button1Name"
android:layout_gravity="right"/>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button2Name"
android:layout_gravity="left"/>
</TableRow>
</TableLayout>
I hope that it will help. Sorry for my english :/
For centering a single button on a single row:
<TableRow android:id="#+id/rowNameHere"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center">
<Button android:id="#+id/btnDoStuff"
android:text="Do Stuff" />
</TableRow>
After reviewing the above answers, I grabbed a few things from each answer and this worked for me.
I added two dummy textviews to align my button in the center.
<TableRow>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
<Button
android:id="#+id/buttonSignIn"
android:text="Log In"
android:layout_height="wrap_content"
android:layout_weight=".50"
android:layout_width="0dip"
/>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
</TableRow>
Remove this line <TableRow android:layout_gravity="center">
And give android:fill_containt in table row for both height & width
EDITED ANSWER:
Well, I'm so sorry for the last posts spelling mistake
Through XML it seems impossible for TableLayout. You need to set this UI in code in oncreate.
In your java file you can set those by using below.
playGame.setWidth(ScreenWidth()/2-var);
noPlayGame.setWidth(ScreenWidth()/2-var);
here var can be used to set the distance between these 2 buttons like 10 or 30.
Also, your xml will get change as follows:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:text="yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<Button
android:text="no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</TableRow>
</TableLayout>
The method ScreenWidth() can be used for getting width of the screen through these methods
private int ScreenWidth() {
DisplayMetrics dm=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
String width=""+dm.widthPixels;
return Integer.parseInt(width);
}

Categories

Resources