안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기

앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기

탭(Tab) 클릭시 Fragment 활용하여 화면전화하며 보여주기

라이브러리 추가

com.android.support:design:23.4.0

values폴더 > styles.xml

기본액션바가 없도록 스타일변경

    <!--parent="Theme.AppCompat.Light.NoActionBar" : 액션바가 없는 스타일-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

MainActivity.java

public class MainActivity extends AppCompatActivity {
 
    Toolbar toolbar;
 
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //setSupportActionBar : 액션바 설정
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        //액션바 기본 타이틀 보여지지 않게
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);
 
        //Fragment : 탭 클릭시 보여줄 화면들
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
 
        //기본으로 첫번째 Fragment를 보여지도록 설정
        getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
 
 
        //TabLayout에 Tab 3개 추가
        TabLayout tabs = (TabLayout)findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("통화기록"));
        tabs.addTab(tabs.newTab().setText("스팸기록"));
        tabs.addTab(tabs.newTab().setText("연락처"));
 
        //탭 선택리스너
        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
            //탭선택시
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                Log.d("MainActivity", "선택된 탭 : "+position);
 
                Fragment selected = null;
                if(position==0){
                    selected = fragment1;
                }else if(position==1){
                    selected = fragment2;
                }else if(position==2){
                    selected = fragment3;
                }
 
                getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
            }
            //탭선택해제시
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
 
            }
            //선탭된탭을 다시 클릭시
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
 
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <!--CoordinatorLayout : 액션바 영역을 포함한 전체 화면의 위치를 잡아주는 역할-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--AppBarLayout : 액션바 영역-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <!--Toolbar : 툴바-->
            <!--android:elevation : 객체의 z값을 올려준다-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:background="@color/colorPrimaryDark"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:elevation="1dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/titleText"
                    android:text="타이틀"
                    android:textAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.Toolbar>
            <!--//Toolbar-->
 
            <!--TabLayout : 탭-->
            <!--app:tabMode="fixed" , app:tabGravity="fill" : 탭너비 동일하게-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/colorPrimary"
                app:tabSelectedTextColor="@color/colorAccent"
                android:elevation="1dp"
                android:background="@android:color/background_light"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <!--//TabLayout-->
        </android.support.design.widget.AppBarLayout>
        <!--//AppBarLayout-->
 
        <!--화면내용-->
        <FrameLayout
            android:id="@+id/container"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.design.widget.CoordinatorLayout>
    <!--//CoordinatorLayout-->
 
</RelativeLayout>
 

Fragment 화면(1~3)

Fragment1.java

public class Fragment1 extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment1, container, false);
 
        return view;
    }
}

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#2BA5BA"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <Button
        android:text="첫번째"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

결과

TabLayout의 Tab을 클릭할때마다 화면이 바뀐다