Lab

UI Layout
 UI Layout
• In android, Layout is used to define the user
interface for an app or activity and it will hold the
UI elements that will appear to the user.
• The UI in an android app is made with a
collection of View and ViewGroup objects.
• Generally, the android apps will contain one or
more activities and each activity is a one screen
of app.
• The activities will contain a multiple UI
components and those UI components are the
instances of View and ViewGroup subclasses.
Android View
 Android UI Layouts
• In android, Layout is used to define the user
interface for an app or activity and it will hold
the UI elements that will appear to the user.

• In android, we can define a layouts in two

ways, those are
– Declare UI elements in XML
– Instantiate layout elements at runtime
 Declare UI Elements in XML
• <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
"
android:orientation="vertical"
• android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Name"
/>
<EditText
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10">
</EditText>
<Button
android:id="@+id/getName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Get Name" />
</LinearLayout>
• Load XML Layout File from an Activity:
Instantiate Layout Elements at
Runtime
Width and Height
 Width and Height
• If you observe above example, we used
different values to set layout_width and
layout_height, those are

– match_parent: the View or ViewGroup will try to

match with parent width or height.
– wrap_content: the View or ViewGroup will try to
adjust its width or height based on the content.
Android Layout Attributes
 Android Layout Types
Linear Layout
LinearLayout is a ViewGroup subclass which is used to render all child View instances
one by one either in a horizontal direction or vertical direction based on the
orientation property.

Relative Layout
RelativeLayout is a ViewGroup which is used to specify the position of child View
instances relative to each other (Child A to the left of Child B) or relative to the parent
(Aligned to the top of a parent).

Table Layout
TableLayout is a ViewGroup subclass which is used to display the child View elements
in rows and columns.
 Android LinearLayout

• we can specify the linear layout orientation using

android:orientation attribute.
 LinearLayout
• Android LinearLayout Declaration
 Example
<?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:paddingLeft="20dp"
android:paddingRight="20dp"
android:orientation="vertical" >
<EditText
android:id="@+id/txtTo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="To"/>
<EditText
android:id="@+id/txtSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Subject"/>
<EditText
android:id="@+id/txtMsg"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="Message"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Send"/>
</LinearLayout>
 TableLayout

Row1

Row2 Row2
Col1 Col2

Row3 Row3 Row3

Col1 Col2 Col3

Row4
 activity_main.xml
• <?xml version="1.0" encoding="utf-8"?> android:layout_weight="1"
<TableLayout xmlns:android="http://schemas.android.c android:text=“surfel " />
om/apk/res/android" <TextView
android:layout_width="match_parent" android:layout_width="wrap_content"
android:layout_height="match_parent" android:layout_height="wrap_content"
android:layout_marginTop="100dp" android:layout_weight="1"
android:paddingLeft="10dp" android:text=“Jiim" />
android:paddingRight="10dp" > </TableRow>
<TableRow android:background="#0079D6" android:p <TableRow android:background="#DAE8FC" android:p
adding="5dp"> adding="5dp">
<TextView <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:layout_weight="1"
android:text="UserId" /> android:text="2" />
<TextView
android:layout_width="wrap_content" </TableRow>
android:layout_height="wrap_content" </TableLayout>
android:layout_weight="1"
android:text="User Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Location" />
</TableRow>
<TableRow android:background="#DAE8FC" android:p
adding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 MainActivity.java
• import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public
class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Activity vs Fragment
 Fragment
• Fragments are the modular section of activity
design
• We can use to
– build multi-pane UI by combining multiple
fragments in a single activity and
– we can reuse the same fragment in multiple
activities.
• The fragment has its own lifecycle call-backs
and accepts its own input events.
Activity vs Fragment
 Fragment in android
• Statistically : XML

• Dynamically: Java class

using the FragmentManager
• The terms are not used officially in android
but we stick to it :
• Easy for understanding/discussion and make
sense to use them
 Fragment(Statistically)
• <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android=http://schemas.android.com/apk/res/android
android:layout_width="match_parent" Fragment Class
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment android:name="com.example.android.FooFragment"
android:id="@+id/fooFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>
Fragment(Statistically)

Create Fragment
 Fragment(Dynamically)
Steps
• add a "placeholder" container (usually a
FrameLayout) to your activity where the fragment is
inserted at runtime
• Then you can use the FragmentManager to create a
FragmentTransaction which allows us to add
fragments to the FrameLayout at runtime
Fragment(Dynamically)
Fragment(Dynamically)
Shared Preferences
 Writing Data on Shared preferences
// Storing data into SharedPreferences
SharedPreferences sharedPreferences =
getSharedPreferences("MySharedPref",MODE_PRIVATE);

// Creating an Editor object to edit(write to the file)

SharedPreferences.Editor myEdit = sharedPreferences.edit();

// Storing the key and its value as the data fetched from edittext
myEdit.putString("name", name.getText().toString());
myEdit.putInt("age", Integer.parseInt(age.getText().toString()));

// Once the changes have been made,

// we need to commit to apply those changes made,
// otherwise, it will throw an error
myEdit.commit();
 Reading Data on Shared preferences
// Retrieving the value using its keys the file name
// must be same in both saving and retrieving the data
SharedPreferences sh = getSharedPreferences("MySharedPref",
MODE_APPEND);

// The value will be default as empty string because for

// the very first time when the app is opened, there is
//nothing to show
String s1 = sh.getString("name", "");
int a = sh.getInt("age", 0);

// We can then use the data

name.setText(s1);
age.setText(String.valueOf(a));
Sqlite
 Create Database and Tables using
SQLite Helper
• In android, by using SQLiteOpenHelper class
we can easily create the required database
and tables for our application.
• To use SQLiteOpenHelper, we need to create
a subclass that overrides the onCreate() and
onUpgrade() call-back methods.
public class DbHandler extends SQLiteOpenHelper {
private static final int DB_VERSION = 1;
private static final String DB_NAME = "studentdb";
private static final String TABLE_Users = “studentdetails";
private static final String KEY_ID = "id";
private static final String KEY_NAME = "name";
public DbHandler(Context context){
super(context,DB_NAME, null, DB_VERSION);
}
@Override
public void onCreate(SQLiteDatabase db){
String CREATE_TABLE = "CREATE TABLE " + TABLE_Users + "("
+ KEY_ID + " INTEGER PRIMARY KEY
AUTOINCREMENT," + KEY_NAME + " TEXT"
+ ")";
db.execSQL(CREATE_TABLE);
}
@Override
public void onUpgrade(SQLiteDatabase
db, int oldVersion, int newVersion){
// Drop older table if exist
db.execSQL("DROP TABLE IF EXISTS " + TABLE_Users);
// Create tables again
onCreate(db);
}
}
Method Description

onCreate() This method is called only once throughout the application after
the database is created and the table creation statements can be
written in this method.

onUpgrade() This method is called whenever there is an updation in the

database like modifying the table structure, adding constraints to
the database, etc.
 Insert Data into SQLite Database
//Get the Data Repository in write mode
SQLiteDatabase db= this.getWritableDatabase();

//Create a new map of values, where column

names are the keys
ContentValues cValues = new ContentValues();
cValues.put(KEY_NAME, name);
//cValues.put(KEY_age, age);
// Insert the new row, returning the primary
key value of the new row
long newRowId = db.insert(TABLE_Users,null,
cValues);
 Database - Fetching
SQLiteDatabase db= this.getReadableDatabase();

Cursor resultSet = db.rawQuery("Select * from

students ",null);

resultSet.moveToFirst();

String username = resultSet.getString(0);

String password = resultSet.getString(1);
• Alert