안드로이드 스튜디오 하단 고정 버튼(배달의민족 앱 만들어보기)

 

 

저번 포스팅에서 하단 고정 버튼과 배너를 구현하기로 했는데 실력 부족으로 배너 구현에 시간이 너무 오래 걸려(구현도 못했음...) 배너는 차후에 구현하는 걸로 미루고 일단 하단 고정 버튼만 구현했습니다 이번 프로젝트를 진행하면서(특히 배너) java는 2년만에 다시 손 대는 거라서 많이 미숙함을 느끼고 공부하면서 프로젝트를 진행해야겠다는 생각이 들었습니다.

 

 

※ 이 프로젝트는 앱 개발 경험을 쌓기 위한 프로젝트이며 절대 상업적 용도로는 사용하지 않습니다. 

 

 

저번 포스팅의  activity_main.xml에서는 스크롤뷰가 전체를 감싸고 있는 형태로 구현했습니다.

 

 

그러나 하단 고정 버튼이므로 같이 스크롤되면 안됩니다. 그래서 스크롤뷰 바깥에 코드를 작성해야 합니다.

 

 

activity_main.xml

<?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"
    tools:context=".MainActivity">


    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


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


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:orientation="horizontal">


                <Button
                    android:id="@+id/btn1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:layout_weight="2"
                    android:padding="15dp"
                    android:text="선물하기" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:layout_weight="2"
                    android:padding="15dp"
                    android:text="포장/방문" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:orientation="horizontal">


                <Button

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:layout_weight="2"
                    android:padding="15dp"
                    android:text="1인분" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:layout_weight="2"
                    android:padding="15dp"
                    android:text="한식" />


            </LinearLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="스크롤 뷰 테스트 중입니다."
                android:textSize="150dp">

            </TextView>


        </LinearLayout>


    </ScrollView>
    
    
    <!----아래부터 추가된 부분---->

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/navigationView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"></FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:menu="@menu/bottombutton" />




</androidx.constraintlayout.widget.ConstraintLayout>

 

 

하단 버튼을 구현하려고 구글링하다보니 fragment라는 용어를 많이 쓰더라구요.

 

 

 

이제 메인입니다.

 

MainActivity.java

package com.example.badal;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.viewpager.widget.ViewPager;

import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


    // 하단 버튼 코드 ----------------------------------
    private FragmentManager fragmentManager = getSupportFragmentManager();
    private FragmentHome Fragmenthome = new FragmentHome();
    private FragmentEat Fragmenteat = new FragmentEat();
    private FragmentSelect Fragmentselect = new FragmentSelect();
    private FragmentEatList Fragmenteatlist = new FragmentEatList();
    private FragmentMyPage Fragmentmypage = new FragmentMyPage();
    //------------------------------------------------



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Button imageButton = (Button) findViewById(R.id.btn1);
        imageButton.setOnClickListener(new View.OnClickListener() {


            //@Override
            public void onClick(View view) {
                Intent intent = new Intent(getApplicationContext(), KoreaActivity.class);
                startActivity(intent);
            }

        });





        // 하단 버튼 코드 ----------------------------------
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.frameLayout, Fragmenthome).commitAllowingStateLoss(); // 여러 개 쓰면 안됨


        BottomNavigationView bottomNavigationView = findViewById(R.id.navigationView);
        bottomNavigationView.setOnNavigationItemSelectedListener(new ItemSelectedListener());

    }


    class ItemSelectedListener implements BottomNavigationView.OnNavigationItemSelectedListener{
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            FragmentTransaction transaction = fragmentManager.beginTransaction();

            switch(menuItem.getItemId())
            {
                case R.id.home:
                    transaction.replace(R.id.frameLayout, Fragmenthome).commitAllowingStateLoss();
                    // 메뉴 클릭 시 동작 코드 쓰는 곳인듯..?

                    break;

                case R.id.eat:
                    transaction.replace(R.id.frameLayout, Fragmenteat).commitAllowingStateLoss();

                    break;

                case R.id.select:
                    transaction.replace(R.id.frameLayout, Fragmentselect).commitAllowingStateLoss();

                    break;

                case R.id.eatlist:
                    transaction.replace(R.id.frameLayout, Fragmenteatlist).commitAllowingStateLoss();

                    break;

                case R.id.mypage:
                    transaction.replace(R.id.frameLayout, Fragmentmypage).commitAllowingStateLoss();

                    break;

            }
            return true;
        }
    }

    //----------------------------




}

 

 

하단 버튼 코드는 보기 편하게 영역을 구분해 놓았습니다.

 

하단 버튼은 navigationview로 구현하는 것 같습니다.

 

 

(구현 당시에는 하단에 뭐먹지 버튼이 있었는데 지금보니 검색 버튼으로 바뀌었길래 바로 바꿨습니다)

 

 

 

이제 저 메인에 들어갈 java, xml, 폴더를 만들면 됩니다.

 

 

먼저 res 밑에 폴더와 xml 파일을 하나 만듭니다. 이 xml파일 이름이 activity_main.xml에서 밑에서 두번째 줄

        app:menu="@menu/bottombutton" />

 

경로가 됩니다. 저는 폴더명이 menu, xml파일 명의 bottombutton입니다.

 

bottombutton.xml

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


        <item
            android:id="@+id/home"
            android:icon="@android:drawable/ic_menu_search"
            android:title="홈" />
        <item
            android:id="@+id/search"
            android:icon="@android:drawable/ic_menu_camera"
            android:title="검색" />
        <item
            android:id="@+id/select"
            android:icon="@android:drawable/ic_menu_add"
            android:title="찜한 가게" />
        <item
            android:id="@+id/eatlist"
            android:icon="@android:drawable/ic_menu_recent_history"
            android:title="주문 내역" />
        <item
            android:id="@+id/mypage"
            android:icon="@android:drawable/ic_menu_myplaces"
            android:title="My배민" />



</menu>

 

 

item이라는 태그는 처음 써봤네요. 이렇게 작성하고 나면 오른쪽에 화면이 다음과 같이 뜹니다.

 

 

 

 

이제 activity_main.xml이 있는 layout폴더에 item의 수만큼 xml파일을 만들어야 합니다.

 

 

 

저는 이렇게 만들었습니다. 각 xml의 코드는 모두 동일하게 아래처럼 작성했습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </TextView>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

아직 구현까지는 아니니까요.

 

이제 마지막으로 각 item에 해당하는 java파일을 만들면 됩니다.

 

 

이름은 위와 같고 코드도 layout 파일명 빼고는 모두 동일합니다.

 

package com.example.badal;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class FragmentEatList extends Fragment {

    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.bottom_eatlist, container, false);
    }
}

 

 

역시 다 틀만 잡아놓은 상태입니다.

 

 

구현 영상입니다.

 

 

 

 

 

하단 버튼에 대한 모든 코드는 아래 포스팅을 참고하였습니다.

lktprogrammer.tistory.com/183

[Android] 안드로이드 - BottomNavigationView 사용하여 하단 메뉴 만들기