Android: Menu item in left side

Question

Now I have this

But I want to make this:

<?xml version="1.0" encoding="utf-8"?>

<item
    android:id="@+id/menu"
    android:icon="@drawable/ic_menu"
    android:title="@string/title_menu"
    app:showAsAction="always" />

<item
    android:id="@+id/file"
    android:icon="@drawable/ic_file"
    android:title="@string/title_file"
    app:showAsAction="always" />


<item
    android:id="@+id/new_file"
    android:icon="@drawable/ic_new_file"
    android:title="@string/title_new_file"
    app:showAsAction="always" />


<item
    android:id="@+id/visual"
    android:icon="@drawable/ic_eye"
    android:title="@string/title_eye"
    app:showAsAction="always" />


<item
    android:id="@+id/print"
    android:icon="@drawable/ic_print"
    android:title="@string/title_print"
    app:showAsAction="always" />

<item android:id="@+id/help"
    android:icon="@drawable/ic_help"
    android:title="@string/title_help" />

This menu I add in activity

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
    val inflater = menuInflater
    inflater.inflate(R.menu.designer_options_menu, menu)
    return true
}

And I don't understand how I can install ic_menu at the left side

Top points for doing a "What I have" / "What I want" with visuals. :clap: — Joshua Pinter, Oct 11 '19 at 01:24

score 7 · Accepted Answer · answered Feb 22 '19 at 23:48

You can use the Up/Home button for doing that by using a custom toolbar within a CoordinatorLayout:

1. Main layout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <!-- My Layout -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

2. Your menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/folder"
        android:icon="@drawable/ic_folder_black_24dp"
        android:orderInCategory="1"
        android:title=""
        app:showAsAction="always" />

    <item
        android:id="@+id/file"
        android:icon="@drawable/ic_insert_drive_file_black_24dp"
        android:orderInCategory="2"
        android:title=""
        app:showAsAction="always" />

    <item
        android:id="@+id/eye"
        android:icon="@drawable/ic_remove_red_eye_black_24dp"
        android:orderInCategory="3"
        android:title=""
        app:showAsAction="always" />

    <item
        android:id="@+id/print"
        android:icon="@drawable/ic_print_black_24dp"
        android:orderInCategory="4"
        android:title=""
        app:showAsAction="always" />

</menu>

3. Java

public class MainActivity extends AppCompatActivity {

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

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

        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
            getSupportActionBar().setTitle("");
        }
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show();
                break;
            case R.id.eye:
                Toast.makeText(this, "Eye", Toast.LENGTH_SHORT).show();
                break;
            case R.id.file:
                Toast.makeText(this, "File", Toast.LENGTH_SHORT).show();
                break;
            case R.id.folder:
                Toast.makeText(this, "Folder", Toast.LENGTH_SHORT).show();
                break;
            case R.id.print:
                Toast.makeText(this, "Print", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

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

4. Style: use NoActionBar theme

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

5. Gradle:: add design support library for coordinator layout

implementation 'com.android.support:design:28.0.0'

The result

Joshua Pinter · Answer 2 · 2019-11-23T17:44:51.367

Simpler Version

Add android:icon to your Main Activity or whatever Activity you want this icon:

<activity
  android:name=".Main"
  android:icon="@drawable/ic_settings_white_24dp"
  android:launchMode="singleTop">

Enable the "home" icon in your Main.java:

getActionBar().setDisplayShowHomeEnabled( true ); // In your onCreate() or wherever.

You might also want to hide the back icon in the top left and the app name in the top left. You can do that with these two commands:

// Disable back icon in top left and hide app name.
getActionBar().setDisplayHomeAsUpEnabled( false );
getActionBar().setDisplayShowTitleEnabled( false );

To handle the click event you just need to capture the home in onOptionsItemSelected:

@Override
public boolean onOptionsItemSelected( MenuItem item ) {

  switch( item.getItemId() ) {

    case android.R.id.home:
      // Do something.

      return true;

  }
}

Worked for us and the end result is something like this:

With `AppCompatActivity`

You need to do this slightly differently if your Activity is extending from AppCompatActivity. Here are the changes to the steps above:

No need to add android:icon to AndroidManifest.xml.

Set the Icon to use in your Main.java Activity and use getSupportActionBar():

getSupportActionBar().setHomeAsUpIndicator( R.drawable.ic_settings_white_24dp );

Android: Menu item in left side

2 Answers2

Simpler Version

With AppCompatActivity

With `AppCompatActivity`