Arun Anand
Arun Anand

Reputation: 21

How to create a tabalelayout with dynamic rows in a fragmant

Create a table layout with multiple columns and rows, columns are static but rows are dynamic and also show border.

enter image description here

Upvotes: 1

Views: 94

Answers (2)

Brainnovo
Brainnovo

Reputation: 1829

Use the following example to achieve what you want:

1) MainActivity.class

public class MainActivity extends AppCompatActivity {

private final String TAG = MainActivity.class.getSimpleName();
private TableLayout tl;
private Button b_delete;
private Button b_add_row;
private List<List<String>> data;
private List<String> sample;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    tl = (TableLayout) findViewById(R.id.tl);

    b_delete = (Button) findViewById(R.id.b_delete);
    b_delete.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            deleteTable();
        }
    });

    b_add_row = (Button) findViewById(R.id.b_add_row);
    b_add_row.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            data.add(sample);
            notifyDataSetChanged();
        }
    });

    sample = new ArrayList<>();
    sample.add("Amazon India LTD");
    sample.add("80");
    sample.add("120");

    data = new ArrayList<>();
    for (int i = 0; i < 3; i++) {
        List<String> d = new ArrayList<>();
        for (int j = 0; j < 3; j++) {
            d.add(sample.get(0));
            d.add(sample.get(1));
            d.add(sample.get(2));
        }
        data.add(d);
    }

    notifyDataSetChanged();

}

private void clearTable() {
    tl.removeAllViews();
    addFirstRow("Target", "Completed", "All");
}

private void deleteTable() {
    clearTable();
    data.clear();
    //notify data set changed is not needed
}

private void addRow(String text, String text1, String text2,
                    int drawable, int drawable1, int drawable2) {

    TableRow row = new TableRow(MainActivity.this);
    row.setLayoutParams(new TableLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT));

    TextView tv = new TextView(MainActivity.this);
    tv.setText(text);
    tv.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv.setPadding(5, 5, 5, 5);
    tv.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable));

    TableRow.LayoutParams params = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params.weight = 1.0f;
    tv.setLayoutParams(params);

    TextView tv1 = new TextView(MainActivity.this);
    tv1.setText(text1);
    tv1.setGravity(Gravity.CENTER);
    tv1.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv1.setPadding(5, 5, 5, 5);
    tv1.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable1));

    TableRow.LayoutParams params1 = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params1.weight = 0.5f;
    tv1.setLayoutParams(params1);

    TextView tv2 = new TextView(MainActivity.this);
    tv2.setText(text2);
    tv2.setGravity(Gravity.CENTER);
    tv2.setTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.black));
    tv2.setPadding(5, 5, 5, 5);
    tv2.setBackground(ContextCompat.getDrawable(MainActivity.this, drawable2));

    TableRow.LayoutParams params2 = new TableRow.LayoutParams(0,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    params2.weight = 0.5f;
    tv2.setLayoutParams(params2);

    row.addView(tv);
    row.addView(tv1);
    row.addView(tv2);

    tl.addView(row);

}

private void addFirstRow(String text, String text1, String text2) {
    addRow(text, text1, text2,
            R.drawable.cell_shape_top_left,
            R.drawable.cell_shape,
            R.drawable.cell_shape_top_right);
}

private void addLastRow(String text, String text1, String text2) {
    addRow(text, text1, text2,
            R.drawable.cell_shape_bottom_left,
            R.drawable.cell_shape,
            R.drawable.cell_shape_bottom_right);
}

private void  notifyDataSetChanged(){

    clearTable();

    for (int i = 0; i < data.size(); i++) {
        if (i == (data.size() - 1)) {
            addLastRow(data.get(i).get(0),
                    data.get(i).get(1),
                    data.get(i).get(2));
        } else {
            addRow(data.get(i).get(0),
                    data.get(i).get(1),
                    data.get(i).get(2),
                    R.drawable.cell_shape,
                    R.drawable.cell_shape,
                    R.drawable.cell_shape);
        }
    }
}

}

