Scrollview and Tablelayout usage with banner to bottom in xml

Question

This is my xml file. There are 35 xml files like this in my app. Their textview and button numbers are different. Some of them are more than 10 , some of are less than 5. But considering the devices screen, i designed all xml files using scroll view. Also i needed tablelayout and used tablelayout, table row inside it and textviews inside tablerows. When i finished the app everything was ok. Now i added mobile ad banners in xml files and it started to crash.

If i add the banner just before ending of tablelayout , app doesnt crash and ad is displayed at teh end of table but the vision is too bad.Because if there are 3 rows in the xml then the banner takes place after the last textview and this is something like the middle of the page. No matter how many textviews the xml use, i want them to be scrollable and in the end i want the banner take place at the end of the page.

I tried some android:gravity="bottom" or

alignparentbottom="true" things but they didn't work. In my researches i realised that i may need to add some linear or relative layout codes but when i tried them thay dont fit with scrollview and crash. Here is one of the xml files. How should i need to modify this ?

In the images , First one is how it works , the banner takes place where the textview ends , i want the second image , no matter how long the tetviews the banner should be at the bottom of the page.

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/blue">


    <TableLayout
        android:id="@+id/table"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TableRow android:id="@+id/tableRow1" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:padding="5dp"
                android:text="TRY"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#FFFFFF" >

            </TextView>
// some other buttons or textviews...


 </TableRow> 
 </TableLayout>
 <com.startapp.android.publish.banner.Banner 
  android:id="@+id/startAppBanner"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"/>
</ScrollView>

Answer 1

If the banner needs to be always shown at the bottom, you can set the weight of the ScrollView in a LinearLayout to 1.

Example

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:orientation="vertical"
android:background="@drawable/blue">
    <ScrollView 
     android:layout_width="fill_parent"
     android:layout_height="0dip" 
     android:layout_weight="1"
     android:background="@drawable/blue">


<TableLayout
    android:id="@+id/table"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TableRow android:id="@+id/tableRow1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:padding="5dp"
            android:text="TRY"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#FFFFFF" >

        </TextView>
// some other buttons or textviews...
    </TableRow> 
 </TableLayout>
</ScrollView>
<com.startapp.android.publish.banner.Banner 
 android:id="@+id/startAppBanner"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
</LinearLayout>

Answer 2

I can't test the code here because I do not have the Banner component but try wrapping both the TableLayout and the Banner in a LinearLayout.

modified layout file

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

        <TableLayout
            android:id="@+id/table"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            
            <TableRow android:id="@+id/tableRow1" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content">
                
                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:padding="5dp"
                    android:text="TRY"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#FFFFFF" />
    
            </TableRow> 
    
        </TableLayout>
        
        <com.startapp.android.publish.banner.Banner 
            android:id="@+id/startAppBanner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />
    
    </LinearLayout>
        
</ScrollView>

UPDATE

After testing the file locally I realized that crash is being caused by the Banner because a ScrollView can have only one child. I'm surprised that you were able to compile your project with the error in the layout file. So one solution is wrap the TableLayout and Banner in a LinearLayout. See example 1:

example 1

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TableLayout
      android:id="@+id/table"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
          android:id="@+id/textView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:padding="5dp"
          android:text="TRY"
          android:textAppearance="?android:attr/textAppearanceMedium"
          />

      </TableRow>

    </TableLayout>

    <com.startapp.android.publish.banner.Banner 
        android:id="@+id/startAppBanner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

  </LinearLayout>
</ScrollView>

After thinking about it, it may be possible to eliminate the TableLayout completely. You can use a LinearLayout to stack items on top of each other. So that would simplify your layout file quite a bit. See example 2.

example 2

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:padding="5dp"
            android:text="TRY"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#FFFFFF" />
        
        <com.startapp.android.publish.banner.Banner 
            android:id="@+id/startAppBanner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />
    
    </LinearLayout>
        
</ScrollView>

UPDATE 2

Then your issue must be with your Java file. I have tested the layout file locally and it does render properly. See screenshot below.

UPDATE 3

The solution required updates to both the layout file and the Activity class. The logic is fairly simple. If the number of rows in the table cause the table height to exceed the height of the scrollview, then scrolling is enabled. If scrolling is enabled, the banner ad is appended as child of the table. If scrolling is disabled, the banner ad is inserted as a child of the linearlayout. In order to determine the correct heights it is necessary to subscribe to the OnGlobalLayout event. The following code is a ** working sample ** of what you will need. In order to test both scenarios (scrolling enabled/disabled) just change the value of the ROW_COUNT variable. I used 3 for scrolling disabled and 30 for enabled. You will see the banner placed appropriately.

activity_test.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/relativelayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
    android:id="@+id/linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
      android:id="@id/scrollview"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:background="#e0e0e0">

      <TableLayout
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

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

          <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="TRY" />

        </TableRow>


      </TableLayout>

    </ScrollView>

  </LinearLayout>

</RelativeLayout>

TestActivity.java

public class TestActivity extends Activity {

  private static String TAG = "TestActivity";
  private Activity mActivity;
  private LinearLayout mLinearLayout;
  private TableLayout mTableLayout;
  private RelativeLayout mRelativeLayout;

  private static int ROW_COUNT = 30;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    Log.d(TAG, "onCreate");

    mActivity = this;
    mRelativeLayout = (RelativeLayout)findViewById(R.id.relativelayout);
    mLinearLayout = (LinearLayout)findViewById(R.id.linearlayout);
    mTableLayout = (TableLayout)findViewById(R.id.table);

    float density = getResources().getDisplayMetrics().density;
    final int padding = (int)Math.floor((density * 20f));

    for(int i=0;i<ROW_COUNT;i++){
      TextView view = new TextView(mActivity);
      view.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
      view.setPadding(padding,padding,padding,padding);
      view.setText("TableRow");

      TableRow row = new TableRow(mActivity);
      row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
      row.addView(view);

      mTableLayout.addView(row);
    }

    ViewTreeObserver observer = mRelativeLayout.getViewTreeObserver();
    observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
        TextView view = (TextView) findViewById(R.id.banner);
        if(view == null){
          view = new TextView(mActivity);
          view.setId(R.id.banner);
          view.setBackgroundColor(Color.LTGRAY);
          view.setText("BannerAd");
          view.setGravity(Gravity.CENTER_HORIZONTAL);
          view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
          view.setPadding(0, padding, 0, padding);
          if(mTableLayout.getHeight() > mLinearLayout.getHeight()) {
            mTableLayout.addView(view);
          }else{
            mLinearLayout.addView(view);
          }
        }
      }
    });
  }
}

I can post screenshots if needed, but test this code out and let me know if you have any questions.