[Android] Toolbar, FrameLayout, BottomNavigationView를 활용하여 상단바, 하단바 만들기 (#1 - 서론)

Android Studio를 활용하여 앱을 개발하고 있다. 안드로이드 앱 개발을 배운지 2년차인 지금도 안드로이드는 어려운 게 많은데, 일단 XML이라는 언어를 거의 처음 접했을 뿐만 아니라 Java 코드가 기존의 Java와 조금 다르게 XML과 연동해야 하는 부분이 많아서 어려운 것 같다.

 

안드로이드에 서툰 나는 XML의 대부분을 그나마 활용하기 쉬운 LinearLayout으로 구현한다.

내가 편하게 사용하는 어플의 대부분은 상단바와 중앙 콘텐츠 영역, 그리고 하단바로 구성되어 있다고 느껴 LinearLayout으로 상단바 영역, 중앙 콘텐츠 영역, 하단바 영역을 나누어 구현하였다.

<LinearLayout>
    <LinearLayout>
        ...
    </LinearLayout>
    <LinearLayout>
        ...
    </LinearLayout>
    <LinearLayout>
        ...
    </LinearLayout>
</LinearLayout>

아주 기본중의 기본이라고 할 수 있는 구성으로 만들었는데, 이렇게 구성하니 몇 가지 문제점이 발생했다.

• 단순히 ImageView를 삽입하거나 ImageButton 또는 Button으로 버튼을 만들 수는 있지만 사용자의 입력에 따라 민감하게 반응하도록 할 수 없음.
• 중앙 콘텐츠 영역의 내용만 바꾸는 것이 아니라, 모든 XML에 상단바와 하단바를 구현해야 함 (중복 발생)
• DrawerLayout을 구성할 때 Navigation 메뉴를 동적으로 구성할 수 없음.

 

물론 이것 외에도 다른 문제가 있겠지만, 내가 가장 크게 느낀 문제점은 위 3가지이다. 지금 개발하는 어플에는 우측 상단의 메뉴 버튼을 클릭하면 슬라이드되는 새로운 메뉴가 열리고(DrawerLayout) 그 메뉴에서 여러 기능을 활용할 수 있도록 할 예정이었는데(ex. 카카오톡 채팅방 우측 상단의 메뉴 버튼), 사용자 프로필을 보여주는 과정에서 사용자 프로필을 불러올 수 없는 문제가 가장 컸기 때문에 프로젝트를 처음부터 다 갈아엎기로 다짐했다 ...

 

게다가 안드로이드 개발 툴에서 기본적으로 지원하는 AppBar, ToolBar, NavigationView 등등의 기능을 두고 LinearLayout만 사용하는 건 개발자로서 너무 하수의 방식이 아닌가하는 마음도 있었지만 (ㅋㅋㅋ) 아무튼 새로운 기능?의 공부를 해보고자 시작했다.

 

시작은 그러했지만.... 정말 많은 오류가 발생했고 근 일주일동안 상단바 하단바 만들기에 매달려서 겨우겨우 성공하게 되었다. (같이 개발중인 친구와 열심히 토론한 끝에 ...)

 

 

아무튼! 최종적으로 완성한 코드는 다음과 같이 구성했다.

<LinearLayout>
	<include/>
	<LinearLayout>
		<FrameLayout>
		</FrameLayout>
		<DrawerLayout>
			<NavigationView/>
		</DrawerLayout>
	</LinearLayout>
	<BottomNavigationView/>
</LinearLayout>

가장 바깥쪽에 LinearLayout 틀을 두고, ToolBar XML을 불러오는 include 블록과 또 하나의 LinearLayout, 하단바를 담당하는 BottomNavigationView를 나란히 배치, LinearLayout의 안에는 중앙 콘텐츠 영역을 담당하는 FrameLayout과 우측 슬라이드 메뉴 DrawerLayout을 배치하였다.

 

마지막에 후술할 내용이지만, FrameLayout이라는 걸 처음 사용해봤는데 XML 순서에 정말 민감하다는 걸 느꼈고 .. 동적 운용이 가능한 장점이 있지만 처음 쓰는 사람에게 너무 가혹한 것 같다. (사실 이 XML에서 LinearLayout 빼고는 다 초면이다.)

 

힘들게 완성한 만큼 블로그에 남겨서 기억하기 위해 파트를 나눠서 글을 써볼 예정이다!

다음 글은 Vertical 배치의 최상단인 ToolBar부터 시작하려고 한다.