영화 정보 앱 만들기 - TMDB API 사용, MovieFragment 추가

MovieFragment 추가

 

완성하면 아래 앱이 됩니다.

https://play.google.com/store/apps/details?id=com.enigmah2k.movieinfo

영화정보 - Google Play 앱

 

확장을 위해 MovieFragment를 추가하여 진행하겠습니다. 

추가하지 않고 HomeFragment에 영화 정보 앱을 구현해도 문제 없습니다.

 

Bottom Navigation Activity 로 기본틀을 만들었기 때문에 Home, Dashboard, Notifications 탭이 있고 각 화면은 Fragment로 구성되어 있을 것입니다. 

 

Home Fragment를 복사하여 탭을 추가하겠습니다.

기존 탭은 추후 기능 확장시 사용하면 될 것 같습니다.

 

1. movie 폴더 추가

\TMDBtest\app\src\main\java\com\tmdb\tmdbtest\ui 폴더 아래 movie 폴더를 추가합니다.

 

2. fragment_movie.xml 추가

\TMDBtest\app\src\main\res\layout 폴더에 fragment_movie.xml 파일을 추가합니다.

일단 fragment_home.xml 을 복사하여 일부 값만 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.movie.MovieFragment">

    <TextView
        android:id="@+id/text_movie"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

3. MovieFragment.kt 추가

\TMDBtest\app\src\main\java\com\tmdb\tmdbtest\ui\movie 에 MovieFragment.kt 파일을 추가합니다.

package com.tmdb.tmdbtest.ui.movie

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.tmdb.tmdbtest.R

class MovieFragment : Fragment() {

    override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle? ): View? {
        val root = inflater.inflate(R.layout.fragment_movie, container, false)

        return root
    }
}

 

4. 아이콘을 추가 합니다. 

File > New > Vector Asset 을 실행하여 Clip Art를 설정합니다.

 

local movies 를 선택하겠습니다.

TV를 구현하게 되면 live tv 로 해야 겠습니다.

 

파일명은 다른 아이콘과 형식을 맞추어 ic_movie_black_24dp 로 하겠습니다.

설정이 끝나면 아래와 같이 됩니다.

아이콘 생성을 하면 \TMDBtest\app\src\main\res\drawable 폴더 안에 

ic_movie_black_24dp.xml 파일이 생성됩니다.

 

5. string.xml에 Movie 값을 추가합니다.

<string name="title_movie">Movie</string>

 

6. bottom_nav_menu.xml 에 movie 아이템 추가

\TMDBtest\app\src\main\res\menu 폴더의 bottom_nav_menu.xml 파일에 movie 항목을 추가합니다.

    <item
        android:id="@+id/navigation_movie"
        android:icon="@drawable/ic_movie_black_24dp"
        android:title="@string/title_movie" />

 

7. mobile_navigation.xml 에 movie fragment 추가

\TMDBtest\app\src\main\res\navigation 폴더의 mobile_navigation.xml 에 movie fragment 를 추가합니다.

    <fragment
        android:id="@+id/navigation_movie"
        android:name="com.tmdb.tmdbtest.ui.movie.MovieFragment"
        android:label="@string/title_movie"
        tools:layout="@layout/fragment_movie" />

 

8. MainActivity.kt 에 navigation_movie 항목을 추가합니다.

        val appBarConfiguration = AppBarConfiguration(setOf( R.id.navigation_movie,
                R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))

 

Movie 탭을 맨 앞에 위치 시켰는데 앱을 실행해 보면 Movie 탭이 아닌 Home 탭으로 시작합니다.

이유는 mobile_navigation.xml 에 startDestination 값이 home으로 되어 있어서 그렇습니다.

movie로 변경해 주면 됩니다.

 

app:startDestination="@+id/navigation_home" -> app:startDestination="@+id/navigation_movie" 

 

 

이렇게 하여 Movie Fragment 까지 설정을 마쳤습니다.

 

TMDB API 를 활용한 Android 앱 만들기

https://stockant.tistory.com/530?category=1156604