Building Beautiful Apps using Material components and Kotlin

Transcript

1. Jubril Edu Software Developer Cotta & Cush Ltd @djubreel
2. What do you need for this section? • Android Studio 2.3 + • Basic Android Skills and Minimal Kotlin Knowledge
3. Basic components we’d be using: • Toolbar, AppBarLayout, and CollapsingToolbarLayout • BottomNavigationView • RecyclerView and GridLayoutManager
4. Why Kotlin? • Open Source • Null Safety • Compiles to JVM bytecode and Javascript • Interoperable with Java • Functions Extensions
7. Buildscript{ ext.kotlin_version = “1.1.2-2” repositories{ jcenter() } dependencies{ classpath ‘com.android.tools:gradle:2.3.2’ classpath ‘org.jetbrains.kotlin:kotlin:-gradle-plugin:$kotlin_version’ } } build.gradle (project) apply plugin:’kotlin-android’ build.gradle (app)
8. fun sum(a: Int, b: Int): Int { return a + b } Return type Argument Type Argument name var A; val A; Mutable (Read & write) read only fun sendMessage(message: String?){ if(message != null) mailer.sendMessage(message) } Argument is nullable Body
9. Things to check out in Kotlin: • Method Overloading • Superfunctions • Using TODO() • Extension Functions
10. Clone - https://github.com/djubreel/MaterialWithKotlin.git git reset --hard git checkout step-one Building Beautiful Apps Faster with Material Components on Android using Kotlin
11. • Replace FrameLayout with Coordinating Layout • Add AppBarLayout below RecyclerView • Add attribute below to recyclerview app:layout_behaviour = ”@string/appbar_scrolling_view_behaviour” • Add CollapsingToolbarLayout and NetworkImageView component as its direct child • Add a LinearLayout with two textviews • Uncomment style “Widget.Shrine.CollapsingToolbar” in your styles file • Add the following attributes to the LinearLayout style=”@style/Widget.Shrine.CollapsingToolbarContent” app:layout_collapseMode=”parallax” app:layout_collapseParallaxMultiplier=”0.65” shr_main.xml
12. • Add BottomNavigationView as the last child of the CoordinatingLayout • Res > Android resource directory (menu) > Android resource file > create new menu file (shr_bottom_navigation.xml) <item android:id=”@+id/category_clothing” android:enabled=”true” android:title=”@string/shr_category_clothing” android:icon=”@drawable/ic_favorite_vd_theme_24” app:showAsAction=”ifRoom”/> <item Same as above replace clothing with home android:icon=”@drawable/ic_shrine_vd_theme_24” /> <item Same as above replace home with popsicles android:icon=”@drawable/ic_shopping_cart_vd_theme_24” /> shr_main.xml
13. Public fun shuffleProducts(){ val products = readProductsList() Collections.shuffle(products) adapter?.setProducts(products) } bottom_navigation.setOnNavigationItemSelectedListener{ val layoutManager = product_list.layoutManager as LinearLayoutManager layoutManager.scrollToPositionWithOffset(0,0) shuffleProducts() true } Oncreate bottom_navigation.setOnNavigationReselectedListener{ val layoutManager = product_list.layoutManager as LinearLayoutManager layoutManager.scrollToPositionWithOffset(0,0) } If (savedInstanceState == null){ bottom_navigation.selectedItemId = R.id.category_home } MainActivity.kt
14. Replace product_list.layoutManager = LinearLayoutManager(this) With product_list.layoutManager = GridLayoutManager(this,2) Lastly... MainActivity.kt
15. Resources Kotlin: https://try.kotlinlang.org/