Android : How to set AppCompat Toolbar back button

วันนี้เราจะมาพูดถึงการสร้างปุ่ม Back บน Toolbar กัน ปกติมือถือแอนดรอยด์จะมีปุ่มย้อนกลับให้อยู่แล้ว แต่บางยี่ห้ออาจไม่ได้แยกปุ่มย้อนกลับมาให้ใช้ง่ายๆ เราก็ควรรองรับการย้อนกลับในแอปปลิเคชันด้วยก็ดี

สำหรับแอนดรอยด์เวอร์ชันใหม่ๆ เราจะเปลี่ยนมาใช้ AppcompatActivity กันแล้ว เพราะฉะนั้นเราจะมาสร้าง Toolbar ด้วย androidx.appcompat.widget.Toolbar เริ่มต้นดังนี้

in Java Code

protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(true);
}
...
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.empty_menu, menu);

    return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem menuItem)
{

    switch (menuItem.getItemId())
    {
        case android.R.id.home:
            onBackPressed();
            return true;

        default:
            return super.onOptionsItemSelected(menuItem);
    }
}

จากตัวอย่างข้างต้น เราเรียกใช้ layout R.layout.activity_main โดยมีตัวอย่างดังนี้

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

จากตัวอย่าง layout activity_main.xml เราจะเรียก layout toolbar.xml อีกที ซึ่งจะได้สะดวกเวลาเรียกใช้งานจาก layout อื่นๆด้วย รวมถึงการปรับแต่ง toolbar จะได้มีผลกับทุก layout พร้อมกัน โดยตัวอย่าง toolbar.xml มีดังนี้

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

เท่านี้เราจะมีปุ่มย้อนกลับโผล่ขึ้นมาที่ toolbar แล้วครับ

You may also like...