Android: How Create an Application that scales to different Screen Sizes?

Question

I have completed a simple Android application, that works and looks fine on my GenyMotion emulator. However, when I run it on a tablet it takes up 1/10th of the screen.

How can I rectify this issue?

I have added a sample Activity, XML and Manifest file from my application.

Example Activity in Application:

/**
 * Class containing activity that allows the user to enter a number (from 1-12)
 * for which they wish to view the times tables
 * @author Ross
 *
 */
public class Practice extends Activity implements View.OnClickListener {

    // Declaring Variables
    Button go2;
    EditText enterNumber2;
    TextView top2;
    TextView bottom2;
    private Integer convertedNumber2; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.practice);

        // calling method to initialise variables
        initialiseVars();

        // setting on click listeners for edit text and button
        go2.setOnClickListener(this);
        enterNumber2.setOnClickListener(this);

    }

    /**
     * method to initialise all of the buttons, Textviews etc (used to
     * clean up onCreate method)
     */
    private void initialiseVars() {

        //Initialising all the buttons text views etc from the xml
        go2 = (Button) findViewById(R.id.btnGoPractice);
        enterNumber2 = (EditText) findViewById(R.id.etEnterNumberPractce);
        top2 = (TextView) findViewById(R.id.tvTopPractice);
        bottom2 = (TextView) findViewById(R.id.tvBottomPractice);

    }

    /**
     * Method with on click listener that adds functionality for all of the
     * buttons, text views etc
     * 
     * @param view
     */
    public void onClick(View view) {

        // switch statement which determines what is clicked
        switch ((view).getId()) {
        case R.id.btnGoPractice:


            // sets text view equal to what is entered in editText
            final String entry = enterNumber2.getText().toString().trim();

            try {
                //parsing String
                convertedNumber2 = Integer.parseInt(entry);
            } catch (Exception e) {
                //handle exception
                e.printStackTrace();
            }

            //Setting up next activity to open via intent
            Intent intent = new Intent(this, PracticeTest.class);
            //Validation to ensure number is between 1 and 12
            if (convertedNumber2 >= 1 && convertedNumber2 <= 12) {
                //pass int value
                intent.putExtra("convertedNumber2", convertedNumber2);

                //open activity
                startActivity(intent);

            } else {
                //error message
                Toast.makeText( Practice.this, "Please enter a number between 1 and 12!", Toast.LENGTH_SHORT).show();
            }



        }
    }

}

Corresponding XML:

<?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="15dp" >

    <TextView
        android:id="@+id/tvTopPractice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I want to practice the: "
        android:textSize="25dp" />

    <EditText
        android:id="@+id/etEnterNumberPractce"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter Number..."
        android:inputType="number" >
    </EditText>

    <TextView
        android:id="@+id/tvBottomPractice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Times tables!"
        android:textSize="25dp" />

    <Button
        android:id="@+id/btnGoPractice"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:text="Go" />

</LinearLayout>

Manifest File of Application:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.multapply"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/mathsicon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".Menu"
            android:label="Main Menu" >
            <intent-filter>
                <action android:name="com.example.multapply.menu" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity
            android:name=".Splash"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ViewTimesTables"
            android:label=" View Times Tables" >
        </activity>
        <activity
            android:name=".ViewTimesTablesDisplay"
            android:label=" View Times Tables" >
        </activity>
        <activity
            android:name=".Practice"
            android:label="Practice" >
        </activity>
        <activity
            android:name=".PracticeTest"
            android:label="Practice" >
        </activity>
        <activity
            android:name=".PracticeResults"
            android:label="Practice Results" >
        </activity>
        <activity
            android:name=".RandomTest"
            android:label="Random Test" >
        </activity>
        <activity
            android:name=".RandomTestResults"
            android:label="Random Test Results" >
        </activity>

        <activity
            android:name=".MyArrayAdapter"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name=".MyArrayAdapterPractice"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name=".About"
            android:label="About" >
        </activity>

    </application>

</manifest>

Answer 1

For Tablets and big screens

Create folder name-> layout-sw600dp under res.. and paste all the layout which were in layout. and set them as you desire. and put your image as Golu have said..

you have to create atmost three different size of images for multiple screens.

put them in ldpi , mdpi ,hdpi xhdpi

Answer 2

ldpi, mdpi and hdpi refer to screen density, which means how much pixels can fit into a single inch.

the ratio in pixels between them is:

ldpi = 1:0.75
mdpi = 1:1
hdpi = 1:1.5
xhdpi = 1:2
xxhdpi = 1:3

so lets take an image with about the size of 100X100:

for mdpi it should be 100X100
for ldpi it should be 75X75
for hdpi it should be 150X150
for xhdpi it should be 200X200
for xxhdpi it should be 300X300

and

Android manages all this by itself, you just have to provide layouts and images in relative folders

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
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 orientation

res/drawable-mdpi/my_icon.png        // bitmap for medium density
res/drawable-hdpi/my_icon.png        // bitmap for high density
res/drawable-xhdpi/my_icon.png       // bitmap for extra high density