Android table layout issue caused by vertical divider

Question

following is my layout for Android App,

I've tried the table layout, It will be fine if I don't add the vertical divider. but the problems are: the images are not right align the center, caused by my vertical divider(linear layout). here is my sample code:

<TableLayout android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:stretchColumns="*"
             android:layout_centerHorizontal="true"
             android:id="@+id/tableexample"

             android:showDividers="middle" android:divider="?android:attr/dividerVertical"
             android:layout_weight="1">
    <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tableRowContainer1"
            >

        <LinearLayout  android:layout_width="0dp" android:orientation="vertical"
                         android:layout_height="fill_parent"

                         android:layout_weight="1"
                         android:id="@+id/tableRowLayout1"
                         android:layout_centerHorizontal="true"
                         android:paddingTop="@dimen/example_list_padding"
                         >

            <ImageButton android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:id="@+id/exampleImg1"
                         android:background="@android:color/transparent"
                         android:src="@drawable/reconstruct_icon01"/>
            <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
                       android:textColor="@color/example_list_color"
                      android:layout_centerHorizontal="true" android:textSize="@dimen/example_font_size"

                      android:text="Caption1" android:layout_below="@id/exampleImg1"
                    />

        </LinearLayout>


        <LinearLayout  android:layout_width="1dp" android:layout_height="wrap_content"
                       android:orientation="vertical" android:minWidth="1dp"
                       android:gravity="center"
                       android:id="@+id/tableRowDivider1">
            <View
                    style="@style/Divider"
                    />
        </LinearLayout>
        <LinearLayout  android:layout_width="0dp" android:orientation="vertical"
                         android:layout_height="fill_parent"
                         android:gravity="center_horizontal"
                         android:paddingTop="@dimen/example_list_padding"
                        >

            <ImageButton android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:id="@+id/exampleImg2"
                         android:background="@android:color/transparent"
                         android:src="@drawable/reconstruct_icon02"/>
            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                      android:gravity="center_horizontal|center" android:textColor="@color/example_list_color"
                      android:layout_centerHorizontal="true" android:textSize="@dimen/example_font_size"
                      android:text="Caption2" android:layout_below="@id/exampleImg2"
                    />
        </LinearLayout>
    </TableRow>
     <TableRow>
        <TextView android:background="@color/example_list_divider_color" android:layout_height="1dp"
                  android:layout_span="3"
                />
    </TableRow>
   .....
</TableLayout>

Not in right position by the way, the top left one is padding programatically for testing. if I do so, the image is right on the position, but that will cause another problem: the image will transform.

the following is what I really want.

my ideal layout What is the proper way to render this layout? Thanks a lot!

The gravity tag on the TextView is pointless, the H and W are set to wrap content. I don't fully understand the problem, is it because the boxes (in first pic) are not aligned? — johng, Jul 24 '14 at 09:22
yes, you are right. I didn't remove some unused tag. The image will be aligned center if I remove the vertical divider. — Brad Huang, Jul 24 '14 at 09:35

score 3 · Accepted Answer · answered Jul 24 '14 at 10:16

i'm not sure but take a look at my layout i hope it will help you

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    tools:context=".MainActivity" >

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />

                    <TextView
                        android:id="@+id/myPRsTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:fontFamily="sans-serif-light"
                        android:gravity="center"
                        android:textColor="@android:color/white"
                        android:text="My PRs"
                         />
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />

                    <TextView
                        android:id="@+id/workoutsTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:fontFamily="sans-serif-light"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:gravity="center"
                        android:text="Workouts"
                        />
                </LinearLayout>
            </TableRow>

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

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1" >
                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv3"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:textColor="@android:color/white"
                    android:gravity="center"
                    android:text="Timers"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv4"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Statistics"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>
            </TableRow>

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

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv5"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Box Locator"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv6"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Something"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>
            </TableRow>

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

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

        </TableLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="This area is decorative image"
                android:textColor="@android:color/white"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

This example is perfect for my expectation. Thank you. – Brad Huang Jul 25 '14 at 03:18 — Brad Huang, Jul 25 '14 at 03:18

score 1 · Answer 2 · answered Jul 24 '14 at 09:41

1

Go for Grid View. It's quite easy and you will achieve what you wish, also, it is supported in all screen sizes. Refer: http://developer.android.com/guide/topics/ui/layout/gridview.html

answered Jul 24 '14 at 09:41

Kailas

7,350
3
47
63

thanks Kailas, from your answer, I got a similar answer from here:[http://stackoverflow.com/questions/12109126/android-gridview-row-dividers-separators](http://stackoverflow.com/questions/12109126/android-gridview-row-dividers-separators), I will try this. – Brad Huang Jul 24 '14 at 10:47

Android table layout issue caused by vertical divider

2 Answers2