My calculator project made in android studio doesn't scale

Question

I have just started a Calculator project in android studio(I am newbie) and I figured a bug when I tried to debug in my phone.

The thing is that I searched a lot about dp, sp, fill_parent, match_parent and things about scaling but I couldn't find an answer to explain the problem.

This is a photo in my project content_main.xml:

and this is how it looks while debugging on an LG F60:

Can someone explain me what is wrong with the scaling? Thanks a lot!

My content_main.xml is:

<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Pentru asta"
   android:id="@+id/textView"
   android:layout_alignParentTop="true"
   android:layout_alignParentRight="true"
   android:layout_alignParentEnd="false"
   android:textAlignment="viewEnd"
   android:textSize="60sp"
   android:layout_alignParentLeft="true"
   android:layout_alignParentStart="false"
   android:layout_marginBottom="40sp"
   android:layout_marginTop="40sp" />

<GridLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_below="@+id/textView"
   android:layout_alignParentLeft="true"
   android:layout_alignParentStart="false">

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton5"[enter image description here][1]
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="1"
    android:layout_column="0" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton7"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="1"
    android:layout_column="1" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton13"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="1"
    android:layout_column="2" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton17"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="1"
    android:layout_column="3" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton2"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="2"
    android:layout_column="0" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton8"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="2"
    android:layout_column="1" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton14"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="2"
    android:layout_column="2" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton18"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="2"
    android:layout_column="3" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton3"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="3"
    android:layout_column="0" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton9"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="3"
    android:layout_column="1" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton15"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="3"
    android:layout_column="2" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton19"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="3"
    android:layout_column="3" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton4"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="4"
    android:layout_column="0" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton6"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="0"
    android:layout_column="1" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton10"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="4"
    android:layout_column="1" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton11"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="0"
    android:layout_column="2" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton12"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="0"
    android:layout_column="3" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton16"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="4"
    android:layout_column="2" />

<ImageButton
    android:layout_width="96sp"
    android:layout_height="72sp"
    android:id="@+id/imageButton20"
    android:src="@drawable/one"
    android:padding="0sp"
    android:scaleType="fitXY"
    android:layout_row="4"
    android:layout_column="3" />

Do not use fixed sizes if you want it to be scalable. for layout_width and layout_height use wrap_content or match_parent — Viktor Yakunin, May 23 '16 at 14:11

score 0 · Answer 1 · answered May 23 '16 at 11:39

0

With the exception of text size, always always always use dp unless you have a good reason not to. Here, almost all of the sp (excluding for text size) should be dp.

answered May 23 '16 at 11:39

der_Fidelis

1,475
1
11
25

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

You can just add a scrollview on the top.

Check this topic for more info:

How to use ScrollView in Android?

edited May 23 '17 at 11:44

Community

1
1

answered May 23 '16 at 11:51

Nenco

241
4
13

score 0 · Answer 3 · answered May 23 '16 at 14:19

Try thinking about how you nest your xml views and always watch your android:layout_width="" & android:layout_height="". Especially in case of your GridLayout you may want to consider android:layout_width="match_parent". Also what Viktor Yakunin mentioned in the comments.

Besides that either you did not provide all your XML or you missed to close your GridLayout tag.

My calculator project made in android studio doesn't scale

3 Answers3