How to vertically align a textview field using table row in Android - android

I have this output
http://www.cubixshade.com/images/align_row.jpg
I want first field that is date field to be align vertically center?
and what should i use use to add some space from left or right in other field also?

You can set android:gravity="center_vertical" property to TableRow to align its child vertically center.
Also you can use android:layout_marginLeft property or android:layout_marginRiight property to put some margins from left and right similarly you can put margin to top and bottom using android:layout_marginTop or android:layout_marginBottom.
If you want to stretched column then you can use the android:layout_weight property to define the weight of the column.
For reference you can see below example with 2 columns
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/TextView01"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Male"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/etNoOfMale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Female"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/etNoOfFemale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
</TableRow>
</TableLayout>

U can use tags likes below in your xml file page to align proper, If can give the details about the pblm you are facing I can give more explanation.
android:layout_marginLeft="25dp"
android:layout_below="#+id/imageView1"
the first code gives a margin of 25dp from the left and the second code just align the filed to right under the imageview1.
And there is one another method
Just right click on the text-view or anything you added in the design page the select the Other properties->layout parameters->then select the item you need[it contains all the align properties.
Hope this one help you. Thank you

Related

Android Nested LinearLayout, Gravity not having expected results

Having a problem with nested LinearLayouts to use as a custom row in a ListView.
App is a kind of internal corporate phone book and this row will be repeated in the ListView.
The "Details Witheld" on the right looks fine when gravity is set to left for it, but if gravity is set to center then it appears half off the page.
I'd guess my parent LinearLayout is too wide for the screen but it's set as fill_parent so I don't see how.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
Full XML source is below.
Aligned Left looks like this and I'd like Details to be a space in so it's centered above the Witheld.
Aligned Center looks like this
Full XML Source
<?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"
android:orientation="horizontal" >
<!-- Left side name & post / parish -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:orientation="vertical" >
<TextView
android:id="#+id/txtrowname"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Smtih, Mr John"
android:textSize="24sp"
android:textColor="#color/darkblue_text"
android:textStyle="normal" />
<TextView
android:id="#+id/txtrowpost"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12 Some Street, SomeTown. SS11 1SS"
android:textSize="12sp"
android:textColor="#000000"
android:textStyle="normal" />
</LinearLayout>
<!-- Details withheld on right -->
<TextView
android:id="#+id/txtrowwitheld"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:text="Details Witheld"
android:layout_weight="20"
android:textSize="18sp"
android:gravity="center"
android:lines="2"
android:maxLines="2"
android:textColor="#FF0000"
android:layout_marginBottom="2dp"
android:textStyle="normal" />
</LinearLayout>
Image with layout_gravity as suggested by Ramesh
try layout_gravity in place of gravity that will work and dont use line="2". it will automatically fit into 2 lines if width exceeds.
I ended up just making do without it being centered.

TextView pushes buttons off screen with HorizontalScrollView

I am aiming for a layout similar to the native calculator app. I want text to trail off the left of the screen without moving the buttons on the right. Currently my text moves to the left until filling the screen at which point the buttons are pushed off the right edge.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none" >
<TextView
android:id="#+id/display_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#android:color/white"
android:textIsSelectable="true"
android:textSize="30sp" />
</HorizontalScrollView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/delete_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onDelete"
android:text="#string/delete_button" />
<Button
android:id="#+id/equate_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onEquate"
android:text="#string/equate_button" />
</LinearLayout>
</LinearLayout>
You don't need to put your TextView into a HorizontalScrollView, it will automatically become scrollable when the text exceeds the bounds. See docs: http://developer.android.com/reference/android/widget/TextView.html#attr_android:scrollHorizontally
Just add android:scrollHorizontally="true" to the TextView in the layout.
You may also need to change the text view's layout_weight to 0 or set its layout_width to something fixed (like 100dp).
To get the text to go right-to-left, set the gravity on the TextView to be android:gravity="right|center_vertical"
I also humbly refer you the source of the calculator app you are trying to emulate: https://github.com/android/platform_packages_apps_calculator/tree/master/src

How to create Textview in left side and two button in right side in same line?

In Android lay out how to create a TextView in leftside and two button on right side with same line.
Which layout is better to use for this layout Table Or Relative ?
You can use a LinearLayout to achieve this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_weight="1"
android:text="a text"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1">
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2">
</Button>
</LinearLayout>
Its is better to use Relative Layout for this kind of view. use android:layout_alignParentRight="true" to Align Right and android:layout_alignParentLeft="true" to Align Left. e.g
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Large Text"
android:textColor="#76D4F7"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
The easiest would be to use a LinearLayout (orientation horizontal) as pointed out in the previous answer. You can also set the property under Layout Weight to 1 for each button and textview. Then set the layout width for all those object to 0. This will enable you to proportionally scale how much of the area is taken up horizontally by each object. So for example if you set the Layout Weight on the Textview to 2 and each button to 1, then the textview will take up 50% of the space horizontally (2/(2+1+1)). This makes it easier to scale the objects on different device and hopefully starts to address the question of which is the best layout to use in this case.

Center multiple items in a RelativeLayout without putting them in a container?

I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.

How to create column-like layout for ListView rows?

I have a relative layout which looks like this:
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/nameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:text="Symbol"
/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100"
/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:text="1.3"
/>
</RelativeLayout>
How can I get the company name to line up next to the number 1.3?
Following up on Mayra's answer, here's one way to do it using layout_weight:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:padding="5dip"
android:layout_weight="0"
android:text="Code"
/>
<TextView
android:id="#+id/middle_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:padding="5dip"
android:layout_weight="1"
android:text="Name of Company"
/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:gravity="right|center_vertical"
android:layout_weight="0"
android:text="1.3"
/>
</TableRow>
</TableLayout>
It's not clear exactly what you want to have happen, but here are a few options:
If you want columns to be aligned across rows, you might consider using a TableLayout.
You can also use the "weight" atribute to affect what percentage of the screen each TextView takes up. If you assign a value of 1 on the left-most text view, and 0 on the other 2, this will cause the left text view to take up all the extra space, and thus push the middle text view to the right. This will probably cause the middle text view to look right aligned though. You could instead give the left one 20%, the middle one 50% and the right one 30% by assign 2, 5 and 3.
You could also just set an explicit size for the text views (in dpi), but this might be problamatic with different sized screens.
I agree with Mayra! Use the TableView, you'll get the formatting your looking for as well as keep almost all functionality of a ListView (scolling, and list oriented functionality)

Categories

Resources