CIS 493/EEC 492 Android Sensor Programming Lecture 3 Wenbing Zhao Department of Electrical Engineering and Computer Science Cleveland State University wenbing@ieee.org 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Outline Fragments User interface 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Fragments Activity is a container for views => typically fills the entire screen Fragments are introduced for large screen devices One activity contains several mini-activities (fragments) 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using Fragments Create a new Android project and name it Fragments In the res/layout folder, add a new layout resource file and name it fragment1.xml. Populate it with the following code <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00FF00"> <TextView android:layout_height="wrap_content" android:text="This is fragment #1" android:textColor="#000000" android:textSize="25sp" /> </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using Fragments Also in the res/layout folder, add another new layout resource file and name it fragment2.xml Populate it as follows <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFE00"> <TextView android:layout_height="wrap_content" android:text="This is fragment #2" android:textColor="#000000" android:textSize="25sp" /> </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using Fragments In activity_main.xml, replace all with in the following code: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.wenbing.fragments.MainActivity"> <fragment android:name="com.username.fragments.Fragment1" android:id="@+id/fragment1" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="match_parent" /> android:name="com. username.fragments.Fragment2" android:id="@+id/fragment2" </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using Fragments Add two Java class files and name them Fragment1.java and Fragment2.java Fagments1.java package ....; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment1, container, false); } 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using Fragments Fagments2.java package ....; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment2, container, false); } To draw the UI for a fragment, override the onCreateView() method. This method returns a View object use a LayoutInflater object to inflate the UI from the specified XML file The container argument refers to the parent ViewGroup, which is the activity in which you are trying to embed the fragment 4/3/2019 CIS 470: Mobile App Development use a LayoutInflater object to inflate the UI from the specified XML file

CIS 470: Mobile App Development Using Fragments 4/3/2019 CIS 470: Mobile App Development

Adding Fragments Dynamically In the same project, modify the activity_main.xml file by commenting out the two <fragment> elements <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" ...... tools:context="com. username.fragments.MainActivity"> <!-- <fragment --> </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

Adding Fragments Dynamics Add the bolded lines in the following code to the MainActivity.java file import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.util.DisplayMetrics; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //---get the current display info--- DisplayMetrics display = this.getResources().getDisplayMetrics(); int width = display.widthPixels; int height = display.heightPixels; ..... Remove: setContentView(R.layout.activity_main); 4/3/2019 CIS 470: Mobile App Development

