---
# System prepended metadata

title: Toolbar

---

# Toolbar
{%hackmd bVWcIzSWRcOp-bzo6RbA9A %}
## 主線任務-上方固定欄位
### 在XML建立Toolbar
![image](https://hackmd.io/_uploads/Sy-dnS_aT.png)
```
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:background="@color/white"
            android:elevation="4dp">
        </androidx.appcompat.widget.Toolbar>

```
放在main_activity.xml([Android Studio漢堡選單(左側選單)1](https://hackmd.io/@TandyLiao45/BJdziX_TT)>放在RelativeLayout裡)

### 用java召喚元件到Toolbar
請搭配[Android Studio漢堡選單(左側選單)2](https://hackmd.io/@TandyLiao45/H1_bXV_6a)使用效果更好

#### 漢堡選單觸發器
要怎麼召喚他呢?
在MainActivity.java
![image](https://hackmd.io/_uploads/Byd7Z8daa.png)
```
private Toolbar toolbar;
```
先宣告
在oncreate
![image](https://hackmd.io/_uploads/SJNqZI_6T.png)
```
toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);
```
setSupportActionBar(toolbar)>Toolbar替代ActionBar>找到的工具欄设置操作欄
這樣就會顯示在界面的頂部，且可以進行自定義操作。
![image](https://hackmd.io/_uploads/rkE1cHdTa.png)
```
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open,R.string.drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
```
ActionBarDrawerToggle>管理抽屜選單的開關動作
ActionBarDrawerToggle() 接受五個參數：
Activity 物件：當前Activity
DrawerLayout 物件：選單布局
Toolbar 物件：替代傳統的ActionBar
int 型參數：用於指定選單打開時的描述字串ID
int 型參數：用於指定選單關閉時的描述字串ID
addDrawerListener(toggle) 方法將 ActionBarDrawerToggle 物件添加到選單>監聽選單
toggle.syncState() 方法用於同步抽屜開關按鈕的狀態>使得觸發器能夠根據當前選單狀態切換

![image](https://hackmd.io/_uploads/SkFmBL_ap.png)
在res>values>string.xml
```
 <string name="drawer_open">Drawer_opened</string>
 <string name="drawer_close">Drawer_closed</string>
```
以上就可以使用啦欸嘿
#### 漢堡選單觸發器-支線任務1-改變觸發器顏色
```
toggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.green));
```
green要在res>values>color.xml設定>無法直接打色碼QQ

#### 搜尋欄位
在MapsFragment.java
![image](https://hackmd.io/_uploads/Byd7Z8daa.png)
```
private Toolbar toolbar;
```
先宣告
在onViewCreated
```
toolbar = getActivity().findViewById(R.id.toolbar);
```
在onResume
搜尋欄底部自訂樣式
![image](https://hackmd.io/_uploads/r11knIu6T.png)
```
 CardView cardmap = new CardView(requireContext());
int widthInPixels = 450dp;
int heightInPixels = 50dp;
cardmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));

```
widthInPixels/heightInPixels>自訂長寬

```
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewmap_shape);
cardmap.setBackground(drawable);
```
改變CardView樣式(圓角)
新增xml檔>res>drawable>cardviewmap_shape
![image](https://hackmd.io/_uploads/H1vjC8O6T.png)
```
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>
    <solid android:color="@color/gray"/>
</shape>
```
建立LinearLayout在CardView等等放圖案和文字
![image](https://hackmd.io/_uploads/H1me1POp6.png)
```
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT ));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
```
匯入icon
![image](https://hackmd.io/_uploads/rka_ywuap.png)
```
 ImageView mapmark = new ImageView(requireContext());
 mapmark.setImageResource(R.drawable.magnifier_search);

 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                100, // 设置寬度 100 像素
                100 // 设置高度100 像素
        );
        params.setMarginStart(10); // 設左邊距
        mapmark.setLayoutParams(params);

```
創建EditText
![image](https://hackmd.io/_uploads/rJdmlP_Ta.png)
```
EditText edmap = new EditText(requireContext());
 edmap.setHint("搜尋地點");
 edmap.setTextColor(getResources().getColor(R.color.green));
 edmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));

 edmap.setSingleLine(true);
 edmap.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
```
setSingleLine>輸入單行
setImeOptions(EditorInfo.IME_ACTION_SEARCH)>打完文字鍵盤是直接送出搜尋(不會換行)

圖層疊疊樂
![image](https://hackmd.io/_uploads/H1TTxDdTT.png)
```
linearLayout.addView(mapmark);
linearLayout.addView(edmap);
 cardmap.addView(linearLayout);
```
cardview新增到actionBar
![image](https://hackmd.io/_uploads/HyQWZvdaT.png)
```
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的标题
            actionBar.setDisplayShowCustomEnabled(true);
            actionBar.setCustomView(cardmap, new ActionBar.LayoutParams(
                    ActionBar.LayoutParams.WRAP_CONTENT, // 宽度设置为 WRAP_CONTENT
                    ActionBar.LayoutParams.WRAP_CONTENT, // 高度设置为 WRAP_CONTENT
                    Gravity.CENTER)); // 将包含 TextView 的 CardView 设置为自定义视图
            actionBar.show();
        }
```
**onResume全部程式碼**
```
    public void onResume() {
        super.onResume();

        //建立CardView在toolbar
        CardView cardmap = new CardView(requireContext());

        int widthInPixels = getResources().getDimensionPixelSize(R.dimen.map_width);
        int heightInPixels = getResources().getDimensionPixelSize(R.dimen.map_height);
        cardmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));

        Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewmap_shape);
        cardmap.setBackground(drawable);

        //建立LinearLayout在CardView等等放圖案和文字
        LinearLayout linearLayout = new LinearLayout(requireContext());
        linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT
        ));
        linearLayout.setOrientation(LinearLayout.HORIZONTAL);

        //
        ImageView mapmark = new ImageView(requireContext());
        mapmark.setImageResource(R.drawable.magnifier_search);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                100, // 设置宽度为 100 像素
                100 // 设置高度为 100 像素
        );
        params.setMarginStart(10); // 设置左边距
        mapmark.setLayoutParams(params);

        // 創建EditText
        EditText edmap = new EditText(requireContext());
        edmap.setHint("搜尋地點");
        edmap.setTextColor(getResources().getColor(R.color.green));
        edmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));

        edmap.setSingleLine(true);
        edmap.setImeOptions(EditorInfo.IME_ACTION_SEARCH);

        linearLayout.addView(mapmark);
        linearLayout.addView(edmap);
        cardmap.addView(linearLayout);

        // 將cardview新增到actionBar
        ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的标题
            actionBar.setDisplayShowCustomEnabled(true);
            actionBar.setCustomView(cardmap, new ActionBar.LayoutParams(
                    ActionBar.LayoutParams.WRAP_CONTENT, // 宽度设置为 WRAP_CONTENT
                    ActionBar.LayoutParams.WRAP_CONTENT, // 高度设置为 WRAP_CONTENT
                    Gravity.CENTER)); // 将包含 TextView 的 CardView 设置为自定义视图
            actionBar.show();
        }
    }
```
#### 小標籤
在BookFragment.java
![image](https://hackmd.io/_uploads/Byd7Z8daa.png)
```
private Toolbar toolbar;
```
先宣告
在onViewCreated
```
toolbar = getActivity().findViewById(R.id.toolbar);
```
在onResume
建立標籤底部
![image](https://hackmd.io/_uploads/rydvVvOaa.png)
```
CardView cardViewtitle = new CardView(requireContext());
 cardViewtitle.setLayoutParams(new CardView.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
 ActionBar.LayoutParams.MATCH_PARENT));
```
CardView大小隨子物件變動
![image](https://hackmd.io/_uploads/rJNNSwdpT.png)
```
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewtitle_shape);
        cardViewtitle.setBackground(drawable);
```
新增xml檔>res>drawable>cardviewtitle_shape
![image](https://hackmd.io/_uploads/SJ4iBDd6p.png)
```
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="0dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="0dp"/>
    <solid android:color="@color/gray"/>
</shape>
```
建立LinearLayout在CardView等等放圖案和文字
![image](https://hackmd.io/_uploads/H1me1POp6.png)
```
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT ));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
```
匯入icon
![image](https://hackmd.io/_uploads/SJJy2POTT.png)

```
ImageView bookmark = new ImageView(requireContext());
bookmark.setImageResource(R.drawable.bookmark);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                100, // 设置宽度为 100 像素
                100 // 设置高度为 100 像素
        );
params.setMarginStart(10);
bookmark.setLayoutParams(params);
```
創建TextView
![image](https://hackmd.io/_uploads/HJUz2wu6p.png)
```
TextView bookTitle = new TextView(requireContext());
bookTitle.setText("書籤");
bookTitle.setTextSize(15);
bookTitle.setTextColor(getResources().getColor(R.color.green));
bookTitle.setPadding(10, 10, 10, 10);
```

圖層疊疊樂
![image](https://hackmd.io/_uploads/SyX42wu6p.png)
```
linearLayout.addView(bookmark);
 linearLayout.addView(bookTitle);
 cardViewtitle.addView(linearLayout);
```
將cardview新增到actionBar
![image](https://hackmd.io/_uploads/rJT02w_6a.png)
```
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的標題
            actionBar.setDisplayShowCustomEnabled(true);
            actionBar.setCustomView(cardViewtitle, new ActionBar.LayoutParams(
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    Gravity.END));
            actionBar.show();
        }
```
Gravity.END>靠最右邊

**onResume全部程式碼**
```
    @Override
    public void onResume() {
        super.onResume();

        tx1.setText("Book Fragment");

        //建立CardView在toolbar
        CardView cardViewtitle = new CardView(requireContext());
        cardViewtitle.setLayoutParams(new CardView.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                ActionBar.LayoutParams.MATCH_PARENT));

        Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewtitle_shape);
        cardViewtitle.setBackground(drawable);

        //建立LinearLayout在CardView等等放圖案和文字
        LinearLayout linearLayout = new LinearLayout(requireContext());
        linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT
        ));
        linearLayout.setOrientation(LinearLayout.HORIZONTAL);

        //
        ImageView bookmark = new ImageView(requireContext());
        bookmark.setImageResource(R.drawable.bookmark);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                100, // 设置宽度为 100 像素
                100 // 设置高度为 100 像素
        );
        params.setMarginStart(10); // 设置左边距
        bookmark.setLayoutParams(params);

        // 創建TextView
        TextView bookTitle = new TextView(requireContext());
        bookTitle.setText("書籤");
        bookTitle.setTextSize(15);
        bookTitle.setTextColor(getResources().getColor(R.color.green)); // 更改文字颜色
        bookTitle.setPadding(10, 10, 10, 10); // 设置内边距

        linearLayout.addView(bookmark);
        linearLayout.addView(bookTitle);
        cardViewtitle.addView(linearLayout);

        // 將cardview新增到actionBar
        ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的標題
            actionBar.setDisplayShowCustomEnabled(true);
            actionBar.setCustomView(cardViewtitle, new ActionBar.LayoutParams(
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    Gravity.END));
            actionBar.show();
        }
    }

```


