Cannot add Vertical Divider to TableLayout Android

问题

I want to add verdical divider to my TableLayout.

My TableLayout looks like this:

But i want to add a line (divider) between two textviews in each row. I have tried placing a View between two textviews but it stretches the row.

Here is my code for the above layout:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/row"
android:layout_gravity="center"
android:showDividers="beginning"
android:orientation="horizontal"
android:stretchColumns="1"
android:background="@drawable/custom_background">

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Imran"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

<View
    android:layout_height="2dip"
    android:background="#FF909090" />

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Test"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

<View
    android:layout_height="2dip"
    android:background="#FF909090" />

<TableRow>
    <TextView
        android:text="Name"
        android:padding="3dip" />

    <TextView
        android:text="Test"
        android:gravity="left"
        android:padding="3dip" />
</TableRow>

I want to achieve the following layout:

Can anyone help me achieve the above layout using TableLayout or any other way?

回答1:

Here is the main xml file. You can use

    android:divider="@drawable/vertical_divider"
    android:showDividers="middle"

to display vertical divider in Linear layout. I have designed your layout, I don't like Table layout, You can try Linear layouts.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/rounded_corner"
android:orientation="vertical">


 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:divider="@drawable/vertical_divider"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/vertical_divider"
    android:orientation="horizontal"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/vertical_divider"
    android:orientation="horizontal"
    android:showDividers="middle">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="16dp"
        android:text="Lorem ipsum" />
   </LinearLayout>

   <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#FFCCCCCC"></View>

  </LinearLayout>

Here is the code of

rounded_corner.xml

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#00000000" />
  <stroke
    android:width="1dp"
    android:color="#bababa" />

  <padding
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp" />

  <corners
    android:bottomLeftRadius="25dip"
    android:bottomRightRadius="25dip"
    android:topLeftRadius="25dip"
    android:topRightRadius="25dip" />
  </shape>

Here is the code of

vertical_divider.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetBottom="2dp"
   android:insetTop="2dp">
   <shape>
      <size android:width="1dp" />
      <solid android:color="#FFCCCCCC" />
   </shape>
  </inset>

Place your color codes above :)

Output

回答2:

I think this solution is much easier.

Your TableLayout:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:divider="@drawable/table_divider"
    android:showDividers="middle"
    android:shrinkColumns="*"
    android:background="@drawable/rounded_corners">

    <TableRow
        android:divider="@drawable/table_divider"
        android:showDividers="middle"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column1"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column2"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column3"
            android:textStyle="bold" />
    </TableRow>

    <TableRow
        android:divider="@drawable/table_divider"
        android:showDividers="middle"
        android:weightSum="3">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column1" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column2" />

        <TextView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:padding="3dp"
            android:text="Column3" />
    </TableRow>

</TableLayout>

Your background drawable:

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#00000000" />
<stroke
    android:width="1dp"
    android:color="@android:color/black" />

<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />

And the shape for your dividers:

table_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="1dp" />
    <size android:width="1dp" />
    <solid android:color="@android:color/black" />
</shape>

Result:

If you do not need a background, you can do this in your TableLayout and in every TableRow:

android:showDividers="beginning|middle|end"

Result without the background:

来源：https://stackoverflow.com/questions/40708865/cannot-add-vertical-divider-to-tablelayout-android

标签

android

xml

android-layout

tablelayout

android-tablelayout