Designing Calculator for all Mobile Devices

Question

While designing calculator The buttons in 5.7 inch screen fit perfectly while in 5.0 Inch screen the buttons do not fit perfectly. (Check out the Image Below). What can be the proper way to design for all MOBILE Screen?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff8800"
tools:context=".MainActivity">


<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#ffffff"
    android:padding="0dp"
    android:text="New Text"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<Button
    android:id="@+id/button"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/textView"
    android:layout_margin="0dp"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button"
    android:layout_toRightOf="@+id/button"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button2"
    android:layout_toRightOf="@+id/button2"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button4"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button5"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignTop="@+id/button4"
    android:layout_toLeftOf="@+id/button3"
    android:layout_toStartOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button6"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button2"
    android:layout_toEndOf="@+id/button2"
    android:layout_toRightOf="@+id/button2"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button7"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button4"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button8"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignTop="@+id/button7"
    android:layout_toLeftOf="@+id/button6"
    android:layout_toStartOf="@+id/button6"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button9"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/button6"
    android:layout_alignStart="@+id/button6"
    android:layout_below="@+id/button6"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button10"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button7"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button11"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button8"
    android:layout_toLeftOf="@+id/button9"
    android:layout_toStartOf="@+id/button9"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button12"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/button9"
    android:layout_alignStart="@+id/button9"
    android:layout_below="@+id/button9"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button13"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button3"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button14"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button13"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button15"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button14"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button16"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button15"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />
   </RelativeLayout>

Answer 1

You should also consider using a GridLayout or a GridView so that no matter what the screen size, your buttons will adjust accordingly.

This guy did a pretty nice tutorial on accomplishing something close to what you want using a GridLayout: http://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677

With GridLayout, you just decide how many rows, columns and cells there are and they should scale with different screen sizes.

Answer 2

You have to create multiple layout in your layout folder to support multiple screens. Example :

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape 

Check the official documentation for more informations.

Answer 3

Take a loot at the Weight propreties of Android. Tutorial about it