I am using the following setup to theme my toolbar in toolbar.xml:
<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="wrap_content"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:title="#string/app_name"
>
</android.support.v7.widget.Toolbar>
And in layout my_layout.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<include
app:title="#string/my.toolbar.title"
layout="#layout/toolbar"
>
</include>
</LinearLayout>
Unfortunately, the title of the toolbar does not get the value of my.toolbar.title.
http://developer.android.com/training/improving-layouts/reusing-layouts.html#Include suggest that you can override any android: attributes but what about app: .
Note: I have also tried to use android:title instead of app:title and still no success.
Any ideas?
You can do it programmatically:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Your title");
You will want to use the <merge> tag around the toolbar, that will allow you to use the tags that you would use on the toolbar in the include tag.
Related
Currently, I'm developing an app but I'm a beginner. I have added some activity layouts but every time I start the app a default toolbar appears. How do I customize this toolbar without "destroying" the implemented layouts?
toolbar.xml
<?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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo"
android:padding="20dp"
android:foregroundGravity="center"/>
</android.support.v7.widget.Toolbar>
MainActivity.java (extends RxAppCompatActivity)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
Toolbar toolbar = findViewById(R.id.my_toolbar);
setSupportActionBar(toolbar);
}
The toolbar variable is always null - why?
Add the XML code in your activity XML file. Since the tag is not included in your activity_main.xml, you will always get a NullPointerException when you try to find it by id.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.screens.MainActivity">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_logo"
android:padding="20dp"
android:foregroundGravity="center"/>
</android.support.v7.widget.Toolbar>
<!--Rest of your XML-->
</androidx.constraintlayout.widget.ConstraintLayout>
Note: I used ConstraintLayout just for example, you can use any layout you like (although ConstraintLayout is pretty awesome!)
By the way, since you are using ButterKnife, you can easily bind the view with #BindView(R.id.my_toolbar), instead of using findViewById().
I'm new to Android Studio and it is creating a lot of problem to me while setting my toolbar in and activity,the problem is whenever i change it layout width and height to the following
layout_width=match_parent
layout_height=attr/actionBarsize
it is getting back to change to the following
layout_width=368dp
layout_height=56dp
No matter how many times it tried to change it is giving me the same result again and again.
Yeah this was really annoying me too. I presume you are trying to put the toolbar within a ConstraintLayout.
ConstraintLayout doesn't support match_parent and it expects every view to be constrained. When you click in the design mode of the Android Studio, the editor will kick in and try to 'fix' any issues with your xml. In this case it finds your toolbar is not constrained and is incorrectly using match_parent and so tries to fix this for you (and you should see a warning that the toolbar is not constrained).
I think you have 2 options:
1 Constrain the toolbar in your layout and replace 'match_parent' with '0dp'
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp" />
2 Put the toolbar within a co-ordinator layout. You used to have to do this for scrolling functionality with the toolbar, but with the new ConstraintLayout I'm not sure if this still applies
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CoordinatorLayout>
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
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:id="#+id/coach_bar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#F4B702"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!--<Your Design>-->
</RelativeLayout >
Java
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.my_icon);
setSupportActionBar(toolbar);
if(getSupportActionBar()!=null)
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Manifest.xml
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.NoActionBar"/>
I had this problem and finally I found that I didn't saved style.xml after it changed.
I'm trying to create a toolbar that uses a background I made in a png file.
Now, when I use the background in the xml, the layout editor in the android studio shows exactly the expected result. The problem comes when I run the app in the virtual device. The background doesn't adjust to the toolbar and as a result only a part of it gets shown.
Moreover, the title and the items are acting strange. The title is not shown at all and the only item that is displayed in the toolbar suddenly jumps to the left.
XML Code of the Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar_styled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="15dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
XML Code for the style of the toolbar:
<style name="AppTheme.AppBarOverlay.Styled" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="android:titleTextStyle">#style/ToolBarTitleStyle</item>
</style>
<style name="ToolBarTitleStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16dp</item>
</style>
And this is the MainActivity code which concerns the toolbar:
toolbar = (Toolbar) findViewById(R.id.toolbar_styled);
toolbar.setTitle(R.string.app_name);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Here is the images of the layout editor preview and the virtual device:
Layout Editor : https://i.gyazo.com/2b01f5ef9c87ecb35a605aa150aa6ad5.png
Virtual Device: https://i.gyazo.com/5bbd9bf5a2df1727278ba9e78efd622b.png
You need to nest it like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cor_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
then set them up like this:
toolbar= (Toolbar) findViewById(R.id.toolbar);
collapse=(CollapsingToolbarLayout) findViewById(R.id.collapseToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapse.setTitle("Title");
collapse.setCollapsedTitleTextColor(Color.parseColor("#FFFFFF"));
collapse.setExpandedTitleColor(Color.parseColor("#FFFFFF"));
collapse.setStatusBarScrimColor(Color.parseColor("#FFFFFF"));
1) create one tool_bar.xml file in your res folder and paste the following code.
2) Include this tool_bar.xml file when ever you required.
3) Instantiate tool_bar object in .java file and do further process.
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
<include id="#+id/tool_bar"
layout="#layout/tool_bar"/>
Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
I'm trying to create an extended toolbar, something like:
My activity xml:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="128dp"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
From some reason, the elevation is not at the bottom of the Toolbar:
Any idea?
Thanks!
Finally found it - there are two toolbars displayed, the decor one and the one I've added. Changed my theme to inherit from "Theme.AppCompat.Light.NoActionBar" and now only my toolbar is visible.
Thanks anyway!
How can I create a toolbar/actionbar that combines the default actiondrawertoggle button (with the burger-arrow animation) with an edittext and a simple button like this?
Toolbar is a ViewGroup, so, you can use a Toolbar as a FrameLayout.
Here is a simple example, take a look at it:
<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_appcompat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
//customize your toolbar content layout here.
</LinearLayout >
</android.support.v7.widget.Toolbar>
Hope you'll be inspired.