[안드로이드 스튜디오 코틀린] 쉬운 하단 바 네비게이션바 만들기 ( +자바 코드 추가)

 

 

 

이와 같은 하단바를 만들어보자 ! 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. viewBinding을 이용하기 위해 viewBinding 설정 추가

- build.gradle(Module:app)에서 추가해 준다 !

viewBinding {
   enabled true
}

 

 

 

 

 

 

 

 

 

 

 

2. Fragment를 이용해서 하단바를 만들기 때문에 Fragment 3개를 추가해준다.

- New -> Fragment -> Fragment(Blank) 추가 

 

 

 

이렇게, CalenderFragment, HomeFragment, MyPageFragment 총 3개를 추가해준다. ( 자동적으로 layout이 같이 만들어짐 fragment_calender.xml, fragment_home.xml, fragment_my_page.xml)

 

 

 

 

 

 

 

 

 

 

3. NaviActivity.kt를 생성해준다.

- New -> Activity -> Empty Activity 추가 (activity_navi.xml이 자동적으로 생긴다.)

 

 

 

 

 

 

 

 

 

4. drawable에서 네비게이션 바에 들어갈 벡터를 생성한다.

 

 

 이렇게, 3개의 벡터를 추가해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. res -> New -> Directory -> menu 생성하고, Menu Resource File을 생성한다. 

- navi_menu.xml 파일 생성후, 네비게이션 바 메뉴를 만들어준다. 

 

navi_menu.xml

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

    <item
        android:id="@+id/calenderFragment"
        android:title="일정"
        android:icon="@drawable/ic_calendar_month"/>

    <item
        android:id="@+id/homeFragment"
        android:title="홈"
        android:icon="@drawable/ic_home"/>

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

</menu>

 

 

 

 

 

 

 

 

 

6. res -> values -> colors.xml에 하단 바에 들어갈 색상 설정을 추가

<color name="Gold">#FFFFD700</color>

 

더 다양한 색상을 추가하고 싶을 때 -> https://mimisongsong.tistory.com/11

[안드로이드 스튜디오] 헥스 색상 표

 

 

 

 

 

 

 

7. 클릭시 색상을 변경하기 위한 drawable 추가

- drawable -> menu_click_color.xml 추가

- 누른 버튼(checked=true)은 검정으로, 안눌린 버튼(checked=false)은 흰색으로 설정

 

menu_click_color.xml 코드

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

    <item
        android:color="@color/black"
        android:state_checked="true"/>

    <item
        android:color="@color/white"
        android:state_checked="false"/>
</selector>

 

 

 

 

 

 

 

 

8. activity_navi.xml 코드

- bottomnavigation에서 app:layout_constraintBottom_toBottomOf="parent"를 추가함으로써 navigationView가 맨 밑에 붙어있음.

<?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"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/mainFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:itemBackground="@color/Gold"
        app:itemIconTint="@drawable/menu_click_color"
        app:itemTextColor="@drawable/menu_click_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/navi_menu"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

 

 

 

 

 

 

9. NaviActivity.kt 코드

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import com.example.odop.databinding.ActivityNaviBinding


private const val TAG_CALENDER = "calender_fragment"
private const val TAG_HOME = "home_fragment"
private const val TAG_MY_PAGE = "my_page_fragment"

class NaviActivity : AppCompatActivity() {

    private lateinit var binding : ActivityNaviBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityNaviBinding.inflate(layoutInflater)
        setContentView(binding.root)


        setFragment(TAG_HOME, HomeFragment())

        binding.navigationView.setOnItemSelectedListener { item ->
            when(item.itemId) {
                R.id.calenderFragment -> setFragment(TAG_CALENDER, CalenderFragment())
                R.id.homeFragment -> setFragment(TAG_HOME, HomeFragment())
                R.id.myPageFragment-> setFragment(TAG_MY_PAGE, MyPageFragment())
            }
            true
        }
    }

    private fun setFragment(tag: String, fragment: Fragment) {
        val manager: FragmentManager = supportFragmentManager
        val fragTransaction = manager.beginTransaction()

        if (manager.findFragmentByTag(tag) == null){
            fragTransaction.add(R.id.mainFrameLayout, fragment, tag)
        }

        val calender = manager.findFragmentByTag(TAG_CALENDER)
        val home = manager.findFragmentByTag(TAG_HOME)
        val myPage = manager.findFragmentByTag(TAG_MY_PAGE)

        if (calender != null){
            fragTransaction.hide(calender)
        }

        if (home != null){
            fragTransaction.hide(home)
        }

        if (myPage != null) {
            fragTransaction.hide(myPage)
        }

        if (tag == TAG_CALENDER) {
            if (calender!=null){
                fragTransaction.show(calender)
            }
        }
        else if (tag == TAG_HOME) {
            if (home != null) {
                fragTransaction.show(home)
            }
        }

        else if (tag == TAG_MY_PAGE){
            if (myPage != null){
                fragTransaction.show(myPage)
            }
        }

        fragTransaction.commitAllowingStateLoss()
    }
}

 

 

+ 23/01/11 자바 코드 추가

 

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;

import com.example.myapplication.databinding.ActivityNaviBinding;

public class NaviActivity extends AppCompatActivity {

    private static final String TAG_CALENDER = "CalenderFragment";
    private static final String TAG_HOME = "HomeFragment";
    private static final String TAG_MY = "MyFragment";

    private ActivityNaviBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityNaviBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        setFragment(TAG_HOME, new HomeFragment());
        binding.navigationView.setSelectedItemId(R.id.home);

        binding.navigationView.setOnItemSelectedListener(item -> {
            switch(item.getItemId()){
                case R.id.calender:
                    setFragment(TAG_CALENDER, new CalenderFragment());
                    break;
                case R.id.home:
                    setFragment(TAG_HOME, new HomeFragment());
                    break;
                case R.id.my:
                    setFragment(TAG_MY, new MyFragment());
                    break;
            }
            return true;
        });
    }

    protected void setFragment(String tag, Fragment fragment) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        if (fragmentManager.findFragmentByTag(tag) == null) {
            fragmentTransaction.add(R.id.mainF, fragment, tag);
        }

        Fragment calender = fragmentManager.findFragmentByTag(TAG_CALENDER);
        Fragment home = fragmentManager.findFragmentByTag(TAG_HOME);
        Fragment my = fragmentManager.findFragmentByTag(TAG_MY);

        if (calender != null){
            fragmentTransaction.hide(calender);
        }

        if (home != null){
            fragmentTransaction.hide(home);
        }

        if (my != null){
            fragmentTransaction.hide(my);
        }

        if (tag.equals(TAG_CALENDER)) {
            if (calender != null){
                fragmentTransaction.show(calender);
            }
        } else if (tag.equals(TAG_HOME)) {
            if (home != null){
                fragmentTransaction.show(home);
            }
        } else {
            if (my != null){
                fragmentTransaction.show(my);
            }
        }
        fragmentTransaction.commitAllowingStateLoss();
    }
}

 

 

 

 

 

 

10. 메인 화면 변경

- manifests에서 메인화면 설정을 NaviActivity로 바꿔준다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

실행하면 누른 버튼의 설정과 화면 이동이 잘 되는걸 볼 수 있다 !!!!!!11