TableLayout alignment with icon - android

Here is my XML.
I want to align the icon to the left and the text should appear right next to the icon, with some space, like you see elsewhere. But the text is showing up in the center. (or right aligned to the 2nd column, in two column layout)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="#android:color/white"
android:layout_margin="5dp"
android:stretchColumns="2"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/events_header"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:drawable/list_selector_background"
android:clickable="true"
android:padding="5dip">
<ImageView android:id="#+id/ImageView02"
android:src="#drawable/event_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:layout_margin="5dp">
</ImageView>
<TextView
android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="View Events"
android:layout_gravity="left"
android:textSize="21dp"
android:textStyle="bold"
android:background="#android:color/black"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
</ScrollView>
This is how it displays:
[ * View Events ]
is the icon. I want to display like this.
[ * View Events ]

Try changing android:stretchColumns="2" to android:stretchColumns="1" because column index starts with 0. So if you only have two columns then the second column stands at index 1.

Related

Android Table row, cannot center text

i have following layout code:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- APP NAME -->
<TableRow
android:id="#+id/table_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#2d9adf"
android:gravity="center_vertical"
android:padding="5dip" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center_horizontal"
android:text="#string/app_name"
android:textColor="#fff"
android:textSize="16sp" />
</RelativeLayout>
</TableRow>
Problem is, that result is not centered (see image below):
How can I solve it please?
Very easy fix to this. You need to change your RelativeLayout to have the correct dimensions:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
That way it will stretch the full size of the TableRow at the top. Then you can add this to your TextView:
android:layout_centerInParent="true"
to center the TextView in the RelativeLayout, which is spanning the TableRow.

Android TableLayout height does not fills the whole screen

I have a linear layout with just a single TableLayout in it.
The Table Layout further has two rows with two columns each.
First Table Row has two Images.
Second Table Rows has two buttons.
But this does not show up on the complete screen, rather only shows on the first half or maybe depends on the image height. Both the images are actually same file, but shown with different Widths.
Help please...
here is the Layout file
<?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="vertical">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:stretchColumns="*">
<TableRow
android:layout_height="fill_parent">
<ImageView
android:id="#+id/tp_image"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.9"
android:scaleType="fitXY"
android:src="#drawable/images" />
<ImageView
android:id="#+id/s_image"
android:src="#drawable/images"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:layout_weight="0.1"
/>
</TableRow>
<TableRow >
<Button
android:id="#+id/button_LC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button_LC"/>
<Button
android:id="#+id/button_RC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button_RC"/>
</TableRow>
</TableLayout>
</LinearLayout>
set
<TableRow
android:layout_height="0dp"
android:layout_weight="1" >
to both table rows or just to the first row.

RelativeLayout views overlapping

Desired layout is a header, with two frames below (to contain fragments later) and buttons fixed at the bottom of the screen:
Header Text
----------------------
frame 1 | frame 2
----------------------
btn 1 btn 2 btn 3
I pretty much have this sorted (xml at end), with one problem... the two frames are overlapping the buttons.
I've done some searching on the issue and found this, but all that does is change my problem from the frames overflowing the buttons to the frames overflowing the header.
I also tried setting the buttons to appear below the frames instead of aligned to the bottom of the parent, but that just pushed them off the screen.
current layout xml:
<?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"
android:orientation="vertical" >
<TextView
android:id="#+id/fdname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:gravity="center"
android:text="No department info has been entered yet"
android:textSize="25dp" />
<TextView
android:id="#+id/fdaddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/fdname"
android:gravity="center"
android:text="address"
android:textSize="15dp" />
<TextView
android:id="#+id/horizontalline"
android:layout_width="match_parent"
android:layout_height="2dip"
android:layout_below="#id/fdaddress"
android:background="#ff23cf"
android:gravity="center_vertical"
android:paddingBottom="2dip"
android:paddingTop="2dip" />
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/leftpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/verticalline"
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#ff23cf"
android:gravity="center_horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<FrameLayout
android:id="#+id/rightpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" >
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/EventViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_event_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/MemberViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_member_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/AttendanceViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_atnd_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</RelativeLayout>
Try to declare the LinearLayout containing your buttons before the LinearLayout containing your frames, preserving the android:layout_alignParentBottom="true" attribute.
Then, to your frames container, add an above constraint:
android:layout_below="#id/horizontalline"
android:layout_above="#id/buttons"
This way should force your frames to be last thing to be drawn on the screen, thus filling the remaining space.
Hope it works!
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
Why is your layout_height="match_parent"? You'll need to specify some height, or wrap_content.
http://developer.android.com/resources/samples/ApiDemos/res/layout/relative_layout_1.html
Refer to this for top layer/alignment of you three views.(three text views in example)
Then use linearlayout with orientation horizontal, for your two frames, and same again for buttons
--
so basically to the frames id add alignbottom true , and provide
android:layout_above
android:layout_below
parameters

how to insert table between two realtive layouts?

I have created a relative layout under which i created 3 relative layout
1-for top textviews
2-for buttons at the bottom
3-for he scroll view
now i want to insert a table below 1st relative layout and above 2nd relative layout,which layout should i use? table has 3 columns first cloumn and secound column as text view and 3rd colums as edit text,the data being displayed on the table is coming from database.
so i wanna know which layout shall i use? and how can i display the table?
Its better to use LinearLayout
See this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="5dp">
<ScrollView android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:fadingEdge="none" android:focusable="false">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:stretchColumns="*">
<TableRow android:gravity="center" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></TextView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></TextView>
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></EditText>
</TableRow>
<TableRow android:gravity="center" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></TextView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></TextView>
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Series"
android:layout_gravity="center"></EditText>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Note: You can also set width of TextView and EditText and more importantly you can set the
gravity and align it accordingly.
Also, LinearLayout is useful when you need to add the rows dynamically.It will be
useful to you as you are getting the data from database

GestureOverlayView causes strange TableRow blending

Simple problem:
With the XML layout shown below, I have some views wrapped in a GestureOverlayView. As shown below, my first row is blended with the second row, as-if the first row is transposed right on top of the second.
Now when I take the GestureOverlayView out of the code and leave everything else as-is, my table looks fine - the rows are separate and not on top of each other.
I'm wondering why the rows overlap like that with the gestureOverlayView present?
Screenshot showing the problem: http://img413.imageshack.us/img413/4994/overlayblending.png
Thank you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<android.gesture.GestureOverlayView
android:id="#+id/gesturePage01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0">
<TableRow android:id="#+id/TableRow01" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="Connection info"
android:id="#+id/tvCon1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#F0F0F0"
android:textColor="#FF0000"
/>
</TableRow>
<TableRow android:id="#+id/TableRow02" android:layout_width="fill_parent" android:layout_height="wrap_content">
<ScrollView
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/tvMessages"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text=""
/>
</ScrollView>
</TableRow>
</android.gesture.GestureOverlayView>
</LinearLayout>
I went ahead and put my tableRow into a TableLayout and that fixed the problem.

Categories

Resources