Why are adjacent Buttons moving when I change the size of the text in a Button

Question

Here is the layout when each Button has the same size text:

And here is the layout when I increase the size of the bottom right Button's text:

What's going on here? Why is the "0" Button moving lower than the two Buttons adjacent to it?

Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center"
              android:background="@android:color/white"
              android:orientation="vertical"
              android:padding="6dp">

    <TextView
            android:id="@+id/input_textview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColorHint="@color/hint_color"
            android:singleLine="true"
            android:textSize="40sp"/>

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnCount="3">

        <Button
            android:id="@+id/the_1_button"
            android:background="@android:color/white"
            android:text="1"/>

        <Button
            android:id="@+id/the_2_button"
            android:background="@android:color/white"
            android:text="2"/>

        <Button
            android:id="@+id/the_3_button"
            android:background="@android:color/white"
            android:text="3"/>

        <Button
            android:id="@+id/the_4_button"
            android:background="@android:color/white"
            android:text="4"/>

        <Button
            android:id="@+id/the_5_button"
            android:background="@android:color/white"
            android:text="5"/>

        <Button
            android:id="@+id/the_6_button"
            android:background="@android:color/white"
            android:text="6"/>

        <Button
            android:id="@+id/the_7_button"
            android:background="@android:color/white"
            android:text="7"/>

        <Button
            android:id="@+id/the_8_button"
            android:background="@android:color/white"
            android:text="8"/>

        <Button
            android:id="@+id/the_9_button"
            android:background="@android:color/white"
            android:text="9"/>

        <ImageButton
            android:id="@+id/the_backspace_button"
            style="@style/Widget.AppCompat.Button"
            android:background="@android:color/white"
            android:src="@drawable/ic_backspace"/>

        <Button
            android:id="@+id/the_0_button"
            android:background="@android:color/white"
            android:text="0"/>

        <Button
                android:id="@+id/the_done_button"
                android:layout_width="88dp"
                android:layout_height="48dp"
                android:minWidth="0dp"
                android:minHeight="0dp"
                android:background="@android:color/white"
                android:text="done"/>
    </GridLayout>

</LinearLayout>

Update:

I made the text of the "DONE" Button super large -- 100sp -- and set maxWidth and maxHeight for it equal to the height and width of the other Buttons. Here is the result:

*the blue is the GridLayout's background, the red the "0" Button's, and the yellow the "DONE" Button's

Why would changing the size of the text of the "DONE" Button affect anything other than that specific Button if the size of the Button never changes?

Answer 1

I think there is a problem with the done button. You set the background of it. Then you also set its text as "done" .

Just set it text empty and the problem may resolve ;)

Answer 2

What about using the grid:layout_rowWeight or grid:layout_rowHeight attributes to be the same for every button?

Look at this: https://stackoverflow.com/a/32291319/2205825

Answer 3

Try this .....

Use GridView instead of many Button that not give you any Layout problem (Adjustment of Views).

Have look on the below example that solve your problem about Adjustment of Buttons

use this layout instead of your layout .....

<?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="match_parent"
    android:orientation="vertical"
    android:padding="6dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    <TextView
        android:id="@+id/input_textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:singleLine="true"
        android:textSize="40sp" />

    </LinearLayout>

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="100dp"
        android:gravity="center"
        android:numColumns="3" />

</LinearLayout>

add these 2 line in your OnCreate method .....

  GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new CustomAdapter(this));

add this adapter in your project .....

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageButton;

/**
 * Created by sushildlh on 10/14/16.
 */
public class CustomAdapter extends BaseAdapter {
    private Context mContext;

    // Keep all Images in array
    public String[] text = {
            "1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "DONE"
    };

    // Constructor
    public CustomAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return 12;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new textView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        Holder holder = null;
        if (holder == null) {
            LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
            convertView = inflater.inflate(R.layout.item, parent, false);
            holder = new Holder();
            holder.button = (Button) convertView.findViewById(R.id.button);
            holder.image = (ImageButton) convertView.findViewById(R.id.image);
            convertView.setTag(holder);
        } else {
            holder = (Holder) convertView.getTag();
        }

        if (position != 9) {
            holder.image.setVisibility(View.GONE);
            holder.button.setText(text[position]);
        } else {
            holder.image.setImageResource(R.drawable.ic_backspace_black_24dp);    //change ic_backspace_black_24dp into to your image ......
            holder.button.setVisibility(View.GONE);
        }

        return convertView;

    }

    public static class Holder {
        Button button;
        ImageButton image;
    }


}

and this is item.xml layout into your layout folder ....

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

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@null"
        android:textSize="25dp"/>

    <ImageButton
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:focusable="false"
        android:background="@null"
        android:gravity="center" />

</LinearLayout>

above code give you the output like this ....

Note:- Always use GridView OR ListView for same pattern of Views .....