I have some square TextViews in a TableLayout. I have to resize text programmatically. Cannot use the new "auto-resize", I need to set the text size myself.

So, my approach is to have fixed layout_height and layout_width for the TextViews in the table layout and to use setTextSize in code.

Problem is as soon as text is resized, weird things start happening, and not just to the TextView/cell that is being edited, but the neighboring ones too!

The first time text is resized, the neighboring cell is affected (see image). This happens both on the real phone (API24) and emulator (API 24, 28). The second time text is resized, the second cell goes back to normal on the emulator. On the real device, the first cell is resized again, or the top margin increased.

I tried changing different settings for TableLayout, TableRow, and TextView (wrap_content, min/max Height), but nothing fixes the issue except for commenting out the setTextSize.

I do need to use TableLayout, so replacing this with a different layout is not an option for me.

Why doesn't this work?

To replicate the issue paste below layout and code into a new "empty activity" project. I am using, at the time of writing, the latest software (Android Studio 3.2.1 with compile sdk version API 28, java version 1.8, min sdk version 22.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:baselineAligned="false"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/mainContainer">

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/tableLayout1"
 android:layout_gravity="center"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="10dp"
 android:background="#000">

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

 <TextView
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:background="#FFF"
 android:textColor="#000"
 android:id="@+id/textView1"
 android:layout_margin="1dp"/>

 <TextView
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:background="#FFF"
 android:textColor="#000"
 android:layout_margin="1dp"/>

 </TableRow>

 </TableLayout>


 <Button
 android:layout_gravity="bottom"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Click"
 android:id="@+id/button1"/>

 </LinearLayout>

My activity code is:

package app.howsmydriving.layoutproblem;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity 


 private String sContent = "";

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

 Button button1 = findViewById(R.id.button1);
 button1.setOnClickListener(new View.OnClickListener()
 @Override
 public void onClick(View v) 
 sContent += "A";
 TextView tv = findViewById(R.id.textView1);
 tv.setText(sContent);

 if(sContent.length() < 3) 
 tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 30);
 else 
 tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15);
 
 

 );
 



 

First thing to understand is what android:baselineAligned actually means.

This attribute is set to true by default, and controls the vertical positioning of sibling TextViews inside a horizontal LinearLayout. The TextViews will be pushed up or down as necessary to make sure that all text baselines (the imaginary line the text is sitting on) line up.

The next thing to realize is that TableRow is a subclass of LinearLayout, and is horizontal.

So, if you want full control over the vertical positioning of the TextViews inside your TableRow, you should set android:baselineAligned="false" to avoid having the system override you.

Edit

The dimensions of the TextView have no effect on baseline alignment; the LinearLayout will both (a) move the TextViews themselves up and down as necessary and (b) move the text within the TextView up and down as necessary to make sure that the baselines align.

Here's a demo. I've set background colors to make everything very obvious. The parent LinearLayout has a fixed height of 100dp, the first TextView is wrap_content, the second is 40dp (bigger than it needs to be), and the third is 16dp (smaller than it needs to be).

This is all in service of making sure that the baselines line up. The LinearLayout will do whatever it needs to to make this happen, unless you disable baseline alignment.

I managed to fix it by switching off baselineAligned for LinearLayout, TableLayout and TableRow:

android:baselineAligned="false"

Not sure why this works, if someone has a better explanation I will accept that as an answer.