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:
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.
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");
}
}
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>
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>
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>
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"
.../>
<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"
>
Related
How can I remove the margin between the navigation icon and toolbar logo.
My toolbar layout
<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="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/toolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>
I am inserting logo like this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setContentInsetStartWithNavigation(0);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setLogo(R.drawable.sample);
my toolbar is looking like this
the logo is almost showing in the middle I want it beside the drawer icon
I searched on stackover flow and all answers tell to use
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
but its not working . I can say there is no padding for the image it is cropped exactly to edges. If i use tile there is no gap in middle ,the gap appears only when inserted logo.
Is this intended behavior ? Is there any thing else I can do to remove the gap?
Edit : styles i am using
<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>
<style name="toolbarTheme" parent="AppTheme">
<item name="android:textColorPrimary">#color/themeColor</item>
<item name="android:textColorSecondary">#color/themeColor</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Try 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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/paper9patch"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/toolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/ic_launcher_round" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Try this although it not much different from your layout but its works well i have tested it .
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:gravity="center"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Set up toobar as.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("New");
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The Problem was with the image , It did not had any extra space or padding at side but the image resolution was higher .
Solution is :
Just decrease the image resolution of logo and every thing should work normally.
Trying to uppercase the title of a toolbar:
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/App.Theme.ToolbarTitleUppercase"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleTextAppearance="#style/App.Theme.ToolbarTitleUppercase" />
Toolbar style
<style name="App.Theme.ToolbarTitleUppercase" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textAllCaps">true</item>
</style>
This is not having any effect on the title text. Any ideas?
This is with support library 27.1.1 set app:theme
<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"
app:theme="#style/ToolbarTextAppearance"
/>
Then in ToolbarTextAppearance in styles.xml
<style name="ToolbarTextAppearance">
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>
Based on Tim's answer, here's another way to do it:
styles.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!--<item name="android:textSize">18sp</item>-->
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>
toolbar.xml
<android.support.v7.widget.Toolbar
...
app:titleTextAppearance="#style/Toolbar.TitleText"/>
You can create a toolbar.xml on layout folder:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.PopupOverlay"
tools:showIn="#layout/activity_layout">
<TextView
android:id="#+id/my_title"
android:text="Title text"
android:textAllCaps="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Include it on the xml you want to use the toolbar:
<include layout="#layout/toolbar"/>
And then inside your view:
getActivity().findViewById(R.id.toolbar);
getActivity().getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it helps!
Use Material Toolbar like this:
put app:titleCentered="true" to make your text in the center
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:background="#color/main_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleCentered="true"
app:titleTextAppearance="#style/Toolbar.TitleText" />
i'm trying to create app with 2 tablayout i follow some steps and every things works fine but i have this problem with Tablayout show me big space between Toolbar and tablayout like this photo when i scroll up tablyout Space disappears i want to remove this space
when i scroll up :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
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"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:elevation="5dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
Style.xml :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
In your case the extra space is an toolbar in your xml on above tab layout and you are using theme
"Theme.AppCompat.Light.DarkActionBar"
which become causing two actionbar here, if you dont using toolbar just remove it
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
this will be your final xml after removing toolbar,
else you want toolbar then set the them which dont have actionbar
Problem: I didn't see your Manifest file but it looks like you have one default Toolbar coming from your Theme and one you are setting yourself. To fix it, you can remove default Toolbar and use the one you added.
To fix this follow these steps.
Step 1: Add NoActionBar style to your Style.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Step 2: Set AppTheme.NoActionBar to your Activity in Manifest.xml
<activity
android:name="YourActivity"
android:theme="#style/AppTheme.NoActionBar">
</activity>
Now your Activity will not have a system Toolbar. You can add your own Toolbar customise it as you want.
Step 3: Set your layout Toolbar as default Toolbar inside your Activity.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Now you can use this Toolbar:
setTitle("Some Title");
The extra space is the second toolbar which is written by you in appbarlayout. First toolbar is by default toolbar.
you can remove extra space which is a toolbar by writing below code in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Instead of
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Or
you can modify your appbarlayout code like below. You have just remove the toolbar from appbarlayout.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
I want to put spaces between toolbar icon and toolbar title and also I want to change the color of statusbar in my app as same as the color of toolbar can anyone help
currently it looks like this:
here is my code:
public class AbstractActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_abstract);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.ic_astrological_sun);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#0F6177"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</LinearLayout>
Here adding app:titleMarginStart="32dp" solve.
pay attention on app prefix
in context:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="#drawable/ic_launcher"
app:title="#string/app_name"
app:titleMarginStart="32dp" />
Use Toolbar default title margin left 16dp
And we can change it with app:contentInsetStart="100dp"
Or if you had a navigation icon,the title marigin left 56+16=72dp defalt,
So you can change it with app:contentInsetStartWithNavigation="56dp"
add app:titleMarginStart="12dp" and it works like charm
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="#drawable/ic_arrow_back_white_24dp"
app:title="#string/app_name"
app:titleMarginStart="12dp" />
Option 1: Don't recommend:
Set title with space before your text. For example " Your title"
Option 2: Add your custom TextView under your Toolbar and you can custom this TextView in your xml layout or your activity class
For example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#0F6177"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<TextView
android:id="#+id/text_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_marginLeft="5dp"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
I've tried assigning weights of course, but it appears that isn't supported by Toolbar.
You can use the following to get rid of left margin in the tool bar
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
So finally your code can be like this-
<android.support.v7.widget.Toolbar
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="48dp">
<TextView
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/background_floating_material_dark" />
</android.support.v7.widget.Toolbar>
Edit
You can do in the code also as-
toolbar.setContentInsetsAbsolute(0,0);
Even you can modify it in style too-
<item name="toolbarStyle">#style/Widget.Toolbar</item>
<style name="Widget.Toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="contentInsetStart">0dp</item>
</style>
You can put a LinearLayout inside your Toolbar. The LinearLayout allows you to set an orientation and, once you've done that, you can use layout_weight.
So it would be like:
<android.support.v7.widget.Toolbar
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="48dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/background_floating_material_dark"
android:layout_weight="1" />
</LinearLayout>
</android.support.v7.widget.Toolbar>