android android-layout android-activity android-fragments android-linearlayout

Android: How can I make merging vertically?

I would like to make an Android application. This app requires 7 rows and 7 columns like 7*7 matrix. Here are the questions:

1) How can I merge the cell 1*1 with 2*1 or 1*1,2*1 and 3*1 vertically? 2) Also Can I make this dynamically? 3) Which layout should I use?

Thank you in advance.

here is screen.xml

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="8"
android:orientation="horizontal"
android:rowCount="9" >


<Space
    android:layout_column="0"
    android:layout_columnSpan="1"
    android:layout_gravity="fill"
    android:layout_row="0" 
    android:tag=""/>

<TextView
    android:id="@+id/Monday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Monday"
    android:textSize="10dp" 
    android:tag="Monday"
    />



<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="2"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Tuesday"
    android:textSize="10dp" 
    android:tag="Tuesday"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="3"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Wednesd."
    android:textSize="10dp" 
    android:tag="Wednesday"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="4"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Thursday"
    android:textSize="10dp" 
    android:tag="Thursday"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="5"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Friday"
    android:textSize="10dp" 
    android:tag="Friday"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="6"
    android:layout_gravity="center"
    android:layout_row="0"
    android:text="Saturday"
    android:textSize="10dp" 
    android:tag="Saturday"/>

<Space
    android:layout_column="0"
    android:layout_columnSpan="1"
    android:layout_gravity="fill"
    android:layout_row="0" 
    android:tag=""/>

<TextView
    android:id="@+id/eight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_row="1"
    android:text="8:00"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="2"
    android:text="8:30"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="3"
    android:text="9:00"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="4"
    android:text="9:30"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="5"
    android:text="10:00"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="6"
    android:text="10:30"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="7"
    android:text="11:00"
    android:textSize="10dp" 
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="0"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    android:layout_row="8"
    android:text="11:30"
    android:textSize="10dp" 
    />

here is mainActivity

public class Example extends Activity {


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

    Button lec = new Button(this);
    GridLayout gridLayout = (GridLayout)findViewById(R.id.grid);
    GridLayout.LayoutParams params = new GridLayout.LayoutParams();
    params.width = GridLayout.LayoutParams.MATCH_PARENT;
    params.height = GridLayout.LayoutParams.WRAP_CONTENT;
    params.columnSpec = GridLayout.spec(1, 3);
    params.rowSpec = GridLayout.spec(1, 7);



    gridLayout.addView(lec, params);

}

I am doing a program for machine, columns represents the days of working of that machine and rows represent how many hours work that machine. Because of this, I have to stretch out a button from the starting hour to the ending hour but I can't achieve this.

Solution

Use a GridLayout! It works like this:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="4"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        android:layout_columnSpan="2"
        android:layout_rowSpan="2" />

    ...

</GridLayout>

To define how many rows and columns there are use these two attributes on the GridLayout:

android:columnCount
android:rowCount

You can define the position of a View inside the GridLayout with these two attributes:

android:layout_column
android:layout_row

And you can define how many rows or columns a View spans with these two attributes:

android:layout_rowSpan
android:layout_columnSpan

Please note that the GridLayout was only added with API level 14! If you want to use the GridLayout in earlier versions you need to use the GridLayout from the support library:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    ...    

</android.support.v7.widget.GridLayout>

You can also populate a GridLayout programmatically with its LayoutParams like this:

final int row = 1;  // View starts in second row
final int rowSpan = 2; // View spans two rows

final int column = 1; // View starts in second column
final int columnSpan = 2; // View spans two columns

// Creating the LayoutParams from the values above
GridLayout.LayoutParams params = new GridLayout.LayoutParams();
params.width = GridLayout.LayoutParams.WRAP_CONTENT;
params.height = GridLayout.LayoutParams.WRAP_CONTENT;
params.columnSpec = GridLayout.spec(column, columnSpan);
params.rowSpec = GridLayout.spec(row, rowSpan);

// Adding the new View with the LayoutParams
gridLayout.addView(view, params);

I suggest you add a helper method to simplify this:

private void addViewToGridLayout(View view, int row, int column, int rowSpan, int columnSpan) {
    GridLayout.LayoutParams params = new GridLayout.LayoutParams();
    params.width = GridLayout.LayoutParams.WRAP_CONTENT;
    params.height = GridLayout.LayoutParams.WRAP_CONTENT;
    params.columnSpec = GridLayout.spec(column, columnSpan);
    params.rowSpec = GridLayout.spec(row, rowSpan);

    gridLayout.addView(view, params);
}