Android App doesn't respond when clicking on the back-arrow button

Question

Hello Fellow developers. I have developed an Android App that uses the Flickr API to display any image upon users request. I am the final step of the development, Everything is looking great. except for when you click on any image to expand it in detail view & when you click the return arrow to go back - DOES NOT respond..: Any help would be greatly appreciated:)

ViewPhotoDetails.java:

package com.example.flickrbrowser;

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import androidx.annotation.RequiresApi;

public class ViewPhotoDetailsActivity extends BaseActivity {

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.photo_details);
    activateToolbarWithHomeEnabled();

    Intent intent = getIntent();
    Photo photo = (Photo) intent.getSerializableExtra(PHOTO_TRANSFER);

    TextView photoTitle = (TextView) findViewById(R.id.photo_title);
    photoTitle.setText("Title: " + photo.getTitle());

    TextView photoTags = (TextView) findViewById(R.id.photo_tags);
    photoTags.setText("Tags: " + photo.getTags());

    TextView photoAuthor = (TextView) findViewById(R.id.photo_author);
    photoAuthor.setText(photo.getAuthor());

    ImageView photoImage = (ImageView) findViewById(R.id.photo_image);
    Picasso.with(this).load(photo.getLink())
            .error(R.drawable.placeholder)
            .placeholder(R.drawable.placeholder)
            .into(photoImage);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_photo_details, menu);
    return true;
}

public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return false;
}
}    

photo_details.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:flickr="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.flickrbrowser.ViewPhotoDetailsActivity"
tools:showIn="@layout/photo_details">

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

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

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        flickr:cardBackgroundColor="?colorPrimary"
        flickr:cardCornerRadius="8dp"
        flickr:cardPreventCornerOverlap="false"
        flickr:contentPaddingTop="16dp"
        flickr:contentPaddingBottom="16dp">

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

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/photo_image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginBottom="8dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_marginTop="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/placeholder" />

                <TextView
                    android:id="@+id/photo_author"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:paddingTop="8dp"
                    android:textColor="@color/flickrSecondaryTextColor"
                    android:textSize="14sp" />

            </FrameLayout>

            <TextView
                android:id="@+id/photo_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                android:textColor="@color/flickrPrimaryTextColor"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/photo_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                android:textColor="@color/flickrPrimaryTextColor"
                android:textSize="10sp" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>

Source Code on GitHub

App UI

Answer 1

Back button has id: android.R.id.home . So you can handle it as

if (item?.itemId == android.R.id.home) {
    finish()
}

or just modify your

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    if (item.itemId == R.id.action_settings) {
        // TODO - handle 'settings' click
    }

    return super.onOptionsItemSelected(item)
}

instead of returning just true/false so home button will be handled by super method.

Answer 2

Just as @Boken said, the back (also called the "up") button is a menu button which has id android.R.id.home so when that button is clicked you can handle the click like so:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) { 
    //You can also use if-else statements instead of switch (switch is a better option)
        case R.id.action_settings:
            return true;
        case android.R.id.home: //when the back button is clicked
            // handle this action here
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

if you want to return to the previous screen you use onBackPressed() like so:

    case android.R.id.home: //when the back button is clicked
        onBackPressed();
        return true;

Answer 3

(More Direct Answer) Was not checking for that menu item. Had to change onOptionsItemSelected (in ViewPhotoDetailsActivity.java) to

public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
    return true;
} else if (id == android.R.id.home) {
    finish();
}
return false;
}