Hello Su Myat Senior Android Developer LOMOTIF Twitter : @SuMyatHtun9 GDE for Android Women Teachmakers Ambassador Currently teaching myself compose 

OVERVIEW What we’ll talk about today 1. What you will need to know before you started create an android app ‣ What’s Android ?? ‣ language - google recommended programming for developing android apps. ‣ Android Studio - we use to write our code for android app 2. Sample Movie App in Action: let’s get our hands dirty ;) 

I: Hello Android 

OVERVIEW What’s Android ‣ A mobile operation system that is developed by Google ‣ Support many different devices such as phones, tablets, tvs, wears and even cars. ‣ Demand very hight for Android career since most used mobile operating system in the world ‣ Easy to start - it’s probably easier than you think ‣ Easily find free courses such as videos, code labs, even real world projects 

WHAT YOU’LL NEED TO START BUILDING YOUR FIRST APP What you’ll need to develop apps ‣ You need a computer that’s powerful enough to run Android Studio ‣ You need stable internet connection ‣ You need to set up Android Studio in your computer ‣ You can start with even your programming in general 

INSTALL ANDROID STUDIO https://developer.android.com/studio/ 

CHOOSE YOUR OPTIONS https://developer.android.com/studio/#downloads 

For more detail: Go to the following link, and complete installing android studio on your computer Android Studio : https://bit.ly/3EgdmQs 

CREATE A NEW PROJECT 

CHOOSE DEFAULT EMPTY ACTIVITY 

CHOOSE DEFAULT EMPTY ACTIVITY 

MAINLY TWO FACTS YOU NEED TO KNOW In App ‣ Layout - describes how’s your app’s ui look like ‣ Buttons, TextViews, InputText, Image, etc.. ‣ Activities - behind the layout ‣ It tell your buttons or other views what to do 

WHAT YOU’LL NEED TO START BUILDING YOUR FIRST APP Variables in kotlin ‣ Val ‣ Things that don’t change like your birthday ‣ Var ‣ Things that can change such as your wearing clothes 

LET’S CREATE THIS APP ON HANDS class MainActivity : AppCompatActivity() { private var count = 0; override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val txtShowCount = findViewById(R.id.txt_show_count) val btnCount = findViewById(R.id.btn_couting) btnCount.setOnClickListener { count++ txtShowCount.text = "Counting : ${count}" } } } 

MAIN ACTIVITY 

LAYOUT 

YOU CAN CRATE WITH RELATIVELAYOUT TOO 

LET’S CREATE THIS APP ON HANDS class MainActivity : AppCompatActivity() { private var count = 0; override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val txtShowCount = findViewById(R.id.txt_show_count) val btnCount = findViewById(R.id.btn_couting) btnCount.setOnClickListener { count++ txtShowCount.text = "Counting : ${count}" } } } 

Yayyyyy! We successfully developed our first app. 

I: A Movie Sample App 

What you’ll need: Go to the following link, and access the sample project I created on GitHub : https://github.com/suhtun/amovie And branch out “develop” branch 

SAMPLE APP UI ‣ Retrofit for REST API communication ‣ Coroutine for managing background thread ‣ ViewModel for store UI-related data that survive configuration changes such as rotate screen ‣ LiveData for Build data objects that notify views when the underlying database changes. ‣ Glide for image loading 

DEPENDENCIES // RecyclerView implementation 'androidx.recyclerview:recyclerview:1.3.0-alpha01' // Coil implementation "io.coil-kt:coil:1.4.0" //Retrofit implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.google.code.gson:gson:2.8.7' implementation 'com.squareup.retrofit2:converter-gson:2.9.0' implementation 'com.squareup.okhttp3:logging-interceptor:4.9.1' //Coroutines implementation ‘org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.2' //LifeCycle implementation 'androidx.lifecycle:lifecycle-common:2.4.0' 

ORGANISE OUR PACKAGES BY CATEGORY ‣ Utils for hold all helpers supporting code ‣ Ui for all UI related classes such as activity, adapter, ui model ‣ Repository handle data operation such as data from network or local storage ‣ network for all network code 

UTIL > STATUS ENUM CLASS REPRESENT THE UI STATE enum class Status { SUCCESS, ERROR, LOADING } 

UTIL> RESOURCE CLASS HOLDS A VALUE WITH IT’S STATUS data class Resource(val status: Status, val data: T?, val message: String?) { companion object { fun success(data: T): Resource = Resource(status = Status.SUCCESS, data = data, message = null) fun error(data: T?, message: String): Resource = Resource(status = Status.ERROR, data = data, message = message) fun loading(data: T?): Resource = Resource(status = Status.LOADING, data = data, message = null) } } 

