[안드로이드] Tab Custom Animation part1 - 화면 구성

이번 시간부터  TabLayout을 직접 만들어 애니메이션까지

넣어보는 방법을 알아보겠습니다. 

이번 포스팅은 화면 구성을 해보겠습니다. 

---

목차

1. 실행 화면

2. 테마 변경

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

4. 메인 화면 구성 activity_main.xml

---

1. 실행 화면

2. 테마 변경

( res -> value -> themes)

 parent부분을 noActionBar로 변경하면 됩니다.

  <style name="Theme.MyApplication" parent="Theme.AppCompat.Light.NoActionBar">

 

3. 배경색상 파일 만들기(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_white100.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>

 

 

4. 메인 화면 구성 activity_main.xml

 - 설명 -

 1. LinearLayout을 메인으로 각 아이템은 텍스트뷰로

 구성했습니다. 

 2. 선택된 아이템은 흰색 바탕에 검은색 글씨로 보입니다.

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

 4. FragmentContainerView에는 탭 선택에 따라 각 프래그먼트 화면이

  보일 것입니다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <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:orientation="horizontal"
            android:weightSum="3"
            android:background="@drawable/round_back_white10_100"
            android:layout_margin="20dp">

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

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

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

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

2022.04.07 - [안드로이드] - [안드로이드] 코드(MainActivity)에서 배경 색상 바꾸는 다양한 방법

[안드로이드] 코드(MainActivity) 에서 배경색상 바꾸는 다양한 방법

2022.04.06 - [안드로이드] - [안드로이드] RecyclerView 다중 선택하는 방법

[안드로이드] RecyclerView 다중선택 하는 방법

2022.04.02 - [안드로이드] - [안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면 구성

[안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면구성