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);
}
Related
I am trying to make a listview in Xamarin with 3 columns, having 1 imageview and 2 textviews. The imageview should be aligned to the left (working), the first textview should be in the middle, all aligned under each other, so that all first letters align. and the 3rd column should be all the way on the right and this is not working, the value of the 3rd column is directly set behind the text of the 2nd column.
The text should be centered verticaly in the row, but this is also not
working although the android:gravity="center_vertical" is set.
My code :
Listview with everything wrong displayed as shown :
Try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_item_menu"
android:layout_width="fill_parent"
android:layout_height="50dip">
<ImageView
android:id="#+id/layout_item_menu_image"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="#drawable/menu_image" />
<TextView
android:id="#+id/layout_item_menu_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/layout_item_menu_image"
android:layout_marginRight="20dp"
android:text="TEXT 2"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/layout_item_menu_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/layout_item_menu_image"
android:layout_toLeftOf="#id/layout_item_menu_text2"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:text="TEXT 1"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
Since there is problems with posting your code sample, I'll post this layout that may be adapted to your situation
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip">
<Button
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
<RelativeLayout
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"/>
<TextView
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/tv_text1"
android:gravity="right"/>
</RelativeLayout>
</RelativeLayout>
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.
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 have built a layout that can display a picture on three different areas. It didn't matter when I used an imageview but somehow it does not work with a surfaceview. There are basically three areas like below, and the third area(or area no.3) is where I want to put a picture through surfaceview
http://imageshack.us/m/202/3189/000hjb.jpg
A picture made by SurfaceView could be displayed on the area no.1, but not on 2 and 3 like below.
http://img215.imageshack.us/img215/9891/111lcv.jpg
Below is a screenshot that I tried with an imageview, and they had no problem.
http://imageshack.us/m/199/7231/222mlr.jpg
I have no idea to figure out. What I want to do is putting a picture made by SurfaceView on area 2 and 3 whose id is tableRow_cardImage - TableRow - and assistant_cardboard - LinearLayout.
If anyone has an idea to figure out this, would you please help me?
Thanks in advance and below is my xml code of layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:id="#+id/header" android:layout_height="wrap_content" android:layout_width="match_parent">
<TextView android:id="#+id/header_life_title" android:textSize="20sp" android:text="Life: " android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<TextView android:id="#+id/header_life_value" android:textSize="20sp" android:text="20" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<Button android:text="Inc." android:id="#+id/header_btn_inc" android:layout_width="wrap_content" android:layout_height="35dp" android:layout_gravity="center_vertical">
<Button android:text="Dec." android:id="#+id/header_btn_dec" android:layout_width="wrap_content" android:layout_height="35dp">
<Button android:text="Put L." android:id="#+id/header_btn_putLand" android:layout_width="wrap_content" android:layout_height="35dp">
<Button android:text="Remove L." android:id="#+id/header_btn_removeLand" android:layout_width="wrap_content" android:layout_height="35sp">
<LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:id="#+id/land_space">
</LinearLayout>
</LinearLayout>
<ScrollView android:id="#+id/scrollView1" android:layout_height="wrap_content" android:layout_width="match_parent">
<LinearLayout android:id="#+id/linearLayoutInScrollview"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/cardboard">
<LinearLayout android:layout_height="40dp"
android:layout_width="wrap_content" android:id="#+id/layout_menu">
<Spinner android:id="#+id/spinner_creature"
android:layout_height="wrap_content"
android:layout_width="130dp">
<Button android:id="#+id/btn_creature"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Cast">
<Spinner android:id="#+id/spinner_noncreature"
android:layout_height="wrap_content"
android:layout_width="130dp">
<Button android:id="#+id/btn_noncreature"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Cast">
<Button android:id="#+id/btn_delete"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Del."></Button>
</LinearLayout>
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardImage">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardData">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardImage2">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardData2">
</TableLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/assistant_cardboard"
android:orientation="vertical" >
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:id="#+id/imageView1" android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
While I was working on it, I think this is the problem of using SurfaceView with ScrollView. Since SurfaceView is a view that can even draw the entire screen(or over the screen), I think android doesn't want to have it in the inside of ScrollView.
You are correct, a SurfaceView is not meant to be placed inside a ScrollView. This confirms and this gives you more advice on what you can do instead.
I am trying to make a relativeLayout with three textViews in a column on the left and two buttons next to each other on the right. The problem is, when the first textView is short "i.e. 3 or 4 characters" the textViews below get wrapped whenever they are longer then the first textView. I don't want this and want them to go all the way to the buttons if possible. I know I'm probably missing a parameter or something similar. Can anybody help me?
<LinearLayout android:id="#+id/LinearLayout02" android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/RelativeLayout_class1" android:visibility="visible">
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:id="#+id/TextView_class1_name" android:textColor="#color/Button_Text1"></TextView>
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_name" android:layout_height="wrap_content" android:layout_alignLeft="#+id/TextView_class1_name" android:layout_alignRight="#+id/TextView_class1_name" android:id="#+id/TextView_class1_building" android:textColor="#color/Button_Text1"> </TextView>
<TextView android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_building" android:layout_alignLeft="#+id/TextView_class1_building" android:layout_alignRight="#+id/TextView_class1_building" android:id="#+id/TextView_class1_room" android:textColor="#color/Button_Text1" android:layout_height="wrap_content" android:width="0dip" android:layout_width="wrap_content"></TextView>
<Button android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/Button_class1_map" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_map" android:layout_centerVertical="true"></Button>
<Button android:layout_toLeftOf="#+id/Button_class1_map" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="#+id/Button_class1_map" android:layout_alignBottom="#+id/Button_class1_map" android:id="#+id/Button_class1_edit" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_edit" android:layout_centerVertical="true"></Button>
</RelativeLayout>
</LinearLayout>
Why not just use a table layout? It might be a little easier to design because you are talking about columns and rows. The problem with relative is that its going to change based on the others, if you don't want this to happen then using a table layout with x rows and y columns will be a lot easier.
Along with this, using table layout allows you to specific zeroing-in in a particular column or having a particular element consume more than one column.
I have experienced something similar when creating a home screen widget. As widgets have limited options, a TableLayout could not be used. I reverted to something that translates as follows to your situation:
<?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="horizontal" >
<LinearLayout
android:id="#+id/RelativeLayout_class1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:visibility="visible" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="shrt" >
</TextView>
<TextView
android:id="#+id/TextView_class1_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="quite a bit longer" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1" >
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2" >
</Button>
</LinearLayout>
</LinearLayout>