I am trying to make the toolbar fit correctly and have no top or side edges and I am not getting it, any idea how to get it?
I have tried changing the insets from the java code but it has not worked either.
I've been stuck for days and can't find a solution, help!
Here is the xml of the toolbar
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="6dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:titleMargin="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imageViewPerfilMensajesPrivados"
android:layout_width="67dp"
android:layout_height="match_parent"
android:src="#drawable/user" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/nombre"
android:layout_width="wrap_content"
android:textColor="#fff"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="RECEPTOR" />
<TextView
android:id="#+id/email"
android:textColor="#fff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="RECEPTOR" />
</LinearLayout>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
And here the Java code
Toolbar toolbar = (Toolbar) findViewById(R.id.mCustomToolbar);
toolbar.setContentInsetsRelative(0,0);
setSupportActionBar(toolbar);
And this is how it looks like right now.
The issue is not in this toolbar layout, issue is in the layout of activity or fragment. The top container in your activity/fragment has padding or there is a margin in the container(that has a list ) of toolbar layout if there's any container.
Possible solutions:
Remove the padding from the container that has the toolbar (if toolbar is being included as an independent view).
Or remove margin from the container that has the toolbar or most likely place the toolbar as a top most child.
Related
The LinearLayout that's been placed inside Toolbar is shifted to the right as you can see...
As a result, the Toolbar doesn't stack up well with the TabHost (which is again implemented with a Toolbar in a parent Fragment).
How can I fix it?
Layout sketch (Android Studio)
Actual app
Layout Code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.android.example">
<android.support.v7.widget.RecyclerView
android:id="#+id/recview_navigator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_weight="1"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/accent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_navigator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_navigate_before_white_48dp"
android:tint="#color/recview"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="#drawable/ic_save_white_48dp"
android:tint="#color/recview"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Have you tried removing the content insets?
<android.support.v7.widget.Toolbar`
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
...>
The problem
The extra margin space is because of the toolbar tag. It has about 16dp of space by default. It is required, so that icons like hamburger,app_icon or up-caret can be shown.
How can you fix it?
Well, the hack is to include android:layout_marginLeft="-16dp" attribute in the toolbar tag, but this can mess up the layout if up-caret(back-button) is shown when a child activity is called or hamburger icon in case of a navigation drawer.
I've written about this earlier here.
If you're not going to use the functionality of toolbar then it is better to replace the whole appBarLayout with the following layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView_navigator_up"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="false"
android:src="#drawable/ic_navigate_before_white_48dp"/>
<ImageView
android:id="#+id/imageView_navigator_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_save_black_48dp"/>
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="130dp"
android:layout_height="130dp"
app:cardCornerRadius="65dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="-105dp"
android:clipChildren="true"
app:cardElevation="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/pic"
android:scaleType="centerCrop"/>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Raven Starfire"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="155dp"
android:textAppearance="?android:textAppearanceLarge"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Bran, Romania"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="180dp"
android:textAppearance="?android:textAppearanceSmall"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#90A4AE"
android:layout_gravity="bottom"
android:orientation="vertical"
android:id="#+id/bottomTopCard"
android:elevation="19dp"></LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottomTopCard"
app:layout_anchorGravity="top|right"
android:layout_marginRight="16dp"/>
</android.support.design.widget.CoordinatorLayout>
Well, I need to bring the Floating Action button above the linear layout(lighter shade of ash) at the bottom of the Coordinator Layout. I set the anchor to top right end of the Linear layout(which works fine), but the FAB seems to have gone below it.
I suppose that the Coordinator layout does not work like the FrameLayout/CardView. Giving elevation doesn't bring the FAB above the Linear layout either.
Any suggestion about bringing the FAB Above that linear layout would be helpful.
Thank you for the answer. The layout turned out like this now,
Set the Floating Action button elevation from the app namespace not android:
app:elevation="20dp"
not:
android:elevation="20dp"
By the way, android material design recommends that the FAB be at 6dp elevation
https://material.google.com/material-design/elevation-shadows.html
I am using a toolbar as my action bar in my activity and i want to center align the title. I am setting a navigation icon as well and the title is aligning a bit right to the center. It is treating the navigation icon as a different part and aligning center based on the remaining width. Here is my toolbar xml
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/titlecontainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/title"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/titlesupport"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:textSize="10sp" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
This is how i am setting the toolbar and the title in my activity oncreate
mToolbar = (Toolbar) findViewById(R.id.main_activity_toolbar);
setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
TextView title = (TextView) mToolbar.findViewById(R.id.title);
title.setText("MY TITLE");
I am sure it is something very basic that i am missing but i have looked at all the answers and tried lots of settings with no result.
EDIT I have also removed the settings menu icon from the menu_main and it is now blank
<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">
</menu>
For those, who still stuck when having only navigation icon (no menu icon)
I use setContentInsetsAbsolute to create an content insets on the right to be the same width as the left using
toolbar.setContentInsetsAbsolute(0,toolbar.getContentInsetStartWithNavigation());
Also set this after you have included the navigation icon if you included it programatically.
You are missing the gravity properties for your text view.
Change width of TextView to match_parent and add gravity to center. Also change width of your linear layout to match_parent
<LinearLayout
android:id="#+id/titlecontainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/title"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/titlesupport"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="10sp" />
</LinearLayout>
Hope it helps..!!
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_toolbar""
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test Alignment"
android:gravity = "center"
android:id="#+id/title" />
</android.support.v7.widget.Toolbar>
I'm aiming to have a toolbar with text in the center of it and a menu icon on the far left, like so:
!-ICON-----TEXT-----------!
This is how I have attempted it:
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp"
android:layout_gravity="center" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hamburger2"
android:layout_gravity="left"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I found that without a RelativeLayout it displays ONLY the text. But as it stands, the toolbar looks like this:
!-TEXT-----ICON-----------!
For some reason it displays them in the wrong order. Even if I swap the layout_gravity of the 2 elements it displays the same thing.
Does anybody know why this could be happening?
Here is how I would accomplish this. Here is a link to all of the material icons. https://www.google.com/design/icons/ Make sure you are using their hamburger menu. Also if you are using Android Studio, you should have 4 different sizes for the hamburger menu within your mipmap folder. Also, Tooolbar titles are 22sp
Here is what the toolbar would look like with the example below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<RelativeLayout
android:id="#+id/toolbarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:navigationIcon="#drawable/hamburger2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp" />
</RelativeLayout>
<!-- Rest of your Content -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbarContainer">
</RelativeLayout>
</RelativeLayout>
First of all, you're setting the width of your views to match_parent, which makes them as wide as the parent RelativeLayout and drawn on top of each other regardless of their positioning. The text appears to the left, because it's left-aligned by default and the image is centered for the same reason. You should set it to wrap_content to make them only as wide as needed.
Secondly, android:layout_gravity does not really work well with a RelativeLayout, because gravity is applied on all its children at once after postioning. You can use android:layout_centerHorizontal="true" for centering instead.
Besides that, when using a RelativeLayout, if you populate yout TextView with a long text, it might stretch and overlap the image. Please consider using a LinearLayout:
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/hamburger2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text Here"
android:textColor="#ffffff"
android:textSize="23sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
This way the text will be always displayed to the right of the image.
I am trying to place a RelativeLayout within a Toolbar so that I can position views easily within the Toolbar. This Toolbar is used in standalone mode and has two menu items.
I have this in my layout xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#ffffff">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:elevation="3dp"
android:background="#ff17182b">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f76865"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFD10202"
android:elevation="3dp"
android:text="Stopped"
android:textColor="#ffffff"
android:padding="2dp"
android:layout_marginTop="50dp"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
http://i.imgur.com/XLZx7Ts.png is a link to a screenshot of the resulting UI
With the layout above, the RelativeLayout is positioned to the left and its right border stops just at the left border of the toolbar menu items. it is as if the menu items cover the area from the top of the screen to the end of the toolbar and won't allow placing of elements within that area
Please, I need to know if I am doing anything wrong or if there is a right way of positioning views within a toolbar