CODEWITHSUNDEEP
androidandroid-toolbarmargins
Anish Silwal
Anish Silwal

Reputation: 980

Remove margin in android toolbar icon

I get this weird margin in my app toolbar between icon and navigation icon in the toolbar (as in the image). I've got no idea about where it comes from and how to remove it. After searching the internet I found this:

<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_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimaryDark"
    android:layout_margin="0dp"
    android:contentInsetLeft="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetStart="0dp"
    android:contentInsetEnd="0dp"
    android:padding="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetEnd="0dp">
</android.support.v7.widget.Toolbar>

But I still get this margin as in the figure: Margin

Edit >> Solution

Well after using layout bound I figured much of the margins are of the icon(as in figure). But can I still remove this margin and change the size of the icon and the title text. enter image description here

Edit

Following @Amir solution: Helper for java:

class BasicActivity extends AppCompatActivity{
    protected Toolbar mToolbar;    /// Initilize it in onCreate methode
    .....

     protected void setupToolbar(String title) {
        toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar ab = getSupportActionBar();
        if (ab != null) {
            ab.setDisplayHomeAsUpEnabled(true);
            ab.setDisplayShowHomeEnabled(true);
        }

       if (!TextUtils.isEmpty(title)) {
        setTitle(title);
    }
}

}

And in your activity class:

class Main extends BasicActivity{
     @override
     protected void onCreate(Bundle saved){
          super.onCreate(saved);
          ....
          setupToolbar("MAIN");
     }
}

Upvotes: 27

Views: 22702

Answers (5)

SaadurRehman
SaadurRehman

Reputation: 660

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:contentInsetEnd="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:contentInsetEndWithActions="0dp"
            >

Upvotes: 0

Muhammad Awais
Muhammad Awais

Reputation: 11

if you are using this

   <android.widget.Toolbar>
    android:contentInsetStart="0dp"
    android:contentInsetLeft="0dp"
</android.widget.Toolbar>

if using

    <androidx.appcompat.widget.Toolbar>

    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
</androidx.appcompat.widget.Toolbar>

Upvotes: 1

任志勇
任志勇

Reputation: 71

You can adjust the margins by modifying the theme and style, like this：

<style name="cusToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
    <!--default is 56dp-->
    <item name="android:minWidth">0dp</item>  
    <item name="android:paddingLeft">16dp</item>
    <item name="android:paddingRight">16dp</item>
</style>

<style name="cusToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <!--default 4dp-->
    <item name="titleMargin">0dp</item> 
    <!--default @dimen/abc_action_bar_content_inset_with_nav-->
    <item name="contentInsetStartWithNavigation">0dp</item> 
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="toolbarNavigationButtonStyle">@style/cusToolbarNavigationButtonStyle</item>
    <item name="toolbarStyle">@style/cusToolbarStyle</item>

</style>

Upvotes: 7

jobbert
jobbert

Reputation: 3497

If you want to remove the margin/padding from the title in a CollapsingToolbarLayout you might find this usefull:

<android.support.design.widget.CollapsingToolbarLayout
    app:expandedTitleMarginStart="0dp"
    .../>

Upvotes: 0

Amir
Amir

Reputation: 16587

You can easily remove Margin | padding between title and back icon with:

app:contentInsetStartWithNavigation="0dp"

Margin | padding In left/right side of toolbar with:

app:contentInsetStart="0dp"

Also if you need more customization do with following:

<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
    android:background="@color/color_primary"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/icon_toolbar_left"
            style="@style/IconFont.Large"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="?attr/selectableItemBackground" />



        <TextView
            android:id="@+id/text_toolbar_title"
            style="@style/Textview.White.MediumSmall"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/icon_toolbar_right"
            android:layout_toRightOf="@+id/icon_toolbar_left"
            android:gravity="center"
            android:text="@string/nav_category"/>


        <ImageView
            android:id="@+id/icon_toolbar_right"
            style="@style/IconFont.Large"
            android:layout_width="48dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="?attr/selectableItemBackground"/>

    </RelativeLayout>

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

Upvotes: 60

Related Questions