CODEWITHSUNDEEP
androidtextviewtablelayoutandroid-tablelayout
Amrmsmb
Amrmsmb

Reputation: 1

how to align views inside tablelayout

in the below xml layout i want to make a table layout that hosts some textviews. the results of the below posted xml layout is four textview just beside each other without spacing. i know that i can use margins to a bit distant each view from the other, but i want to do that spacing between the views using gravity orientation layout-gravity.

what i want to have as a result is 

odometer:value space space space space space tfu:val

i want the tfu to be displayed alwasy at the same position regardless of the number digits of the value of the odometer. in other words, consider the following example which i DO NOT want to have

odometer:1234567                            tfu:1234567
odometer:1234567890                            tfu:1234567

what i want is, regardless of the number of the digits the odometer has the tfu textview must be always displaed at the sam position as in the following example:

odometer:1234567                            tfu:1234567
odometer:1234567890121223434                tfu:1234567

please tell me how achieve that.

code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context=".MainActivity">

<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="*"
android:collapseColumns="*"
android:orientation="vertical">

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_label_odometer"
        android:text="odometer: "/>
    <TextView
        android:id="@+id/tv_odometer"
        android:text="val"/>
    <TextView
        android:id="@+id/tv_label_tfu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="tfu: "/>
    <TextView
        android:id="@+id/tv_tfu"/>
</TableRow>
</TableLayout>


</RelativeLayout>

Upvotes: 0

Views: 581

Answers (3)

Nandhakumar N
Nandhakumar N

Reputation: 91

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_label_odometer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="odometer: " />

            <TextView
                android:id="@+id/tv_odometer"
                android:layout_width="0sp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="1234567" />

            <TextView
                android:id="@+id/tv_label_tfu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="tfu: " />

            <TextView
                android:id="@+id/tv_tfu"
                android:layout_width="0sp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1234567" />
        </TableRow>
    </TableLayout>

</RelativeLayout>

Upvotes: 1

starkshang
starkshang

Reputation: 8538

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context=".MainActivity">

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:shrinkColumns="*"
    android:collapseColumns="*"
    android:orientation="vertical">

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
        <TextView
            android:id="@+id/tv_label_odometer"
            android:text="odometer: "/>
        <TextView
            android:id="@+id/tv_odometer"
            android:text="val"/>
    </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
        <TextView
            android:id="@+id/tv_label_tfu"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="tfu: "/>
        <TextView
            android:id="@+id/tv_tfu"/>
        </LinearLayout>
    </TableRow>
</TableLayout>
</RelativeLayout>

Add an LinearLayout to wrap two TextView and set its width to 0dp and layout_weight to 1.then two linearlayout will have half of its parent's width,I think this can solve your problem.

Upvotes: 1

Virthuss
Virthuss

Reputation: 3213

Try this instead

<RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                    >

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"/>

                    </RelativeLayout>

This is the one I'm using. One on the right and one on the left. Just repeat it if you want more, and use the margin to adjust the space.

Upvotes: 1

Related Questions