Lesson 5: Layouts PDF

Lesson 5: Layouts This work is licensed under the Android Development with Kotlin Apache 2 license. 1 v1.0 About this lesson Lesson 5: Layouts Layouts in Android ConstraintLayout Additional topics for Const...

Lesson 5: Layouts This work is licensed under the Android Development with Kotlin Apache 2 license. 1 v1.0 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 Android Development with Kotlin Apache 2 license. 2 Layouts in Android This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Hell 80d account. p Android views are measured in density-independent pixels. o 160d p dp = (width in pixels * 160) screen density This work is licensed under the Android Development with Kotlin Apache 2 license. 5 Screen-density buckets Density qualifier Description DPI estimate ldpi (mostly unused) Low density ~120dpi mdpi (baseline Medium density ~160dpi density) hdpi High density ~240dpi xhdpi Extra-high density ~320dpi xxhdpi Extra-extra-high density ~480dpi xxxhdpi Extra-extra-extra-high ~640dpi density This work is licensed under the Android Development with Kotlin Apache 2 license. 6 Android View rendering cycle Measure Layout Draw This work is licensed under the Android Development with Kotlin Apache 2 license. 7 Drawing region What we see: How it's drawn: This work is licensed under the Android Development with Kotlin Apache 2 license. 8 View margins and padding View with margin View with margin and padding View View This work is licensed under the Android Development with Kotlin Apache 2 license. 9 ConstraintLayout This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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="pare nt" This work is licensed under the Android Development with Kotlin Apache 2 license. 14 Relative positioning constraints Top Hello! Baseline Bottom This work is licensed under the Android Development with Kotlin Apache 2 license. 15 Relative positioning constraints Left Hello! Right Start End This work is licensed under the Android Development with Kotlin Apache 2 license. 16  Simple ConstraintLayout example 2 license. Apache 17 Layout Editor in Android Studio You can click and drag to add constraints to a View. This work is licensed under the Android Development with Kotlin Apache 2 license. 18 Constraint Widget in Layout Editor Fixed Wrap content Match constraints This work is licensed under the Android Development with Kotlin Apache 2 license. 19 Wrap content for width and height This work is licensed under the Android Development with Kotlin Apache 2 license. 20 Wrap content for width, fixed height This work is licensed under the Android Development with Kotlin Apache 2 license. 21 Center a view horizontally This work is licensed under the Android Development with Kotlin Apache 2 license. 22 Use match_constraint Can’t use match_parent on a child view, use match_constraint instead This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 26 Additional topics for ConstraintLayout This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 28 Guidelines in Android Studio This work is licensed under the Android Development with Kotlin Apache 2 license. 29 Example Guideline This work is licensed under the Android Development with Kotlin Apache 2 license. 30 Creating Guidelines layout_constraintGuide_begin layout_constraintGuide_end layout_constraintGuide_percent This work is licensed under the Android Development with Kotlin Apache 2 license. 31 Groups Control the visibility of a set of widgets Group visibility can be toggled in code This work is licensed under the Android Development with Kotlin Apache 2 license. 32 Example group This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 34 Data binding This work is licensed under the Android Development with Kotlin Apache 2 license. 35 Current approach: findViewById() Traverses the View hierarchy each time MainActivity.kt activity_main.xml val name = findViewById(...) findViewById findViewById loc.text = … This work is licensed under the Android Development with Kotlin Apache 2 license. 36 Use data binding instead Bind UI components in your layouts to data sources in your app. MainActivity.kt activity_main.xml binding.loc.text = … This work is licensed under the Android Development with Kotlin Apache 2 license. 37 Modify build.gradle file android {... buildFeatures { dataBinding true } } This work is licensed under the Android Development with Kotlin Apache 2 license. 38 Add layout tag This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 40 Data binding layout variables In MainActivity.kt: binding.name = "John" This work is licensed under the Android Development with Kotlin Apache 2 license. 41 Data binding layout expressions This work is licensed under the Android Development with Kotlin Apache 2 license. 42 Displaying lists with RecyclerView This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 45 View recycling in RecyclerView Boston, If item is scrolled Massachusetts offscreen, it isn’t Chicago, Illinois destroyed. Item is put in Mountain View, a pool to be recycled. California Miami, Florida Seattle, Washington Reno, Nevada onBindViewHolder Nashville, Tennessee binds the view with the new values, and Little Rock, then the view gets Arkansas reinserted in the list. This work is licensed under the Android Development with Kotlin Apache 2 license. 46 Add RecyclerView to your layout This work is licensed under the Android Development with Kotlin Apache 2 license. 47 Create a list item layout res/layout/item_view.xml This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 50  Summary This work is licensed under the Android Development with Kotlin Apache 2 license. 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 bindin g Display a list of text items using a RecyclerView and custom adapter This work is licensed under the Android Development with Kotlin Apache 2 license. 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 Android Development with Kotlin Apache 2 license. 53 Pathway Practice what you’ve learned by completing the pathway: Lesson 5: Layouts This work is licensed under the Android Development with Kotlin Apache 2 license. 54