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?

I cannot answer your specific question, but setting `android:layout_gravity="top"` on `android:id="@+id/the_0_button"` should move the `Button`. You should go through the source code and see how `GridLayout` is measuring & laying out its children. — Vikram, Oct 14 '16 at 04:55

score 1 · Answer 1 · answered Oct 11 '16 at 20:23

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 ;)

answered Oct 11 '16 at 20:23

Amir Ziarati

14,248
11
47
52

the button must have the text – shoe Oct 11 '16 at 20:24
"-" is not an image it's a literal hyphen. when the text size changes the text also changes to "-" – shoe Oct 11 '16 at 21:02
if you look at the first image, you'll see "done" as the button text – shoe Oct 11 '16 at 21:04

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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

edited May 23 '17 at 12:16

Community

1
1

answered Oct 11 '16 at 20:33

luis_lics

26
3

Code-Apprentice · Answer 3 · 2016-10-21T21:46:00.143

1

It appears that the GridLayout is reserving enough height for the actual text size and some default padding despite the layout_height for the Done button.

edited Oct 21 '16 at 21:46

answered Oct 12 '16 at 00:21

Code-Apprentice

81,660
23
145
268

score 1 · Answer 4 · answered Oct 14 '16 at 06:52

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 .....

also, you'll note that the background for my buttons are white, and yet you made yours transparent -- eliminating having to deal with borders showing and animations not showing. but my buttons must be white, without borders, and with the default animations. that's why i liked `GridLayout` because i got all of those things; disregarding the strange "0" button behavior. — shoe, Oct 18 '16 at 07:26

score 1 · Answer 5 · answered Oct 19 '16 at 12:42

1

You can use the android:layout_weight property.

answered Oct 19 '16 at 12:42

Yajneshwar Mandal

953
5
15

score 0 · Answer 6 · answered Oct 21 '16 at 00:35

0

Build it with 'Linear Layouts' instead.

answered Oct 21 '16 at 00:35

PLT

81
4

score -1 · Answer 7 · edited Oct 03 '22 at 12:22

-1

Was facing the same problem, so just i did was to change the height and width of the button to it parent RowTable's match parent & wrap content and it solved my problem

edited Oct 03 '22 at 12:22

Pranav Singh

17,079
30
77
104

answered Sep 27 '22 at 23:57

M Hassan Nawaz

1

u can see in Picture Attached – M Hassan Nawaz Sep 27 '22 at 23:58

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

Update:

7 Answers7