본문 바로가기
안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/Android 화면 구성 기능(디자인- xml 과 java로 제어)

Android Studio Material Design 그외 5(bottomnavigation)

by 차누감 2019. 10. 1.

bottomnavigation을 이용해서 화면 배경색을 바꾸는 예제.

 

<실행 화면>

 

 

 

우선 먼저 material 라이브러리 추가 하자.

 

위 사진처럼 추가 된 것을 확인할 수 있다.

메뉴 만들기

BottomNavigationView에 menu만 추가해도 아이콘이 생긴걸 확인할 수 있다.
아이콘을 터치할때 반응을 하는 코드

activity_main.xml 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:id="@+id/layout_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#FFFF00">
 
    </RelativeLayout>
<!--탭메뉴는 3-5개 정도로 만드는 -->
        android:id="@+id/bnv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom"
        app:itemTextColor="#FFFFFF"
        app:itemIconTint="@color/colorAccent"
        android:background="@color/colorPrimary"
        app:itemIconSize="24dp"
        app:labelVisibilityMode="unlabeled">
 
 
</LinearLayout>
 
 
 

bottom.xml  코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
 
    <item android:id="@+id/bnv_aa"
        android:title="aa"
        android:icon="@android:drawable/ic_menu_search">
    </item>
    <item android:id="@+id/bnv_bb"
        android:title="bb"
        android:icon="@android:drawable/ic_menu_agenda">
    </item>
    <item android:id="@+id/bnv_cc"
        android:title="cc"
        android:icon="@android:drawable/ic_menu_call">
    </item>
    <item android:id="@+id/bnv_dd"
        android:title="dd"
        android:icon="@android:drawable/ic_menu_my_calendar">
    </item>
 
</menu>
 
 
 

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
import androidx.annotation.NonNull;
 
 
 
public class MainActivity extends AppCompatActivity {
 
    BottomNavigationView bnv;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        bnv=findViewById(R.id.bnv);
        bnv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
 
                //원래는 보통 아이템을 클릭할 때마다
                //Fragment를 변경하는 것이 일반적임.
                switch (item.getItemId()){
                    case R.id.bnv_aa:
                        findViewById(R.id.layout_content).setBackgroundColor(Color.RED);
                        break;
                    case R.id.bnv_bb:
                        findViewById(R.id.layout_content).setBackgroundColor(Color.GRAY);
                        break;
                    case R.id.bnv_cc:
                        findViewById(R.id.layout_content).setBackgroundColor(Color.GREEN);
                        break;
                    case R.id.bnv_dd:
                        findViewById(R.id.layout_content).setBackgroundColor(Color.BLACK);
                        break;
                }
                //리턴값이 true가 아니면 동작하지 않음.
                return true;
            }
        });
    }
}
 
 
 

<실행 화면>

 

댓글