COMP3330 Ch04 Android Layout PDF

Chapter 4. Android Layout 2024-2025 COMP3330 Interactive Mobile Application Design and Programming Dr. T.W. Chim (E-mail: [email protected]) Department of Computer Science, The University of Hong Kong Agenda Concept of View in Android Android Layout Android Dimension Is...

Chapter 4. Android Layout 2024-2025 COMP3330 Interactive Mobile Application Design and Programming Dr. T.W. Chim (E-mail: [email protected]) Department of Computer Science, The University of Hong Kong Agenda Concept of View in Android Android Layout Android Dimension Issues 2 Concept of View in Android 3 Views The visible parts of Android apps Basic building components for UI Each activity / app is composed of one or more views Each view is an Android class In charge of a rectangle area Handles Drawing Measurement User interactions (events) Scroll, press, key, … Focus change 4 View Hierarchy View ViewGroup Widget Button, field, selection, … ViewGroup ViewGroup View View Layout Linear, relative, … View View Drawing is done from the root. 5 View Hierarchy How about this? ConstraintLayout: ViewGroup LinearLayout: ViewGroup editText: View editText2: View button: View textView: View 6 Properties of View Static appearance Layout, widget Dynamic behavior Event handling How to learn? Look at examples Have a rough idea / impression first, look up later Breadth first traversal Nonlinear 7 Example - Layout Note the 2 ways of closing tags. 8  Example – Java Code “R”: resources “R.id”: resource ID (corresponds to “@+id” in layout file) public class MainActivity extends AppCompatActivity { private Random random; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); random = new Random(); final EditText edit_text1 = (EditText) findViewById(R.id.editText1); final Button button1 = (Button) findViewById(R.id.button1); Button.OnClickListener listener = new Button.OnClickListener() { public void onClick(View dummy) { edit_text1.setText(String.valueOf(random.nextInt(100))); } }; “final” = always contain the same value button1.setOnClickListener(listener); } } 9  Example – Kotlin Code “R”: resources “R.id”: resource ID (corresponds to “@+id” in layout file) class MainActivity : AppCompatActivity() { "?" notation indicates that a data type can take a null value. private var random: Random? = null public override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) random = Random() val edit_text1 = findViewById(R.id.editText1) as EditText val button1 = findViewById(R.id.button1) as Button val listener = View.OnClickListener { edit_text1.setText(random!!.nextInt(100).toString()) } “random” is non-null type and throws an exception if the value is null. button1.setOnClickListener(listener) } } 10 match_parent & wrap_content Button width = match_parent width = wrap_content fill_parent / match_parent (>API 8): Setting the layout of a widget to fill_parent / match_parent will force it to expand to take up as much space as is available within the layout element it's been placed in. wrap_content: Setting a view‘s size to wrap_content will force it to expand only far enough to contain the values (or child controls) it contains. 11 Other Views ImageButton EditText CheckBox RadioGroup ToggleButton 12 Android Layout 13 Layout Specification XML file – structured, human readable doc format, like html Static e.g., Hello World app More orthogonal code e.g., different display size, orientation, language Easier to work with Visualization, debug Common in most situations Can support run-time modifications e.g., XML for default/initial layout, and modify at run-time For Android XML element/attribute parallels to Android class/method element – TextView widget element – LinearLayout view-group 14 XML Layout Example 15 XML Layout Example At run time inflate the xml for Activity.onCreate() no additional coding! public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } 16 XML Attributes ID Needed if the view needs to be referenced by other views or Java / Kotlin code e.g., under layout xml android:id="@+id/my_button“ @: parse and expand +: add to resource (i.e., R.java) Under onCreate() Button myButton = (Button) findViewById(R.id.my_button); Layout parameters layout_*, e.g. … 22 LinearLayout LinearLayout organizes elements along a single line. You specify whether that line is vertical or horizontal using android:orientation. 23  LinearLayout Contradiction???