BCA / B.Tech 11 min read

Displaying Images and Using Menus

Displaying Images and Using Menus

1: Using ImageViews to Display Pictures

What is an ImageView?

An ImageView is a UI widget in Android used to display images on the screen. It can display `drawable` resources (like .png, .jpg, .gif) or Bitmaps.

How to Add Images to the App

Images should be placed in your app's `res/drawable` folder. You can simply copy an image file and paste it inside this folder in Android Studio.

Example of ImageView in XML:


<ImageView
    android:id="@+id/my_image_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/my_image"
    android:scaleType="centerCrop"
    android:contentDescription="A beautiful landscape image" />

Important Attributes:

  • android:src: Sets the image resource from the `drawable` folder.
  • android:contentDescription: A description of the image for accessibility. It is used by screen readers.
  • android:scaleType: Controls how the image should be resized or moved to fit within the bounds of the `ImageView`. Common values are:
    • `fitCenter`: Fits the image inside the view while maintaining its aspect ratio.
    • `centerCrop`: Scales the image while maintaining its aspect ratio so that it completely fills the view, cropping any extra parts.
    • `centerInside`: Similar to `fitCenter`, but only scales the image down if it is larger than the view.

2: Using Menus with Views

Menus in Android are a common way to display a list of actions to the user. There are two main types of menus:

1. Options Menu

This is the primary collection of menu items for an activity, which appears in the Action Bar (or Toolbar). To create it, you define the menu in an XML resource file, inflate it in your activity by overriding the `onCreateOptionsMenu()` method, and handle clicks by overriding the `onOptionsItemSelected()` method.

2. Context Menu

A Context Menu appears when a user performs a long-press (presses and holds) on a specific view. It shows actions related to that view.

Steps to Create a Context Menu:

  1. Register the View: In the activity's `onCreate()` method, register the view for which you want to show a context menu using the `registerForContextMenu()` method.
  2. Inflate the Menu: Override the `onCreateContextMenu()` method and inflate a menu resource file.
  3. Handle Clicks: Override the `onContextItemSelected()` method to take action on menu item clicks.

Example of Context Menu in Java:

Assume you have a `TextView` (id: `text_for_menu`) in your layout.

Step 1: Create a menu resource file (`res/menu/context_menu.xml`)


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_edit"
          android:title="Edit" />
    <item android:id="@+id/action_delete"
          android:title="Delete" />
</menu>

Step 2: Implement the Context Menu in the Activity


public class MainActivity extends AppCompatActivity {
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.text_for_menu);
        
        // 1. Register the TextView for a context menu
        registerForContextMenu(textView);
    }

    // 2. Override onCreateContextMenu
    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.context_menu, menu);
    }

    // 3. Override onContextItemSelected
    @Override
    public boolean onContextItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_edit) {
            Toast.makeText(this, "Edit action selected", Toast.LENGTH_SHORT).show();
            return true;
        } else if (id == R.id.action_delete) {
            Toast.makeText(this, "Delete action selected", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onContextItemSelected(item);
    }
}