I am trying to center two Text Views horizontally so that are next to each other at the top of the screen. I am doing this because one of the TextViews will be larger than the other. Here is my code
<TableRow
android:layout_gravity="center">
<TextView
android:layout_column="1"
android:padding="3dip"
android:gravity="right"
android:text="open" />
<TextView
android:padding="3dip"
android:gravity="left"
android:text="Ctrl O" />
</TableRow>
So you want your views next to each other and in the center of the screen like this?
| View1|reallylongView2 |
Generally try to avoid table rows unless you actually want to have a table. If you want what I've shown above, the best thing to do would be to have a single text view, particularly since the order of the text might need to change if you ever internationalize your app.
Otherwise try a relative layout parent, with a centered horizontal linear layout child, which in turn contains both of your text views like so:
<RelativeLayout
...
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
<TextView ... />
<TextView ... />
</LinearLayout>
</RelativeLayout>
Otherwise you need to clarify what you're looking for. A screenshot, or ascii art would be helpful.
I didn't quite get your question bit is this what you are looking for:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:text="open" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="3dip"
android:text="Ctrl O" />
</TableRow>
</TableLayout>
Related
I have created a table view inside of a list view in Android studio (see following code) and for various reasons I have used a text view and a checkbox as separate elements rather than just having the checkbox and attaching the text. The problem is the text is on the left of the screen/table but the checkbox is essentially centred where as I want it to be at the far right hand side.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_above="#+id/Button1"
android:id="#+id/scrollView"
android:background="#drawable/list">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/Maths"
android:id="#+id/Maths"
android:layout_column="1"
android:textColor="#ffffff" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/MathsCheck"
android:layout_column="2"
android:buttonTint="#00ffff"
android:onClick="MathsClicked"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/History"
android:id="#+id/History"
android:layout_column="1"
android:textColor="#ffffff"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HistoryCheck"
android:layout_column="2"
android:onClick="HistoryClicked"
android:buttonTint="#00ffff" />
</TableRow>
</TableLayout>
</ScrollView>
There are in reality a lot more of these text view and checkboxes but you get the idea. I have tried using padding and margins but that doesn't really work as it will work ok on some devices displays but I have to hard code it which isn't ideal. I've also tried the gravity feature which for some reason doesn't seem to do anything.
Any help appreciated
Is there a particular reason why you are using a TableLayout?
If not, the desired output (TextViews left-aligned, Checkboxes right-aligned) can be easily achieved with a RelativeLayout within a vertical LinearLayout.
Your XML would then look like this (including only the relevant parts, all other attributes of your code will remain unchanged):
<ScrollView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Edit:
If you want to place multiple checkboxes next to each other, you can do so by making their position reference each other, like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:id="#+id/checkbox1"
android:layout_alignParentRight="true" />
<CheckBox
android:id="#+id/checkbox2"
android:layout_toLeftOf="#id/checkbox1" />
<CheckBox
android:id="#+id/checkbox3"
android:layout_toLeftOf="#id/checkbox2" />
</RelativeLayout>
Note that you have to define the rightmost checkbox first, and the leftmost last.
Given the width of the checkboxes is identical (which they is in most cases), they will perfectly align.
I am really really sorry about my poor English
Here is what I made.
with
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/txtTImeRemain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginRight="50dip"
android:textColor="#ff000000"
android:gravity="center_vertical|left"
/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginRight="5dip"
android:textColor="#ff000000"
android:gravity="center_vertical|right"
/>
</LinearLayout>
My question is.
I want to align the left most words to being center of their row. regardless how many character they have.
Use a TableLayout, then you can set the layout_gravity for the different parts of the table row.
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>
I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.
The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.
you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>
I am currently working on my first android app. In a listview, I need to have the following organisation in each row:
On the left: one main icon on which takes the whole height of the row
On the middle: 2 texts, one below the other
On the right: 2 icons, one below the other
I end up with a row.xml file like this, but that does not work as I expect.
Do you know if something obvious is missing in this file ?
Thanks a lot,
Luc
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="48px"
android:layout_height="48px"
android:layout_marginRight="0dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="16dp"
android:textStyle="bold"
android:text="TITLE"
android:paddingLeft="5dp"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14dp"
android:text="DESCRIPTION"
android:paddingLeft="5dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right">
<ImageButton
android:id="#+id/button_modify"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/deleteicon"
/>
<ImageButton
android:id="#+id/button_delete"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/modifyicon"
/>
</LinearLayout>
In the right-hand-column LinearLayout, add
android:layout_width="wrap_content"
android:gravity="right"
That should make the icons should fall to the right (because of the gravity setting.)
Consider switching to RelativeLayout for a rule set like you describe. Using LinearLayouts may not work in all cases and will be less efficient than the RelativeLayout in terms of stack consumption.