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 แล้วครับ