Search code examples
androidmarginandroid-toolbaroverflow-menu

How to set margins on the overflow menu icon?


enter image description here

Hello.

I want to move the icon to the left in toolbar.

In menu.xml, There is no margin property.

I want to set margin to overflow menu's icon.

How to set margin?

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:elevation="0dp">
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:titleMarginStart="30dp" />
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

menu.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:icon="@drawable/ic_action_add"
        android:title="A D D"
        app:showAsAction="always" />
</menu>

Solution

  • You can add a padding to end of your toolbar, and use it as your supportActionBar

    Step 1: Remove the ActionBar from styles.xml, use Theme.AppCompat.DayNight.NoActionBar as a theme for instance

    <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         .... 
        </style>
    </resources>
    

    Step 2: Add padding to thend of the toolbar in your layout; I added 32dp, you can customized it as you need

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">
    
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:paddingEnd="32dp"
                android:paddingRight="32dp"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:titleMarginStart="30dp" />
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    Step 3: Set the toolbar as the SupportActionBar

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // setting the SupportActionBar to my customized toolbar
            setSupportActionBar((findViewById(R.id.toolbar))); 
    
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu, menu);
            return true;
        }
    }
    

    Result

    enter image description here