Course 1: Building Layouts (Part A)

Recognizing Views
XML Syntax :TextView
<TextView
android:layout_width=50dp
android:layout_height=100dp"
android:text="Hello World!
android:textSize=14sp
android:textStyle=bold
android:textColor=#000000 />

Try at
http://labs.udacity.com/android-
visualizer/#/android/text-view
 What is Density-independent Pixels or dp?

For your Android device, can you find out

the dimensions of its screen size in dips?
Find some devices in this Device Metrics
list (see Width x Height dp column).
https://design.google.com/devices/
 What is scale-independent pixels or sp?

1. Take out your Android device.

2. Change system font setting on your device.
3. Go to Settings app > Display > Font size.
4. Change the default font size on the device.
5. Then open any app of your choice.
6. See how the user interface changes with the smaller
or larger font size. How does it look? Does the app
handle the different font size gracefully or does
information get cut off?
ImageView
<ImageView
android:layout_width="400dp"
android:layout_height="300dp
android:src="@drawable/happybirthday"
android:scaleType="centerCrop"/>
Course 1: Building Layouts (Part B)
View width/height
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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"
tools:context="com.ladev.helloworld.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"/>
</RelativeLayout>
Course 1: Building Layouts (Part B)
View width/height
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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"
tools:context="com.ladev.helloworld.MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000/>
</RelativeLayout>
Course 1: Building Layouts (Part B)
Horizontal vs. Vertical LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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"
tools:context="com.ladev.helloworld.MainActivity"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy birthday!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"/>
</LinearLayout>
Course 1: Building Layouts (Part B)
Horizontal vs. Vertical LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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"
tools:context="com.ladev.helloworld.MainActivity"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy birthday!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"/>
</LinearLayout>
Course 1: Building Layouts (Part B)
LinearLayout Weight
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy birthday!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000
android:layout_weight="1"/>
Course 1: Building Layouts (Part B)
RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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"
tools:context="com.ladev.helloworld.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy birthday!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
Course 1: Building Layouts (Part B)
Padding vs. Margin
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:padding="30dp"
android:background="@android:color/darker_gray"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy birthday!"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="30dp"
android:background="@android:color/darker_gray"
/>
Course 1: Birthday Card (Practice Set)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ladev.happybirthday.MainActivity">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/happybirthday"
android:scaleType="centerCrop"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="36sp"
android:fontFamily="sans-serif-light"
android:textColor="@android:color/white"
android:padding="20dp"
android:text="Happy Birthday, Me!"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="36sp"
android:fontFamily="sans-serif-light"
android:textColor="@android:color/white"
android:padding="20dp"
android:text="From, Lathifah"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
Course 2: Making an App Interactive (Part A)
Building Layout
 Course 2: Making an App Interactive (Part A)
MainActivity.java + and button in MainActivity.java
public class MainActivity extends AppCompatActivity {
//agar activity_main.xml tampil <Button
@Override
android:layout_width="48dp"
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); android:layout_height="wrap_content"
setContentView(R.layout.activity_main); android:text="+"
} android:textAllCaps="true"
//definisi variabel awal integer bernilai 0 android:onClick="increment"
int quantity = 0; android:layout_marginRight="18dp"
//nilai variabel bertambah bila increment dipanggil />
public void increment(View view){
quantity = quantity+1; <Button
display(quantity); android:layout_width="48dp"
} android:layout_height="wrap_content"
//nilai variabel berkurang bila decrement dipanggil android:text="-"
public void decrement(View view){ android:textAllCaps="true"
quantity = quantity-1;
android:onClick="decrement"
display(quantity);
} android:layout_marginLeft="18dp"
//menampilkan nilai variabel quantity pada TextView dengan id: />
quantity_text_view
private void display(int quantity) {
TextView quantityTextView = (TextView)
findViewById(R.id.quantity_text_view);
quantityTextView.setText("" + quantity);
}
 Course 2: Making an App Interactive (Part A)
Order button in MainActivity.java
MainActivity.java <TextView
public class MainActivity extends AppCompatActivity { android:id="@+id/price_text_view"
android:layout_width="wrap_content"
//menampilkan hasil price bila submitOrder dipanggil android:layout_height="wrap_content"
public void submitOrder(View view) { android:text="0"/>
int price = calculatePrice();
displayPrice(price); <Button
} android:layout_width="wrap_content"
android:layout_height="wrap_content"
//menghitung harga untuk ditampilkan di displayPrice android:text="Order"
public int calculatePrice(){ android:textAllCaps="true"
int price = quantity * 3500; android:layout_marginTop="16dp"
return price; android:onClick="submitOrder"
} />

//menampilkan total harga pada TextView dengan id: price_text_view

private void displayPrice(int price) {
TextView priceTextView = (TextView)
findViewById(R.id.price_text_view);
priceTextView.setText("IDR "+price);
}

}
Course 2: Making an App Interactive (Part B)
Nested View Groups
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quantity"
android:textAllCaps="true"
android:layout_marginBottom="16dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="48dp"
android:layout_height="wrap_content"
android:text="+"
android:textAllCaps="true"
android:onClick="increment"
android:layout_marginRight="18dp"
/>
<TextView
android:id="@+id/quantity_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
<Button
android:layout_width="48dp"
android:layout_height="wrap_content"
android:text="-"
android:textAllCaps="true"
android:onClick="decrement"
android:layout_marginLeft="18dp"
/>
</LinearLayout>
 Course 2: Making an App Interactive (Part B)
