Scribd
Upload
165 views

Lab 4a - Simple User Interface Layout

The document provides instructions for creating a simple Android app with a user interface. It involves 5 steps: 1) Creating a new project, 2) Defining colors, 3) Configuring strings, 4) Adding images, and 5) Configuring the main layout file to display the app name, course code, title, semester, and images. The main activity Java file is also rewritten to include the basic code for setting the content view. The user interface will display information for the course "SKR4307 Mobile Applications" using resources like colors, strings and images that are set up in the Android project directories and files.

Uploaded by

Nurul Aisyah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
165 views

Lab 4a - Simple User Interface Layout

The document provides instructions for creating a simple Android app with a user interface. It involves 5 steps: 1) Creating a new project, 2) Defining colors, 3) Configuring strings, 4) Adding images, and 5) Configuring the main layout file to display the app name, course code, title, semester, and images. The main activity Java file is also rewritten to include the basic code for setting the content view. The user interface will display information for the course "SKR4307 Mobile Applications" using resources like colors, strings and images that are set up in the Android project directories and files.

Uploaded by

Nurul Aisyah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

SKR4307: Mobile Applications

Sem. II 2019/2020
Lab Exercise 4a: Simple User Interface

PART I

Step I: Create a new Android project


a. Application name: skr4307
b. Create an Empty Activity with the following configuration:
 Activity Name: MainActivity
 Layout Name: activity_main

Step II: Define colors for the application.


 Find color.xml file in the folder /res/Values.
 Set the following code the existing content of the file.

<?xml version="1.0" encoding="utf-8"?>


<resources>
...
<color name="ustblue">#003366</color>
<color name="ustgold">#996600</color>
</resources>

Step III: Open string.xml and change its content as following specification:

String name String value


app_name Course Info SKR4307
Welcome Welcome to
CourseCode SKR4307
CourseTitle Mobile Applications
Semester Sem I 2019/2020

 In this file, several new strings being defined that we can use for the text in the user
interface that we design next.
 It is very easy to replace these string values with other values to reconfigure the
application user interface without needing to change any code.

Step IV: Copy and paste fsktmlogo.jpg and SKR4307.png into /res/drawable
folder.

1
Step V: Configuring the activity_main.xml layout file

 The main layout file contains the following code.

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout 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:orientation="vertical"
android:background="@color/ustblue"
tools:context=".MainActivity">

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

<ImageView // [HEADER IMAGE  SKR4307.jpg]


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:src=" "
android:maxHeight="10dp"
android:background="@android:color/white"
/>

<TextView // WELCOME STRING


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" "
android:gravity="center_vertical|center_horizontal"
android:textColor="@android:color/white"
android:textSize="12pt"
/>

<TextView // COURSE CODE STRING


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" "
android:gravity="center_vertical|center_horizontal"
android:textColor="@color/ustgold"
android:textSize="18pt"
/>

<TextView // COURSE TITLE STRING


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" "
android:gravity="center_vertical|center_horizontal"
android:textColor="@color/ustgold"
android:textSize="14pt"
/>

<TextView // SEMESTER STRING


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" "
android:gravity="center_vertical|center_horizontal"
android:textColor="#aaaaaa"
android:textSize="16pt"

2
/>
</LinearLayout>

<ImageView // FOOTER IMAGE – fsktmlogo.jpg


android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:src=" "
android:maxHeight="10dp"
android:background="@android:color/white"
/>

</LinearLayout>

Figure 1: Main activity screen view

Step VI: Rewrite the MainActivity.java file

package com.example.skr4307;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

public class MainActivity extends AppCompatActivity {

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

3
setContentView(R.layout.activity_main);
}
}

You might also like