2021-04-23안드로이드 스튜디오(머터리얼 디자인 Toobar, AppBar,Bottom SheetBar)

툴바 ( Toobar) 

툴바는 액션바와 같은 것 이라고 보면 되는데 액션바는 따로 변경할 수가 없지만 툴바는 각종 옵션 설정이 가능하고 

나중에 머터리얼 디자인과 연동하여 사용 할 수 있다고 하여 요즘엔 액션바 보다 툴바를 더 많이 사용한다

 

그러려면 일단 액션바를 안보이게 해주어야 한다   

 

앱바레이아웃

 

xml 예 

 

 

가로 방향은 거의 손대지 않구 보통 세로 방향만 손대 준다 . 

 

코디네이터레이아웃 ( CoordinatorLayout) 

연동하기 위한 레이아웃 (최상위에 올라가야 한다 ) 

 

그림처럼 스낵바가 올라오면서 플로팅 액션바도 같이 움직일 수 있도로고 연동 하는 레이아웃 

모든게 연동되는건 아니고 플로팅액션 버튼과 스낵바 & 앱바와 리사이클러뷰 연동 가능하다 

 

xml 예 

<?xml version="1.0" encoding="UTF-8"?>

//////////////////////////코디네이터 바 (최상위) 
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
////////////////////////////////앱바 
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="242dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        
        ////////////////////툴바 
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="242dp"
            app:contentScrim="@color/teal_700"
            app:expandedTitleMarginBottom="50dp"
            app:expandedTitleMarginStart="32dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Hello Android"
            app:toolbarId="@+id/toolbar">
            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/appbar_image"
                app:layout_collapseMode="parallax" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="18dp"
        android:src="@drawable/ic_add"
        app:fabSize="normal"
        app:rippleColor="#ffffff" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

(자바코드는 많이 사용해본 리싸이클뷰 라고 생각하면된다 ) 

출력 화면 

 

---

Bottom Sheet Bar 

빨간 부분이 Bottom Sheet Bar  이다 

아래로 내려가기도 하고 아래 스크롤하면 올라오기도하고 아래로 내려서 없애버릴수도 있다.

 

 

메인 

  BottomSheetBehavior<View> persistentBottomSheet;
    ArrayList<Item> list;
    public static BottomSheetDialog bottomSheetDialog ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        View view = findViewById(R.id.R_id_bottom_sheet);
        persistentBottomSheet = BottomSheetBehavior.from(view);

        list = new ArrayList<>();
        list.add(new Item(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_lab4_1,null),"Keep"));
        list.add(new Item(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_lab4_2,null),"Inbox"));
        list.add(new Item(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_lab4_3,null),"Messenger"));
        list.add(new Item(ResourcesCompat.getDrawable(getResources(), R.drawable.ic_lab4_4,null),"google"));


        persistentBottomSheet.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if(persistentBottomSheet.getState() == BottomSheetBehavior.STATE_HIDDEN){
                    persistentBottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED); //최소 크기 STATE_COLLAPSED 최대 크기 STATE_EXPANDED
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {

            }
        });

    }

    public void onModal(View view) {
        Adapter adapter = new Adapter(list, this);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        View v = getLayoutInflater().inflate(R.layout.layout_recycler,null);
        RecyclerView recyclerView = v.findViewById(R.id.recycler_View);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(adapter);
        bottomSheetDialog = new BottomSheetDialog(this);
        bottomSheetDialog.setContentView(v);
        bottomSheetDialog.show();

    }


}

어댑터 

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {

    ArrayList<Item> arrayList;
    Context context;

    public Adapter(ArrayList<Item> arrayList, Context context) {
        this.arrayList = arrayList;
        this.context = context;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_modal,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Item item = arrayList.get(position);
        holder.imageView.setImageDrawable(item.getDrawable());
        holder.textView.setText(item.getTitle());
        holder.modal_Layout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context.getApplicationContext(),item.getTitle(),Toast.LENGTH_SHORT).show();
                MainActivity.bottomSheetDialog.dismiss();
            }
        });

    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        ImageView imageView;
        TextView textView;
        LinearLayout modal_Layout;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            this.imageView = itemView.findViewById(R.id.imageView);
            this.textView = itemView.findViewById(R.id.textView);
            this.modal_Layout = itemView.findViewById(R.id.modal_layout);
        }
    }

}

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">


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

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Modal Button Sheet"
            android:onClick="onModal"/>



    </LinearLayout>

    <LinearLayout
        android:id="@+id/R.id.bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:orientation="vertical"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        android:background="#ff5588"
        app:behavior_hideable="true"
        app:behavior_peekHeight="120dp"
        android:padding="15dp"
        >

        <TextView
            android:id="@+id/txt_Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Persistent Bottom Sheet"
            android:textSize="20dp"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/txt_Contents"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Persistent Bottom Sheet contents......"
            android:textSize="20dp"
            android:textColor="#00fff0"/>

    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>