[안드로이드 코틀린] Tab Custom Animation part1 - 화면 구성 및 설정

앞으로 TabLayout을 직접 만들어 애니메이션 기능까지 넣어보도록 하겠습니다.

이번 시간에는 화면 구성 및 설정을 만들어 보겠습니다. 

---

목차

1. 실행 화면
2. dataBinding 설정 build.gradle
3. 테마 변경 themes.xml
4. 배경 색상 파일 만들기(drawable)
5. 메인 화면 구성 activity_main.xml

---

1. 실행 화면

2. dataBinding 설정 build.gradle

build.gradle(Module:프로젝트명:app)

android 괄호 안에 추가하시면 됩니다.

  buildFeatures{
        dataBinding = true
    }

 

3. 테마 변경 themes.xml

 - 설명 -

 TabLayout을 위해서 액션 바가 없는 테마로 설정

<style name="Theme.KotlinExam" parent="Theme.MaterialComponents.Light.NoActionBar">

 

 

4. 배경 색상 파일 만들기(drawable)

 res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

round_back_white10_100.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#1AFFFFFF"/>
    <corners android:radius="100dp"/>
</shape>

 

round_back_whtie100.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#FFFFFF"/>
    <corners android:radius="100dp"/>
</shape>

5. 메인 화면 구성 activity_main.xml

 - 설명 - 

1. LinearLayout안에 TextView를 통해 탭을 구성합니다.

2. 선택된 아이템은 흰색 바탕에 검은색 글씨

3. 선택되지 않은 아이템은 투명 바탕에 흰색 글씨

4. FragmentContainerView를 통해 탭 선택에 따른 화면이 보입니다. 

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_dark">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:background="@drawable/round_back_white10_100"
                android:orientation="horizontal"
                android:weightSum="3">

                <TextView
                    android:id="@+id/tabItem1"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:background="@drawable/round_back_whtie100"
                    android:gravity="center"
                    android:text="Tab1"
                    android:textColor="#000000"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tabItem2"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Tab2"
                    android:textColor="#80FFFFFF"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tabItem3"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Tab3"
                    android:textColor="#80FFFFFF"
                    android:textStyle="bold" />
            </LinearLayout>
        </RelativeLayout>

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragmentContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    
</layout>

2022.06.02 - [안드로이드] - [안드로이드 코틀린] DataBinding 컴포넌트 쉽게 접근하는 방법

[안드로이드 코틀린] DataBinding 컴포넌트 쉽게 접근하는 방법

2022.06.06 - [안드로이드] - [안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성

[안드로이드 코틀린] 커스텀 달력 만드는 방법 part1 화면 구성

2022.05.25 - [안드로이드] - [안드로이드 코틀린] 함수(function) 만드는 방법 part1 - 매개변수(parameter)

[안드로이드 코틀린] 함수(function) 만드는 방법 part1 - 매개변수(parameter)