Submit button in MainActivity.java
MainActivity.java
<TextView
public class MainActivity extends AppCompatActivity {
android:id="@+id/summary_text_view"
//menampilkan pesan bila createOrderSummary dipanggil android:layout_width="wrap_content"
private String createOrderSummary(int price){
String priceMessage = "Name: Lathifah"+
android:layout_height="wrap_content"
"\nQuantity: "+quantity+ android:text=""/>
"\nTotal: Rp "+price+
"\nThank You";
return priceMessage;
}
//menambahkan priceMessage agar dipanggil saat submitOrder
public void submitOrder(View view) {
int price = calculatePrice();
String priceMessage = createOrderSummary(price);
displayPrice(price, priceMessage);
}
//menampilkan pesan pada TextView dengan id: summary_text_view
private void displayPrice(int price, String priceMessage) {
TextView priceTextView = (TextView) findViewById(R.id.price_text_view);
priceTextView.setText("IDR "+price);
TextView textSummary = (TextView) findViewById(R.id.summary_text_view);
textSummary.setText(priceMessage);
} .

}
 Course 3: Object Oriented Programming (Part A)
Create Object with Constructor

Object
Data Type
Variable
Name
= new Object
Data Type
( Input Args );

TextView priceTextView = new TextView(context);

 Course 3: Object Oriented Programming (Part A)
Create Object with Factory Methods

Factory
Object Variable Object
Data Type Name
= Data Type
. Method ( Input Args );
Name

MediaPlayer player = MediaPlayer.create(context);

 Course 3: Object Oriented Programming (Part A)
Call Method on Object

Object Variable Factory

Name . Method Name ( Input Args );

titleTextView.setText(News);
 Course 3: Object Oriented Programming (Part A)
findViewById

private void displayPrice(int price, String priceMessage) { <TextView

TextView priceTextView = (TextView)
findViewById(R.id.price_text_view); android:id="@+id/price_text_view"
priceTextView.setText("IDR "+price);
TextView textSummary = (TextView) android:layout_width="wrap_content"
findViewById(R.id.summary_text_view);
textSummary.setText(priceMessage);
android:layout_height="wrap_content"
} android:text="0"/>
Course 3: Object Oriented Programming (Part B)
Checkbox
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Topping"
android:textAllCaps="true"
android:layout_marginBottom="16dp"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Whipped Cream"
android:id="@+id/whipped_cream"/>
 Course 3: Object Oriented Programming (Part B)
CheckBox in MainActivity.java
//menambah whipped cream
public int calculatePrice(boolean whippedCream){
int price = quantity * 3500;
if(whippedCream){
price = price+500;
}
return price;
}

public void submitOrder(View view) {

CheckBox whippedCream = (CheckBox)findViewById(R.id.whipped_cream);
boolean hasWhippedCream = whippedCream.isChecked();

int price = calculatePrice(hasWhippedCream);

String priceMessage = createOrderSummary(price, hasWhippedCream);
displayPrice(price, priceMessage);
}

private String createOrderSummary(int price, boolean whippedCreamCheck){

String priceMessage = "Name: Lathifah+
"\nQuantity: "+quantity+
"\nTotal: Rp "+price+
"\nAdd Whipped Cream? "+whippedCreamCheck+
"\nThank You";
return priceMessage;
}
Course 3: Object Oriented Programming (Part B)
EditText
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textAllCaps="true"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/name_field"
android:inputType="textCapWords"
android:hint="Put your name here"/>
 Course 3: Object Oriented Programming (Part B)
EditText in MainActivity.java
//menambah nama
public void submitOrder(View view) {
CheckBox whippedCream = (CheckBox)findViewById(R.id.whipped_cream);
boolean hasWhippedCream = whippedCream.isChecked();

EditText nameField = (EditText)findViewById(R.id.name_field);

String name = nameField.getText().toString();

int price = calculatePrice(hasWhippedCream);

String priceMessage = createOrderSummary(price, hasWhippedCream, name);
displayPrice(price, priceMessage);
}

private String createOrderSummary(int price, boolean whippedCreamCheck, String nameText){
String priceMessage = "Name: "+nameText+
"\nQuantity: "+quantity+
"\nTotal: Rp "+price+
"\nAdd Whipped Cream? "+whippedCreamCheck+
"\nThank You";
return priceMessage;
}
 Course 3: Object Oriented Programming (Part B)
Control Flow Statements

public void decrement(View view){
if(quantity==1){
return;
}
quantity = quantity-1;
display(quantity);
}

 Course 3: Object Oriented Programming (Part B)
Intents
public void submitOrder(View view) {
CheckBox whippedCream = (CheckBox)findViewById(R.id.whipped_cream);
boolean hasWhippedCream = whippedCream.isChecked();
EditText nameField = (EditText)findViewById(R.id.name_field);
String name = nameField.getText().toString();
int price = calculatePrice(hasWhippedCream);
String priceMessage = createOrderSummary(price, hasWhippedCream, name);
displayPrice(price, priceMessage);
Intent intent = new Intent(Intent.ACTION_SENDTO);
intent.setData(Uri.parse("mailto:email@mail.com"));
intent.putExtra(Intent.EXTRA_SUBJECT,"Just Java order for "+name);
intent.putExtra(Intent.EXTRA_TEXT,priceMessage);
if(intent.resolveActivity(getPackageManager())!=null){
startActivity(intent);
}
}
Course 3: Object Oriented Programming (Part B)
Styles and Themes in res/values/styles.xml
<resources>

<!-- Base application theme. -->

<style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorAccent</item>
<item name="colorPrimaryDark">@color/colorAccent</item>
<item name="colorAccent">@color/colorPrimary</item>
</style>

</resources>
 Additional Courses
<ScrollView> Multiple Screen:
<LinearLayout> -Mapping
. -XML and Java file
</LinearLayout> handling
</ScrollView> -Icon Changing
 Thank You
Good Luck on
Your Final Project