1. User Interface Development
CSE 5236: Mobile Application Development
Instructor: Adam C. Champion, Ph.D.
Course Coordinator: Dr. Rajiv Ramnath
Reading: Big Nerd Ranch Guide, Chapter 7 (Fragments)

2. Outline
UI Support in Android
Fragments

3. UI Support in the Android SDK
“Inverted” paradigm
Each subclass constrains rather than extends functionality
Hundreds of methods are exposed – Augh!!
Base classes:
ViewGroup base class for composite elements
View base class for terminal UI components

4. View Hierarchy
# = SDK Version number

5. ViewGroup Hierarchy Direct Subclasses: 19 indirect subclasses. See:
AbsoluteLayout
AdapterView<T extends Adapter>
FragmentBreadCrumbs
FrameLayout
GridLayout
LinearLayout
PagerTitleStrip
RelativeLayout
SlidingDrawer
ViewPager
19 indirect subclasses. See:

6. Sample Layout, Login Activity
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="20dip">
<LinearLayout android:orientation="vertical
...
<TextView ... />
<TextView ... />
<EditText ... />
<EditText ... />
<Button ... />
</LinearLayout>
</ScrollView>

7. Layout Configuration ID: android:id="@+id/username_text” Parameters:
Used if handle to the widget is needed
Parameters:
layout_width, layout_height
layout_marginTop, ...Right, layout_margin
orientation
Can be combined:
layout_gravity=“bottom|right”
Constants: match_parent, wrap_content
Width and height specifications: dp, in, mm, px, sp (scaled pixels based on font size)
A wide range of LayoutParams
Resources – e.g. backgrounds
Blank canvases using a (generic) View element in the layout
See Android SDK book Chapter 5 for details

9. Adding Resources
Resources can also be added by right-clicking on res directory, selecting New→Android Resource File

10. Other Layout Parameters and Techniques
Inherit parameters from enclosing elements
layout_span - to span multiple columns
Empty views to add blank canvases to be filled later (see later)
Shrink or stretch columns as needed:
shrinkColumns, stretchColumns
RelativeLayout allows window manager to manage size

11. Linking a UI to a Fragment: Java
// LoginActivity.java public class LoginActivity extends SingleFragmentActivity protected Fragment createFragment() { return new LoginFragment(); } } // public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_login, container, false); // Real code handles rotation mUsernameEditText = (EditText) v.findViewById(R.id.username_text); mPasswordEditText = (EditText) v.findViewById(R.id.password_text); Button loginButton = (Button) v.findViewById(R.id.login_button); loginButton.setOnClickListener(this); // Real code checks for nullity Button cancelButton = (Button) v.findViewById(R.id.cancel_button); cancelButton.setOnClickListener(this); Button newUserButton = (Button) v.findViewById(R.id.new_user_button); newUserButton.setOnClickListener(this); return v; }
You can also set up listener objects in Activities using onCreate()

12. Linking a UI to a Fragment: Kotlin
// LoginActivity.kt class LoginActivity : SingleFragmentActivity() { override fun createFragment(): Fragment { return LoginFragment() } } // LoginFragment.kt override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val v: View = inflater.inflate(R.layout.fragment_login, container, false) // Real code handles rotation mUsernameEditText = v.findViewById<EditText>(R.id.username_text) mPasswordEditText = v.findViewById<EditText>(R.id.password_text) val loginButton = v.findViewById<Button>(R.id.login_button) loginButton?.setOnClickListener(this) val cancelButton = v.findViewById<Button>(R.id.cancel_button) cancelButton?.setOnClickListener(this) val newUserButton = v.findViewById<Button>(R.id.new_user_button) newUserButton?.setOnClickListener(this) return v }

13. Creating a Custom Widget: Layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#676767" android:gravity="center_horizontal" android:padding="20dip"> <com.wiley.fordummies.androidsdk.tictactoe.Board android:layout_height="280dip"/> ... </LinearLayout>