Well done! ‣ Utils for hold all helpers supporting code ‣ Ui for all UI related classes such as activity, adapter, ui model ‣ Repository handle data operation such as data from network or local storage ‣ network for all network code 

You can simplify your json file https://jsoneditoronline.org/ 

DATA> NETWORK OUR REST API JSON WILL BE LIKE data class PlayingMoviewsResponse( @SerializedName("results") val movieResults: List ) data class MovieResult( @field:SerializedName("popularity") val popularity: Double, @field:SerializedName("poster_path") val poster_path: String, @field:SerializedName(“id”) val id: String, @field:SerializedName(“vote_average”) val vote_average: String, @field:SerializedName(“overview”) val overview: String, @field:SerializedName("release_date") val release_date: String ) 

API> APISERVICE HOLDS ALL REST API interface ApiService { @GET("now_playing?page=1") suspend fun getPlayingMovie(): PlayingMoviewsResponse } 

API> BUILD RETROFIT FOR YOUR REST APIS object RetrofitBuilder { private const val BASE_URL = "https://api.themoviedb.org/3/movie/" private fun getRetrofit(): Retrofit { return Retrofit.Builder() .baseUrl(BASE_URL) .addConverterFactory(GsonConverterFactory.create()) .build() } val apiService: ApiService = getRetrofit().create(ApiService::class.java) } 

Well done! we completed network part from data package ‣ Utils for hold all helpers supporting code ‣ Ui for all UI related classes such as activity, adapter, ui model ‣ Repository handle data operation such as data from network or local storage ‣ network for all network code 

DATA> REPOSITORY class MainRepository(private val apiService: ApiService) { suspend fun getMovies() = apiService.getPlayingMovie().movieResults .map { MovieUiModel( it.id, it.poster_path, it.original_title, it.release_date ) } } 

DATA> REPOSITORY class MainRepository(private val apiService: ApiService, ) { suspend fun getMovies() = apiService.getPlayingMovie().movieResults .map { MovieUiModel( it.id, it.poster_path, it.original_title, it.release_date ) } } 

Well done! we completed network part from data package ‣ Utils for hold all helpers supporting code ‣ Ui for all UI related classes such as activity, adapter, ui model ‣ Repository handle data operation such as data from network or local storage ‣ network for all network code 

UI > MAIN FEATURE > VIEWMODEL class MainViewModel(private val mainRepository: MainRepository) : ViewModel() { val movies : LiveData>> = getMoviesData() private fun getMoviesData() = liveData(Dispatchers.IO) { emit(Resource.loading(data = null)) try { emit(Resource.success(data = mainRepository.getMovies())) } catch (exception: Exception) { emit(Resource.error(data = null, message = exception.message ? "Error Occurred!")) } } } 

LAYOUT> MOVIE CARD ITEM LAYOUT 

LAYOUT> show movie list view 

UI> CREATE YOUR ADAPTER FOR MOVIES SCREEN class MovieAdapter(..) :RecyclerView.Adapter<..>() { class MovieViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){} override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder { val view = LayoutInflater.from(parent.context) .inflate(R.layout.movie_item, parent, false) return MovieViewHolder(view) } override fun getItemCount() = movies.size override fun onBindViewHolder(holder: FlowerViewHolder, position: Int) } 

UI>MAIN> setting up recyclerview UI private lateinit var adapter: MovieAdapter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setupUI() } private fun setupUI() { val recyclerView: RecyclerView = findViewById(R.id.recycler_view) val gridLayoutManager = GridLayoutManager(this, 3) recyclerView.layoutManager = gridLayoutManager adapter = MovieAdapter(arrayListOf()) recyclerView.adapter = adapter } 

UI>MAIN> setting up view model private lateinit var viewModel: MainViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setupViewModel() } private fun setupViewModel() { viewModel = ViewModelProvider(this, ViewModelFactory(MainRepository(RetrofitBuilder.apiService)) .get(MainViewModel::class.java) } 

UI > MAIN FEATURE > VIEWMODEL private fun setupObservers() { viewModel.movies.observe(this, Observer { it?.let { resource -> when (resource.status) { Status.SUCCESS -> { progressBar.visibility = View.GONE txtErrorMessage.visibility = View.GONE resource.data?.let { movies ->retrieveList(movies)) } } Status.ERROR -> {hide loading bar and show error msg} Status.LOADING -> {//show loading bar} } } }) } 

WELL DONE! ‣ You will see this movies screen on your test phone after you build ‣ Keep learning: https://classroom.udacity.com/courses/u d9012 https://developer.android.com/courses/a ndroid-basics-kotlin/course ‣ https://github.com/android/views-widgets -samples 

thank you.