2) activity_main.xml:

<?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:orientation="vertical">

<TableLayout
  android:layout_width="match_parent"
    android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:padding="10dp"
android:id="@+id/tl">

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

        <TextView
            android:text="Target"
            android:layout_width="0dp"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape_top_left"
            android:layout_weight="1.0"
            android:layout_column="1" />

        <TextView
            android:text="Completed"
            android:layout_width="0dp"
            android:gravity="center"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape"
            android:layout_weight="0.5"
            android:layout_column="2" />

        <TextView
            android:text="All"
            android:layout_width="0dp"
            android:gravity="center"
            android:padding="5dp"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:background="@drawable/cell_shape_top_right"
            android:layout_weight="0.5"
            android:layout_column="3" />

    </TableRow>

</TableLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:text="Delete"
    android:id="@+id/b_delete">
</Button>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Add Row"
    android:id="@+id/b_add_row">
</Button>

</LinearLayout>

3) Borders

cell_shape.xml:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle"  >
<solid android:color="@android:color/white"/>
<stroke android:width="1dp"
    android:color="@android:color/black"/>
</shape>

cell_shape_top_left.xml:

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

cell_shape_top_right.xml:

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

cell_shape_bottom_left.xml:

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

cell_shape_bottom_right.xml:

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

4) Result:

result

Upvotes: 1

Android Geek
Android Geek

Reputation: 9225

Please try below code:

In XML

 <TableLayout
        android:layout_marginTop="20dp"
        android:stretchColumns="0,1"
        android:id="@+id/main_table"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="@drawable/table_bg"
        android:padding="10dp">
    </TableLayout>

In Fragment(Java File)

main_table=view.findViewById(R.id.main_table);
        TableRow tr_head = new TableRow(getContext());
        tr_head.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT));

        TextView label_target = new TextView(getContext());
        label_target.setText("Target");
        label_target.setTextColor(Color.BLACK);
        label_target.setTextSize(18);
        label_target.setPadding(5, 5, 5, 5);
        tr_head.addView(label_target);// add the column to the table row here

        TextView label_completed = new TextView(getContext());
        label_completed.setText("Completed");
        label_completed.setTextSize(18);
        label_completed.setTextColor(Color.BLACK);
        label_completed.setPadding(5, 5, 5, 5);
        tr_head.addView(label_completed);

        TextView label_all = new TextView(getContext());
        label_all.setText("All");
        label_all.setTextSize(18);
        label_all.setTextColor(Color.BLACK);
        label_all.setPadding(5, 5, 5, 5);
        tr_head.addView(label_all);

        main_table.addView(tr_head, new TableLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT));
        TextView label_target_data,label_completed_data,label_all_data;

        for (int i = 0; i <2; i++) {
            TableRow row= new TableRow(getContext());
            TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
            row.setLayoutParams(lp);
            label_target_data = new TextView(getContext());
            label_target_data.setText("Target"+i);
            label_target_data.setTextSize(15);
            label_target_data.setTextColor(Color.BLACK);
            label_target_data.setPadding(5, 5, 5, 5);
            row.addView(label_target_data);

            label_completed_data = new TextView(getContext());
            label_completed_data.setText("Completed"+i);
            label_completed_data.setTextColor(Color.BLACK);
            label_completed_data.setTextSize(15);
            label_completed_data.setPadding(5, 5, 5, 5);
            row.addView(label_completed_data);

            label_all_data = new TextView(getContext());
            label_all_data.setText("All"+i);
            label_all_data.setTextColor(Color.BLACK);
            label_all_data.setTextSize(15);
            label_all_data.setPadding(5, 5, 5, 5);
            row.addView(label_all_data);

            main_table.addView(row, new TableLayout.LayoutParams(
                    LinearLayout.LayoutParams.FILL_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
        }

Output is:

enter image description here

I hope its work for you

Upvotes: 0

Related Questions