Adding Fragments Dynamics if (width> height) { //---landscape mode--- Fragment1 fragment1 = new Fragment1(); // android.R.id.content refers to the content view of the activity fragmentTransaction.replace(android.R.id.content, fragment1); } else //---portrait mode--- Fragment2 fragment2 = new Fragment2(); fragmentTransaction.replace(android.R.id.content, fragment2); fragmentTransaction.commit(); FragmentTransactionclass to perform fragment transactions (such as add, remove, or replace) in your activity 4/3/2019 CIS 470: Mobile App Development

Adding Fragments Dynamically 4/3/2019 CIS 470: Mobile App Development

Interactions between Fragments An activity might contain two or more fragments working together to present a coherent UI to the user E.g.: the user taps on an item in that fragment, details about the selected item might be displayed in another fragment Continue in the same project, add bolded statements to Fragment1.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00FF00"> <TextView android:id="@+id/lblFragment1" android:layout_height="wrap_content" android:text="This is fragment #1" android:textColor="#000000" android:textSize="25sp" /> </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Interactions between Fragments Add the following bolded lines to fragment2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...... <TextView ..... /> <Button android:id="@+id/btnGetText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Get text in Fragment #1" android:textColor="#000000" android:onClick="onClick" /> </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Interactions between Fragments In activity_main.xml, uncomment the two fragments: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" ...... tools:context="com. username.fragments.MainActivity"> <fragment android:name="com.username.fragments.Fragment1" android:id="@+id/fragment1" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="match_parent" /> android:name="com. username.fragments.Fragment2" android:id="@+id/fragment2" </LinearLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Interactions between Fragments Modify the MainActivity.java file by commenting out the code added in the previous step, and add setContentView() back public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //---get the current display info--- DisplayMetrics display = this.getResources().getDisplayMetrics(); int width = display.widthPixels; int height = display.heightPixels; ..... 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Interactions between Fragments if (width> height) { //---landscape mode--- Fragment1 fragment1 = new Fragment1(); // android.R.id.content refers to the content view of the activity fragmentTransaction.replace(android.R.id.content, fragment1); } else //---portrait mode--- Fragment2 fragment2 = new Fragment2(); fragmentTransaction.replace(android.R.id.content, fragment2); fragmentTransaction.commit(); */ 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Interactions between Fragments Add the bolded statements to the Fragment2.java Fagments2.java public class Fragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {...... } public void onStart() { super.onStart(); //---Button view--- Button btnGetText = (Button)getActivity().findViewById(R.id.btnGetText); btnGetText.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { TextView lbl = (TextView) getActivity().findViewById(R.id.lblFragment1); Toast.makeText(getActivity(), lbl.getText(), Toast.LENGTH_SHORT).show(); }); import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.TextView; import android.widget.Toast; 4/3/2019 CIS 470: Mobile App Development use a LayoutInflater object to inflate the UI from the specified XML file

CIS 470: Mobile App Development Interactions between Fragments 4/3/2019 CIS 470: Mobile App Development use a LayoutInflater object to inflate the UI from the specified XML file

CIS 470: Mobile App Development Homework #3 Notepad app with custom keypad Top fragment: display the note entered Bottom fragment: display several rows of letters, numbers, and symbols (each as a button) for text input; when a user push a button, the corresponding input is appended in the top fragment 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development User Interface How ViewGroups and Layouts can be used to lay out your views and organize your application screen How to adapt and manage changes in screen orientation How to create the UI programmatically How to listen for UI notifications 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Components of a Screen The basic unit of an Android application is an activity, which displays the UI of your application using views and ViewGroups The activity may contain widgets such as buttons, labels, textboxes, etc. Typically, you define your UI using an XML file located in the res/layout folder of your project During runtime, you load the XML UI in the onCreate() method handler in your Activity class, using the setContentView() method of the Activity class During compilation, each element in the XML file is compiled into its equivalent Android GUI class @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Views and ViewGroups An activity contains views and ViewGroups A view is a widget that has an appearance on screen Examples: buttons, labels, and text boxes A view derives from the base class android.view.View A ViewGroup (which is itself a special type of view) is to group views logically—such as a group of buttons with a similar purpose Examples: RadioGroup and ScrollView A ViewGroup derives from the base class android.view.ViewGroup Another type of ViewGroup is a Layout used to group and arrange views visually on the screen Also derives from android.view.ViewGroup FrameLayout, LinearLayout, TableLayout, TableRow, GridLayout, RelativeLayout 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development FrameLayout The FrameLayout is the most basic of the Android layouts FrameLayouts are built to hold one View The FrameLayout is used to help you control the stacking of single view as the screen is resized (or screens with different resolutions) 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development LinearLayout The LinearLayout arranges views in a single column or a single row Child views can be arranged either horizontally or vertically <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TextView android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> fill_parent: width of the<TextView> element fills the entire width of its parent wrap_content: its height is the height of its content 4/3/2019 CIS 470: Mobile App Development

Common Attributes of Views & ViewGroups 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Units of Measurement Size of an element on an Android UI dp—Density-independent pixel. 1 dp is equivalent to one pixel on a 160 dpi screen sp—Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes pt—Point. A point is defined to be 1/72 of an inch, based on the physical screen size px—Pixel. Corresponds to actual pixels on the screen. Using this unit is not recommended 4/3/2019 CIS 470: Mobile App Development

Layout Weight & Gravity <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Button android:layout_width="160dp" android:layout_height="0dp" android:text="Button" android:layout_gravity="left" android:layout_weight="1" /> android:layout_gravity="center" android:layout_weight="2" /> android:layout_gravity="right" android:layout_weight="3" /> </LinearLayout> Layout Weight & Gravity The layout_gravity attribute indicates the positions the views should gravitate toward, whereas the layout_weight attribute specifies the distribution of available space The three buttons occupy about 16.6 percent (1/(1+2+3) * 100), 33.3 percent (2/(1+2+3) * 100), and 50 percent (3/(1+2+3) * 100) of the available height, respectively The height of each button is set to 0dp because the layout orientation is vertical 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development LinearLayout Homework #4 & 5: Create an app that produces the left output Create another app that produces the right output (combination of vertical and horizontal layouts) 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development TableLayout The TableLayout Layout groups views into rows and columns Use the <TableRow> element to designate a row in the table Each row can contain one or more views. Each view you place within a row forms a cell The width of each column is determined by the largest width of each cell in that column 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development two columns and four rows in the TableLayout <EditText android:id="@+id/txtPassword" android:inputType="textPassword" /> </TableRow> <TableRow> <TextView /> <CheckBox android:id="@+id/chkRememberPassword" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Remember Password" <Button android:id="@+id/buttonSignIn" android:text="Log In" /> </TableLayout> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent"> <TableRow> <TextView android:text="User Name:" android:width ="120dp" /> <EditText android:id="@+id/txtUserName" android:width="200dp" /> </TableRow> android:text="Password:" 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development TableLayout Homework #6: create an app with the TableLayout as described earlier and shown on the right 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development RelativeLayout The RelativeLayout enables you to specify how child views are positioned relative to each other RelativeLayout has attributes that enable it to align with another view. These attributes are as follows: layout_alignParentTop: If true, makes the top edge of this view match the top edge of the parent layout_alignParentStart: If true, makes the start edge of this view match the start edge of the parent layout_alignStart: Makes the start edge of this view match the start edge of the given anchor view ID layout_alignEnd layout_below: Positions the top edge of this view below the given anchor view ID. Accommodates top margin of this view and bottom margin of anchor view layout_centerHorizontal: If true, centers this child horizontally within its parent 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development RelativeLayout <Button android:id="@+id/btnSave" android:layout_width="125dp" android:layout_height="wrap_content" android:text="Save" android:layout_below="@+id/txtComments" android:layout_alignEnd="@+id/txtComments" /> <RelativeLayout android:id="@+id/RLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:id="@+id/lblComments" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Comments" android:layout_alignParentTop="true" android:layout_alignParentStart="true" /> <EditText android:id="@+id/txtComments" android:layout_height="100dp” android:textSize="18sp" android:layout_alignStart="@+id/lblComments" android:layout_below="@+id/lblComments" android:layout_centerHorizontal="true" /> <Button android:id="@+id/btnCancel" android:layout_width="124dp" android:layout_height="wrap_content" android:text="Cancel" android:layout_below="@+id/txtComments" android:layout_alignStart="@+id/txtComments" /> </RelativeLayout> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development RelativeLayout Homework #7: create an app that produces the display on the right 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development User Interface ScrollView Adapting to Display Orientation Action Bar Creating UI Programmatically 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development ScrollView A ScrollView is a special type of FrameLayout in that it enables users to scroll through a list of views that occupy more space than the physical display The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayout 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development ScrollView <Button android:id="@+id/button3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button 3" /> <EditText android:id="@+id/txt" android:layout_height="600dp" /> android:id="@+id/button4" android:text="Button 4" /> android:id="@+id/button5" android:text="Button 5" /> </LinearLayout> </ScrollView> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:layout_height="wrap_content" android:orientation="vertical" android:focusable="true" android:focusableInTouchMode="true"> <Button android:id="@+id/button1" android:text="Button 1" /> android:id="@+id/button2" android:text="Button 2" /> 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development ScrollView Scroll down to see this: 4/3/2019 CIS 470: Mobile App Development

Adapting to Display Orientation Two techniques to handle changes in screen orientation: Anchoring—The easiest way is to “anchor” your views to the four edges of the screen. When the screen orientation changes, the views can anchor neatly to the edges Resizing and repositioning—Resizing each and every view according to the current screen orientation 4/3/2019 CIS 470: Mobile App Development

Anchoring Views with RelativeLayout <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bottom Left" android:layout_alignParentStart="true" android:layout_alignParentBottom="true" /> android:id="@+id/button4" android:text="Bottom Right" android:layout_alignParentEnd="true" android:id="@+id/button5" android:layout_width="fill_parent" android:text="Middle" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Top Left" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> android:id="@+id/button2" android:text="Top Right" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" /> 4/3/2019 CIS 470: Mobile App Development

Anchoring Views with RelativeLayout layout_alignParentStart—Aligns the view to the left of the parent view layout_alignParentEnd—Aligns the view to the right of the parent view layout_alignParentTop—Aligns the view to the top of the parent view layout_alignParentBottom—Aligns the view to the bottom of the parent view layout_centerVertical—Centers the view vertically within its parent view layout_centerHorizontal—Centers the view horizontally within its parent view 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Anchoring Views with RelativeLayout Homework #8: Build an app that has the following output 4/3/2019 CIS 470: Mobile App Development

Detecting Orientation Changes Programmatically detect the current orientation of your activity: getResources() @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){ Log.d("StateInfo", "Landscape"); }else if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){ Log.d("StateInfo", "Portrait"); } 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Controlling the Orientation of the Activity Sometimes, you might want the app to be displayed in only a certain orientation Using setRequestOrientation() method Or Using android:screenOrientation attribute on the <activity> element in AndroidManifest import android.content.pm.ActivityInfo; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //---change to landscape mode--- setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); } 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Using android:screenOrientation attribute on the <activity> element in AndroidManifest <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.username.orientations"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:screenOrientation="landscape"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> Two other values that you can specify in the android:screenOrientation attribute: portrait—Portrait mode sensor—Based on the accelerometer (default) 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Action Bar Action Bar displays the application icon and the activity title Optionally, on the right side of the Action Bar are action items 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Adding Action Items Using Android Studio, create a new Android project and name it MyActionBar When prompted, select a Basic Activity as the template Modify the MainActivity.java file as follows import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public class MainActivity extends AppCompatActivity { 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { Snackbar.make(view,"Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show(); } }); public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. //getMenuInflater().inflate(R.menu.menu_main, menu); CreateMenu(menu); return true; 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development private void CreateMenu(Menu menu) { MenuItem mnu1 = menu.add(0, 0, 0, "Item 1"); { mnu1.setIcon(R.mipmap.ic_launcher); mnu1.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); } MenuItem mnu2 = menu.add(0, 1, 1, "Item 2"); mnu2.setIcon(R.mipmap.ic_launcher); mnu2.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); MenuItem mnu3 = menu.add(0, 2, 2, "Item 3"); mnu3.setIcon(R.mipmap.ic_launcher); mnu3.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); MenuItem mnu4 = menu.add(0, 3, 3, "Item 4"); mnu4.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); MenuItem mnu5 = menu.add(0, 4, 4,"Item 5"); mnu5.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM); 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development private boolean MenuChoice(MenuItem item) { switch (item.getItemId()) { case 0: Toast.makeText(this, "You clicked on Item 1", Toast.LENGTH_LONG).show(); return true; case 1: Toast.makeText(this, "You clicked on Item 2",Toast.LENGTH_LONG).show(); case 2: Toast.makeText(this, "You clicked on Item 3",Toast.LENGTH_LONG).show(); case 3: Toast.makeText(this, "You clicked on Item 4",Toast.LENGTH_LONG).show(); case 4: Toast.makeText(this, "You clicked on Item 5",Toast.LENGTH_LONG).show(); } return false; 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return MenuChoice(item); 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Overflow menu Clicking a menu item 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development Creating UI Programmatically Using Android Studio, create a new Android project and name it UICode In the MainActivity.java file, add the bold statements in the following code: import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutCompat; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayoutCompat.LayoutParams params = new LinearLayoutCompat.LayoutParams( LinearLayoutCompat.LayoutParams.WRAP_CONTENT, LinearLayoutCompat.LayoutParams.WRAP_CONTENT); LinearLayout layout = new LinearLayout(this); //---create a layout--- layout.setOrientation(LinearLayout.VERTICAL); TextView tv = new TextView(this); //---create a textview--- tv.setText("This is a TextView"); tv.setLayoutParams(params); Button btn = new Button(this); //---create a button--- btn.setText("This is a Button"); btn.setLayoutParams(params); layout.addView(tv); //---adds the textview--- layout.addView(btn); //---adds the button--- //---create a layout param for the layout--- LinearLayoutCompat.LayoutParams layoutParam = LinearLayoutCompat.LayoutParams.WRAP_CONTENT ); this.addContentView(layout, layoutParam); } 4/3/2019 CIS 470: Mobile App Development

CIS 470: Mobile App Development 4/3/2019 CIS 470: Mobile App Development