최종 팀프로젝트 TIL(6)

🐱 With All My Animal 🐶

💡 [ 6일차 10/17일 ] 💡

📌 BottomNavigation

[ 완성본 ]

[ activity_main ]

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context="com.kittyandpuppy.withallmyanimal.MainActivity">

    <FrameLayout
        android:id="@+id/main_framelayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        >
    </FrameLayout>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        >

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/main_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/pink"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="10dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bn_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginEnd="13dp"
                app:backgroundTint="@android:color/transparent"
                app:elevation="0dp"
                app:menu="@menu/main_menu"/>
        </com.google.android.material.bottomappbar.BottomAppBar>

        <!--    아이콘 색 바꾸는 코드 -->
        <!--    app:itemIconTint="#E1B771"-->

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/main_fab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:src="@drawable/pet_like"
            app:backgroundTint="@color/blue"
            app:borderWidth="0dp"
            app:maxImageSize="40dp"
            app:fabCustomSize="80dp"
            app:layout_anchor="@id/main_app_bar"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.NavigationBarView.ActiveIndicator" />
            
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

• BottomNavigationView에서 app:backgroundTint="@android:color/transparent"을 적용해도 그림자가 생긴다면 app:elevation="0dp"을 추가해주어야한다! (android:elevation 아님!!)

[ Theme ]

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.WithAllMyAnimal" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.WithAllMyAnimal" parent="Base.Theme.WithAllMyAnimal" />
</resources>

• parent="Theme.MaterialComponents.DayNight.NoActionBar"
  -> Components여야 적용이된다!

[ menu ]

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <item
        android:id="@+id/main_bn_home"
        android:icon="@drawable/bn_home"
        android:title="홈"
        />

    <item
        android:id="@+id/menu_floating"
        android:title="" />

    <item
        android:id="@+id/main_bn_you"
        android:icon="@drawable/pet_like"
        android:title="마이페이지"
        />

</menu>

• 중간에 공간을 만들기 위해서 title은 ""만 작성해준다.