14. Creating a Custom Widget: Java
// Board.java public class Board extends View { // public Board(Context context, AttributeSet attributes) { super(context, attributes); // setFocusable(true); setFocusableInTouchMode(true); // } // protected void onSizeChanged(int w, int h, int oldw, int oldh) { // super.onSizeChanged(w, h, oldw, oldh); protected void onDraw(Canvas canvas) { super.onDraw(canvas); // } }
Instantiating the view:
// LoginFragment.java, onCreateView() and setupBoard()
// onCreateView
v = inflater.inflate(R.layout.fragment_game_session, . . .);
// setupBoard()
mBoard = (Board) v.findViewById(R.id.board);

15. Creating a Custom Widget: Kotlin
// Board.kt class Board(context: Context, attributes: AttributeSet) : View(context, attributes) { init { isFocusable = true isFocusableInTouchMode = true // } override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { // super.onSizeChanged(w, h, oldw, oldh) } // override fun onDraw(canvas: Canvas) { super.onDraw(canvas) // . . .
Instantiating the view:
// LoginFragment.kt, onCreateView() and setupBoard()
// onCreateView()
v = inflater.inflate(R.layout.fragment_game_session, container, false)
// setupBoard()
mBoard = (Board) v.findViewById(R.id.board)

16. Creating a Layout via Code
// public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layout = new LinearLayout(this); Button dohButton = new Button(this); dohButton.setText(“In case of meltdown, Push Me!”); layout.addView(dohButton); setContentView(layout); }

17. Styles and Themes (1) Use: Definition: Inheritance: <EditText
android:text=”Hello” />
Definition:
<?xml version=”1.0” encoding=”utf-8”?>
<resources>
<style name=”DarkBold”>
<item name=”android:layout_width”>
match_parent
</item>
<item name=”android:layout_height”>
wrap_content
... more parameters ...
</style>
</resources>
Inheritance:
<style name=“DarkPhone”
<item name=”android:phoneNumber”>true</item>
</style>

18. Styles and Themes (2)
Stored in res/values/ directory with .xml extension (name not relevant)
Can set application-wide and activity-specific styles (aka themes):
Set themes in AndroidManifest.xml on <application> tag or <Activity> tag
<application
<activity
Can even create version-specific layout files
Ref:

19. Outline
UI Support in Android
Fragments

20. Fragments and Their Rationale
A composite UI component that handles its own UI
Multiple Fragments in an Activity
A separate class hierarchy: Fragment, DialogFragment, ListFragment, PreferenceFragment, WebViewFragment
Goals:
Further separate UI from Activity. Separate UI design from Activity design
UI should have its own lifecycle and flow
Should be able to add or remove UI components while activity is running
Primary driver: Tablets!

21. Example – Login and Account

22. Portrait Layout: Login
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="
...>
<LinearLayout...>
<TextView
<EditText
android:text="Enter Password".../>
<Button
</LinearLayout>
</ScrollView>

23. Portrait Layout: Account
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
<FrameLayout .../> ⟸ Placeholder for fragment
<Button
</LinearLayout>
What happened to Landscape layout of AccountFragment?

24. Landscape Layout: Login
<?xml version="1.0" encoding="utf-8"?> <LinearLayout... android:orientation="horizontal” ...> ⟸ NOTE HORIZONTAL LAYOUT <ScrollView ... > <LinearLayout .. > <TextView ... /> <EditText.../> <TextView.../> <Button.../> </LinearLayout> </ScrollView> <fragment class="com.wiley.fordummies.androidsdk.tictactoe.AccountFragment" android:layout_weight="1" android:layout_width="0px" android:layout_height="match_parent" android:background="# "/>

25. AccountFragment: Portrait Layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout ...> <LinearLayout...> <TextView android:text="New Account" .../> <TextView android:text="Username”.../> <EditText <TextView android:text="Password”.../> <EditText <TextView android:text="Confirm Password" .../> <EditText <Button "/> </LinearLayout>

