1

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>
Zain
  • 37,492
  • 7
  • 60
  • 84
ybybyb
  • 1,385
  • 1
  • 12
  • 33

2 Answers2

2

You have to use a container inside the toolbar. That way you can manage it however you want.

Update: Can you try replacing from style file?

<style name="StyleSampleName" parent="@android:style/Widget.ActionButton">
    <item name="android:drawablePadding">@dimen/style_sample_padding</item>
</style>

Dimen:

<dimen name="style_sample_padding">5dp</dimen>

Theme:

<style name="Theme.YourUseTheme"
       parent="Theme.AppCompat.Light.NoActionBar">
   
    <item name="android:actionButtonStyle">@style/StyleSampleName</item>
</style>
  • I added a code to the text. Is that the wrong way? Can't I use the menu.xml? Do you mean to add ImageView in the Toolbar? – ybybyb Dec 23 '20 at 19:43
2

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

Zain
  • 37,492
  • 7
  • 60
  • 84
  • 1
    Thank you. Can i ask one more question? In Step 2, What is `app:contentInsetLeft` , `app:contentInsetStart` mean? The reason I'm asking is, I left `android:paddingEnd`, `android:paddingRight` and delete `contentInset` properties. But the result was the same as the first. – ybybyb Dec 24 '20 at 17:34
  • 1
    Welcome :) .. they are used to add some margin to views in toolbars (any toolbar not just actionbar), but they are not suitable for the menu icons or navigation buttons like back arrow >> As the documentation definition `Minimum inset for content views within a bar. Navigation buttons and menu views are excepted. Only valid for some themes and configurations` – Zain Dec 24 '20 at 17:43
  • 1
    you can remove them from my solution if you want, as I just left them just in case you need them >> and I didn't like to change your stuff in your shared layouts – Zain Dec 24 '20 at 17:44