Unit 2 - Lesson 5 Layouts.pdf

Lesson 5: Layouts This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin v1.0...

Lesson 5: Layouts This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin v1.0 1 About this lesson Lesson 5: Layouts Layouts in Android ConstraintLayout Additional topics for ConstraintLayout Data binding Displaying lists with RecyclerView Summary This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 2 Layouts in Android This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 3 Android devices Android devices come in many different form factors. More and more pixels per inch are being packed into device screens. Developers need the ability to specify layout dimensions that are consistent across devices. This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 4 Density-independent pixels (dp) Use dp when specifying sizes in your layout, such as the width or height of views. Density-independent pixels (dp) take screen density into account. Android views are measured in Hello 80dp density-independent pixels. dp = (width in pixels * 160) 160dp screen density This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 5 Screen-density buckets Density qualifier Description DPI estimate ldpi (mostly unused) Low density ~120dpi mdpi (baseline density) Medium density ~160dpi hdpi High density ~240dpi xhdpi Extra-high density ~320dpi xxhdpi Extra-extra-high density ~480dpi xxxhdpi Extra-extra-extra-high density ~640dpi This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 6 Android View rendering cycle Measure Layout Draw This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 7 Drawing region What we see: How it's drawn: This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 8 View margins and padding View with margin View with margin and padding View View View This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 9 ConstraintLayout This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 10 Deeply nested layouts are costly Deeply nested ViewGroups require more computation Views may be measured multiple times Can cause UI slowdown and lack of responsiveness Use ConstraintLayout to avoid some of these issues! This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 11 What is ConstraintLayout? Recommended default layout for Android Solves costly issue of too many nested layouts, while allowing complex behavior Position and size views within it using a set of constraints This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 12 What is a constraint? A restriction or limitation on the properties of a View that the layout attempts to respect This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 13 Relative positioning constraints Can set up a constraint relative to the parent container Format: layout_constraint_toOf Example attributes on a TextView: app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 14 Relative positioning constraints Top Hello! Baseline Bottom This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 15 Relative positioning constraints Left Hello! Right Start End This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 16  Simple ConstraintLayout example This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 17 Layout Editor in Android Studio You can click and drag to add constraints to a View. This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 18 Constraint Widget in Layout Editor Fixed Wrap content Match constraints This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 19 Wrap content for width and height This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 20 Wrap content for width, fixed height This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 21 Center a view horizontally This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 22 Use match_constraint Can’t use match_parent on a child view, use match_constraint instead This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 23 Chains Let you position views in relation to each other Can be linked horizontally or vertically Provide much of LinearLayout functionality This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 24 Create a Chain in Layout Editor 1. Select the objects you want to be in the chain. 2. Right-click and select Chains. 3. Create a horizontal or vertical chain. This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 25 Chain styles Adjust space between views with these different chain styles. Spread Chain Spread Inside Chain Weighted Chain Packed Chain This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 26 Additional topics for ConstraintLayout This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 27 Guidelines Let you position multiple views relative to a single guide Can be vertical or horizontal Allow for greater collaboration with design/UX teams Aren't drawn on the device This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 28 Guidelines in Android Studio This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 29 Example Guideline This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 30 Creating Guidelines layout_constraintGuide_begin layout_constraintGuide_end layout_constraintGuide_percent This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 31 Groups Control the visibility of a set of widgets Group visibility can be toggled in code This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 32 Example group This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 33 Groups app code override fun onClick(v: View?) { if (group.visibility == View.GONE) { group.visibility = View.VISIBLE button.setText(R.string.hide_details) } else { group.visibility = View.GONE button.setText(R.string.show_details) } } This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 34 Data binding This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 35 Current approach: findViewById() Traverses the View hierarchy each time MainActivity.kt activity_main.xml findViewById val name = findViewById(...) findViewById val loc = findViewById(...) name.text = … findViewById loc.text = … This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 36 Use data binding instead Bind UI components in your layouts to data sources in your app. MainActivity.kt activity_main.xml initialize binding Val binding:ActivityMainBinding binding.name.text = … binding.loc.text = … This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 37 Modify build.gradle file android {... buildFeatures { dataBinding true } } This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 38 Add layout tag This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 39 Layout inflation with data binding Replace this setContentView(R.layout.activity_main) with this val binding: ActivityMainBinding = DataBindingUtil.setContentView( this, R.layout.activity_main) binding.username = "Melissa" This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 40 Data binding layout variables In MainActivity.kt: binding.name = "John" This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 41 Data binding layout expressions This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 42 Displaying lists with RecyclerView This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 43 RecyclerView Widget for displaying lists of data "Recycles" (reuses) item views to make scrolling more performant Can specify a list item layout for each item in the dataset Supports animations and transitions This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 44 RecyclerView.Adapter Supplies data and layouts that the RecyclerView displays A custom Adapter extends from RecyclerView.Adapter and overrides these three functions: getItemCount onCreateViewHolder onBindViewHolder This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 45 View recycling in RecyclerView Boston, Massachusetts If item is scrolled offscreen, it isn’t Chicago, Illinois destroyed. Item is put in Mountain View, California a pool to be recycled. Miami, Florida Seattle, Washington Reno, Nevada onBindViewHolder binds Nashville, Tennessee the view with the new values, and then the view Little Rock, Arkansas gets reinserted in the list. This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 46 Add RecyclerView to your layout This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 47 Create a list item layout res/layout/item_view.xml This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 48  Create a list adapter class MyAdapter(val data: List) : RecyclerView.Adapter() { class MyViewHolder(val row: View) : RecyclerView.ViewHolder(row) { val textView = row.findViewById(R.id.number) } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder { val layout = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false) return MyViewHolder(layout) } override fun onBindViewHolder(holder: MyViewHolder, position: Int) { holder.textView.text = data.get(position).toString() } override fun getItemCount(): Int = data.size This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 49 Set the adapter on the RecyclerView In MainActivity.kt: override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val rv: RecyclerView = findViewById(R.id.rv) rv.layoutManager = LinearLayoutManager(this) rv.adapter = MyAdapter(IntRange(0, 100).toList()) } This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 50  Summary This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 51 Summary In Lesson 5, you learned how to: Specify lengths in dp for your layout Work with screen densities for different Android devices Render Views to the screen of your app Layout views within a ConstraintLayout using constraints Simplify getting View references from layout with data binding Display a list of text items using a RecyclerView and custom adapter This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 52 Learn more Pixel density on Android Spacing Device metrics Type scale Build a Responsive UI with ConstraintLayout Data Binding Library Create dynamic lists with RecyclerView This work is licensed under the Apache 2 license. Apache 2 license Android Development with Kotlin 53