How can I center(Horizontally) an icon in a toolbar menu

Question

How can I center an icon in a toolbar menu, I tried adding padding or margin but is not working. How can I center an icon in a toolbar menu, I tried adding padding or margin but is not working.

This is the code for the, please let me know if I need to upload more source code. main.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">


    <item
        android:id="@+id/item1"
        android:icon="@drawable/ic_credit_card_black_24dp"
        android:title=" "
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/item2"
        android:icon="@drawable/ic_credit_card_black_24dp"
        android:title=" "
        app:showAsAction="ifRoom"/>

</menu>

menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/colappsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:layout_scrollFlags="exitUntilCollapsed|scroll"
            app:contentScrim="?attr/colorPrimary"
            app:title=" "
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp" >
            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/mainimg"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

You won't be able to do that with a menu item without some rather hacky approach. Just use your own `` in your layout (if you're not already) and put an `` in it with `layout_gravity="center"`. — Mike M., Nov 20 '18 at 23:27
Possible duplicate of [How to Control Menu Position in Toolbar Android](https://stackoverflow.com/questions/44224355/how-to-control-menu-position-in-toolbar-android) — dglozano, Nov 20 '18 at 23:29
@MikeM. the problem is taht i'm using the 'collapsingtoolbarlayout' and if I add a button for some reason the collpasing stops working — Pedro, Nov 20 '18 at 23:34
You put it directly in the ``? I'll have to do a quick test to see what's going on with that. — Mike M., Nov 20 '18 at 23:36
@MikeM. I have updated the qeustion to show the code where i have the tollbar layout, thanks for your help — Pedro, Nov 20 '18 at 23:40
Hmm, well, the `CollapsingToolbarLayout` still works for me, but when the `Toolbar` is inside one, the `ImageButton` is no longer centered. Very odd. I'm still trying to figure out why. — Mike M., Nov 21 '18 at 00:11
Oh. I remember now. `CollapsingToolbarLayout` adds a transparent dummy `View` to the `Toolbar` with `match_parent` width – to use to figure the collapsed position and size for the title – and that pushes the `ImageButton` all the way to the right. I'm trying to think of a good workaround. Are you going to have a title on the `Toolbar`? — Mike M., Nov 21 '18 at 00:24
OK, see if this works for you: https://drive.google.com/file/d/1uZnyDNFSEaWoFBajb_7Hlxvb_Fg3IqSt/view?usp=drivesdk. I just stuck the `ImageButton` directly in the `CollapsingToolbarLayout`, and centered it there. It's looking good on my end, and the collapse still works, too. — Mike M., Nov 21 '18 at 00:49

score 2 · Answer 1 · answered Nov 20 '18 at 23:37

I dont know if exist an easy way, but you could create CustomToolbar. For example, create a xml layout with name: toolbar

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/tool_bar_size_mio"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:weightSum="10">
    <Button
            android:id="@+id/btn_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Button"/>
</LinearLayout>

And then, include to your activitys xml

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar_menu_principal" />

This won't work. The remaining menu item on the right will cause the `Button` to be left of center. — Mike M., Nov 20 '18 at 23:39

score 0 · Answer 2 · answered Nov 20 '18 at 23:25

0

I don't know if u can do this but maybe try to apply text align center to parent item. And I saw this in google it will maybe help: android:layout_centerHorizontal="true" android:layout_gravity="center" Maybe it should help.

answered Nov 20 '18 at 23:25

karl

5
4

How can I center(Horizontally) an icon in a toolbar menu

2 Answers2