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.
Related
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
I have a table that has a border around each of the table rows. I get a problem with the border part when text in one column goes onto a second line, while the text in the other column doesn't. That causes the row that doesn't have the text wrapped onto a second line to be be shorter and a black background on the second line. How can I get that row to be the same height as the other row?
My code is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#013567" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*" >
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<TextView
android:id="#+id/textView2"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="long text abc 123 ong tex ong tex"
android:textColor="#fff" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="short text"
android:textColor="#fff" >
</TextView>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<TextView
android:id="#+id/textView2"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="short text"
android:textColor="#fff" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="long text abc 123 ong tex ong tex"
android:textColor="#fff" >
</TextView>
</TableRow>
</TableLayout>
</ScrollView>
Example:
add following properties to your TextView, not your TableRow:
android:layout_height="match_parent"
or
android:layout_height="fill_parent" (deprecated)
Try setting the following to your TableRow:
android:layout_height="fill_parent"
add new line to the en of 'short text'
programmatically:
\n
xml:
simply hit enter in your XML code
There is a couple of ways to fix this,
add a FrameLayout around each text with android:layout_height="match_parent".
or
change your stying to be applied to the table, as e.g.
How to style a tablelayout in android
setting the Table background to be the blue and borders to be black.
I want to make a table layout as shown in the below screen:
I am able to make this UI using the code. But I want to make it using the XML. I tried the following approach.
I tried to make a tablelayout which will have header and title. Now I have two row below title which is getting repeated.
So I made these two rows in separate XML file named row1 and row2. But Now I don't know how to integrate these three in the code. I know there is method LayoutInflater.inflate() to do it but I have two rows with diff kind of layout. See below the code for two rows. Please suggest What approach I should follow to make this kind of UI.
ROW_1.xml:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row"
android:minHeight="30dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/light_grey"
android:clickable="true"
>
<TextView android:id="#+id/tv1"
android:text="column1"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="#+id/tv2"
android:text="column2"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="#+id/tv3"
android:text="column3"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
</TableRow>
ROW_2.xml
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row"
android:minHeight="30dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/light_grey"
android:clickable="true"
>
<TextView android:id="#+id/tv1"
android:text="short description text for Title 0 comes here"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:gravity="center"
android:textColor="#color/black"
/>
</TableRow>
from looking at the image i would suggest taking the list view route. have your layout as
R1Col1 R1Col2 R1Col3
R2 Looooong Col1
this should workout well for you.
UPDATE
you list_item.xml should look something like this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView android:id="#+id/tv1"
android:text="column1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/tv2"
android:text="column2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/tv3"
android:text="column3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView android:id="#+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="short description text for Title 0 comes here" />
</LinearLayout>
here is a sample to learn how to populate a ListView
ListView Example
Why you need two different rows ?
You can integrate two rows in one Xml and so you have only one row to add in table view
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.
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);
}