Search code examples
androidxmlandroid-studiolayoutscreen-size

Changing button sizes for screen sizes Android Studio


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.andrewfinlay.vectorcalculator.MainActivity"
                tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="0"
        android:password="false"
        android:phoneNumber="false"
        android:textAlignment="center"
        android:id="@+id/resultOutput"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentStart="true"
        android:textSize="30dp"
        android:clickable="true"
        android:textIsSelectable="true"/>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gridLayout"
        android:layout_below="@+id/resultOutput"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="50dp"
        >

        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/x1"
            android:layout_row="0"
            android:layout_column="0"
            android:hint="x1"
            android:focusable="true"
            android:nextFocusDown="@+id/x2"/>
        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/x2"
            android:layout_row="0"
            android:layout_column="1"
            android:hint="x2"
            android:focusable="true"
            android:nextFocusDown="@+id/x3"/>

        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/x3"
            android:layout_row="0"
            android:layout_column="2"
            android:hint="x3"
            android:focusable="true"
            android:nextFocusDown="@+id/y1"/>

        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/y1"
            android:layout_row="1"
            android:layout_column="0"
            android:hint="y1"
            android:focusable="true"
        android:nextFocusDown="@+id/y2"/>

        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/y2"
            android:layout_row="1"
            android:layout_column="1"
            android:hint="y2"
            android:focusable="true"
            android:nextFocusDown="@+id/y3"/>

        <EditText
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            android:inputType="number|numberDecimal"
            android:ems="10"
            android:id="@+id/y3"
            android:layout_row="1"
            android:layout_column="2"
            android:hint="y3"
            android:focusable="true"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Add"
            android:id="@+id/addButton"
            android:layout_row="2"
            android:layout_column="0"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25sp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginRight="8dp"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Sub"
            android:id="@+id/subButton"
            android:layout_row="2"
            android:layout_column="1"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginRight="3dp"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Unit"
            android:id="@+id/unitButton"
            android:layout_row="2"
            android:layout_column="2"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            />

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Cross"
            android:id="@+id/crossButton"
            android:layout_row="3"
            android:layout_column="0"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginRight="8dp"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Dot"
            android:id="@+id/dotButton"
            android:layout_row="3"
            android:layout_column="1"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginRight="3dp"/>

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Mag"
            android:id="@+id/magButton"
            android:layout_row="3"
            android:layout_column="2"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            />

        <Button
            android:layout_width="100dp"
            android:layout_height="35dp"
            android:text="Reset"
            android:id="@+id/resetButton"
            android:layout_row="4"
            android:layout_column="1"
            android:background="#3F51B5"
            android:textColor="#ffffff"
            android:textSize="25dp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center|top"
            android:layout_marginTop="10dp"
            android:layout_marginRight="3dp"/>

    </GridLayout>

</RelativeLayout>

At the minute the buttons/edit texts and output are all relative to the screen size because of dpi.

How would I go about adjusting this so it scales to different screen sizes? As this is what happens currently: This is ideal: Nexus 5 This isn't: Nexus S


Solution

  • Try this layout instead:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
        <TextView
            android:id="@+id/resultOutput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:clickable="true"
            android:password="false"
            android:phoneNumber="false"
            android:text="0"
            android:textAlignment="center"
            android:textIsSelectable="true"
            android:textSize="30dp" />
    
        <GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/resultOutput"
            android:layout_marginBottom="50dp">
    
            <EditText
                android:id="@+id/x1"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:layout_row="0"
                android:ems="10"
                android:focusable="true"
                android:hint="x1"
                android:inputType="number|numberDecimal"
                android:nextFocusDown="@+id/x2" />
    
            <EditText
                android:id="@+id/x2"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_row="0"
                android:ems="10"
                android:focusable="true"
                android:hint="x2"
                android:inputType="number|numberDecimal"
                android:nextFocusDown="@+id/x3" />
    
            <EditText
                android:id="@+id/x3"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_row="0"
                android:ems="10"
                android:focusable="true"
                android:hint="x3"
                android:inputType="number|numberDecimal"
                android:nextFocusDown="@+id/y1" />
    
            <EditText
                android:id="@+id/y1"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:layout_row="1"
                android:ems="10"
                android:focusable="true"
                android:hint="y1"
                android:inputType="number|numberDecimal"
                android:nextFocusDown="@+id/y2" />
    
            <EditText
                android:id="@+id/y2"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:layout_row="1"
                android:ems="10"
                android:focusable="true"
                android:hint="y2"
                android:inputType="number|numberDecimal"
                android:nextFocusDown="@+id/y3" />
    
            <EditText
                android:id="@+id/y3"
                android:layout_width="110dp"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:layout_row="1"
                android:ems="10"
                android:focusable="true"
                android:hint="y3"
                android:inputType="number|numberDecimal" />
    
        </GridLayout>
    
        <LinearLayout
            android:id="@+id/row1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/gridLayout"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/addButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_weight="1"
                android:layout_margin="8dp"
                android:background="#3F51B5"
                android:text="Add"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
            <Button
                android:id="@+id/subButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_margin="8dp"
                android:layout_weight="1"
                android:background="#3F51B5"
                android:text="Sub"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
            <Button
                android:id="@+id/unitButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_margin="8dp"
                android:layout_weight="1"
                android:background="#3F51B5"
                android:text="Unit"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
        </LinearLayout>
    
        <LinearLayout
            android:id="@+id/row2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/row1"
            android:orientation="horizontal">
    
            <Button
                android:id="@+id/crossButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_weight="1"
                android:layout_margin="8dp"
                android:background="#3F51B5"
                android:text="Cross"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
            <Button
                android:id="@+id/dotButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_margin="8dp"
                android:layout_weight="1"
                android:background="#3F51B5"
                android:text="Dot"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
            <Button
                android:id="@+id/magButton"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_margin="8dp"
                android:layout_weight="1"
                android:background="#3F51B5"
                android:text="Mag"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
        </LinearLayout>
    
            <Button
                android:id="@+id/resetButton"
                android:layout_below="@id/row2"
                android:layout_width="100dp"
                android:layout_height="35dp"
                android:layout_centerHorizontal="true"
                android:layout_gravity="center|top"
                android:layout_marginTop="10dp"
                android:background="#3F51B5"
                android:text="Reset"
                android:textColor="#ffffff"
                android:textSize="25sp" />
    
    </RelativeLayout>