Do it! 안드로이드 앱 프로그래밍 개정 7판 상단 탭 보여주기 예제

안녕하세요. 오늘은 p.323부터 나오는 상단 탭 보여주기 예제인 SampleTab 프로젝트를 실습해보고

책의 코드와 다른 점을 많이 발견해서 이번 글을 작성하게 되었습니다.

 

먼저, @color/ 부분을 작성하는 과정이었습니다.

색상을 설정하는 과정에서 colors.xml의 정의된 값을 사용하는데 아래와 같은 코드를 사용하라고

책에서는 안내를 해주었습니다만, 아래 코드를 현재 안드로이드 스튜디오에서는 사용할 수 없습니다.

android:background="@color/colorPrimaryDark"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/colorPrimary"

그래서 저는 색상이 크게 중요하지 않다고 생각하기도 했고, 구분만 잘 되도록 변경했습니다.

android:background="@color/design_default_color_primary"
app:tabSelectedTextColor="@color/design_default_color_error"
app:tabTextColor="@color/design_default_color_primary"

지금 위에 보이는 코드가 제가 현재 안드로이드 스튜디오에 맞추어 변경한 코드입니다.

 

두 번째는 Toolbar 클래스를 import할 때의 문제점(?)이었습니다.

 

바로, 책에서는 Alt + Enter로 androidx.appcompat.widget.Toolbar를 import 시키라고 했는데요.

 

해당하는 위치에 커서를 두고도 Alt + Enter를 여러번 시도해봤지만 다른 창만 주구장창 실행되었습니다.

 

이렇게 아래로만 메뉴가 펼쳐지면서 import할 수 있는 메뉴는 나타나지 않았습니다.

 

결국 맨 위에 수동으로 import를 시켰습니다..

 

지금 보고 계시는 AppCompatActivity위에 import androidx.appcompat.widget.Toolbar;를 직접 적어넣었습니다.

 

마지막으로는 app/res/values 폴더 안의 styles.xml 파일을 수정하는 부분입니다.

저는 애초에 styles.xml이 없더라구요. 검색을 해보니 styles.xml이 사라지고 themes.xml로 통합되었다고 합니다..;;

 

또! 책에서는 AppTheme이라는 name 속성을 가진 태그의 parent 속성 값을 변경하라고 합니다.

 

저는 여기서 또 AppTheme이라는 name을 가진 태그가 없었습니다... 그래서 저는 제 주관으로 해결을 했는데요.

 

어차피 기본적으로

name="Theme.SampleTab" parent=""

이런식으로 정의가 되어있었거든요. 결국 프로젝트 명으로 되어있었단 말이죠.

 

그래서 이 친구의 parent값을 수정했더니 책처럼 동작을 했습니다.

 

하지만, 이건 저만의 근거없는 주관이 아니었음을 밝힙니다.

 

왜냐면, AndroidManifest.xml 파일에 속성이 똑같이 선언되어 있거든요.

 

정확히 말씀드리면 application 태그 안의 한 문장이 아래와 같이 작성되어 있었습니다.

android:theme="@style/Theme.SampleTab"

책에 설명도 이 Manifest파일에서 application 또는 activity 태그에 theme값이 지정되어

테마로 설정된다고 설명하고 있습니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity" >

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/toolbar"
                android:background="@color/design_default_color_primary"
                android:elevation="1dp"
                android:theme="@style/ThemeOverlay.AppCompat.Dark" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/titleText"
                    android:text="타이틀"
                    android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title" />
            </androidx.appcompat.widget.Toolbar>

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tabs"
                android:background="@android:color/background_light"
                android:elevation="1dp"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@color/design_default_color_error"
                app:tabTextColor="@color/design_default_color_primary" />

        </com.google.android.material.appbar.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/container"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

 

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.SampleTab" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

 

마치며

이번에는 간단하게 본론만 말씀을 드리고 글이 끝났는데요. 참 xml관련된 문법(?)이 계속 바뀌는데

안드로이드 개발자 사이트에는 어떤 속성이 변경되었다는 내용을 찾기가

생각보다 힘들어서 안드로이드 개발이 까다로운 것 같습니다..

 

다들 공부하시는 데 너무 수고들 많으십니다. 열심히 노력해서 목표를 달성하시길 바라요!

 

저도 매일 노력하겠습니다! 긴 글 읽어주셔서 감사합니다. 좋은 하루 되세요.

 

 

삼성전자 갤럭시 탭S7+ 12.4 Wi-Fi 256GB

위 링크를 통해 구매 시 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음