26. AccountFragment: Landscape Layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout...> <TextView android:text="New Account”.../> <TextView android:text="Username”.../> <EditText <TextView android:text="Password" .../> <EditText <TextView android:text="Confirm Password" .../> <EditText <LinearLayout ... > <Button <Button </LinearLayout>

27. LoginFragment: Java
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v; int rotation = getActivity().getWindowManager().getDefaultDisplay().getRotation(); if (rotation == Surface.ROTATION_90 || rotation == Surface.ROTATION_270) { v = inflater.inflate(R.layout.fragment_login_land, container, false); } else { v = inflater.inflate(R.layout.fragment_login, container, false); } mUsernameEditText = (EditText) v.findViewById(R.id.username_text); mPasswordEditText = (EditText) v.findViewById(R.id.password_text); Button loginButton = (Button) v.findViewById(R.id.login_button); if (loginButton != null) { loginButton.setOnClickListener(this); } Button cancelButton = (Button) v.findViewById(R.id.cancel_button); if (cancelButton != null) { cancelButton.setOnClickListener(this); } Button newUserButton = (Button) v.findViewById(R.id.new_user_button); if (newUserButton != null) { newUserButton.setOnClickListener(this); } return v; }

28. LoginFragment: Kotlin
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val v: View val rotation = activity.windowManager.defaultDisplay.rotation if (rotation == Surface.ROTATION_90 || rotation == Surface.ROTATION_270) { v = inflater.inflate(R.layout.fragment_login_land, container, false) } else { v = inflater.inflate(R.layout.fragment_login, container, false) } mUsernameEditText = v.findViewById<EditText>(R.id.username_text) mPasswordEditText = v.findViewById<EditText>(R.id.password_text) val loginButton = v.findViewById<Button>(R.id.login_button) loginButton?.setOnClickListener(this) val cancelButton = v.findViewById<Button>(R.id.cancel_button) cancelButton?.setOnClickListener(this) val newUserButton = v.findViewById<Button>(R.id.new_user_button) newUserButton?.setOnClickListener(this) return v }

29. AccountFragment: onCreateView(): Java
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View v = inflater.inflate(R.layout.accountfragment, container, false); Activity activity = getActivity(); if (activity != null){ int rotation = activity.getWindowManager().getDefaultDisplay().getRotation(); mEtUsername = v.findViewById(R.id.username); mEtPassword = v.findViewById(R.id.password); mEtConfirm = v.findViewById(R.id.password_confirm); Button btnAdd = v.findViewById(R.id.done_button); btnAdd.setOnClickListener(this); Button btnCancel = v.findViewById(R.id.cancel_button); btnCancel.setOnClickListener(this); Button btnExit = v.findViewById(R.id.exit_button); if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180) { btnExit.setOnClickListener(this); } else { btnExit.setVisibility(View.GONE); } return v; }

30. AccountFragment: onCreateView(): Kotlin
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val v = inflater.inflate(R.layout.fragment_account, container, false) mEtUsername = v.findViewById(R.id.username) mEtPassword = v.findViewById (R.id.password) mEtConfirm = v.findViewById (R.id.password_confirm) val btnAdd = v.findViewById (R.id.done_button) btnAdd.setOnClickListener(this) val btnCancel = v.findViewById(R.id.cancel_button) btnCancel.setOnClickListener(this) return v }

31. AccountFragment: onClick(): Java
@Override public void onClick(View view) { switch (view.getId()) { case R.id.done_button: createAccount(); break; case R.id.cancel_button: mEtUsername.setText(""); mEtPassword.setText(""); mEtConfirm.setText(""); break; case R.id.exit_button: FragmentActivity activity = getActivity(); if (activity != null) { activity.getSupportFragmentManager().popBackStack(); } } }

32. AccountFragment: onClick(): Kotlin
override fun onClick(view: View) { when (view.id) { R.id.done_button -> createAccount() R.id.cancel_button -> { mEtUsername.setText("") mEtPassword.setText("") mEtConfirm.setText("") } } }

33. Questions and comments?
Thank You
Questions and comments?