I've never used the toolbar before, but starting with this new project I wanted to give it a try. However I'm already having troubles.
For all I know, I used appcompact toolbar to define the toolbar in my layout:
<?xml version="1.0" encoding="utf-8"?>
<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">
<!--toolbar-->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/toolBar"
android:layout_width="match_parent"
android:layout_height="64dp">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/toolbar"
android:id="#+id/container"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
</RelativeLayout>
Also, in my activity I set it with getSupportActionBar()
protected void setupActionBar() {
// Set a toolbar to replace the action bar.
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("My custom toolbar!");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
logger.debug("Toolbar Setted");
}
}
However result shows only an empty box with no title or functionality at all.
I don't understand what I'm missing out, the process should be pretty straight forward.
The style file I use is the following:
<!-- Base application theme. -->
<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>
<item name="toolbarStyle">#style/Widget.AppCompat.Toolbar</item>
</style>
Create a toolbar.xml file in your layout folder and place this code in it
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="56dp"
android:background="#color/colorPrimary"
android:id="#+id/toolBar" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Place what ever you want in your layout -->
</FrameLayout>
</android.support.v7.widget.Toolbar>
add this toolbar in your activity layout like this
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#android:color/white"
tools:context=".MainActivity">
<include layout="#layout/toolbar"></include>
<!-- Create your main layout here -->
</LinearLayout>
In your activity you can set your toolbar like this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
Related
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 am developing an app in which I have window default action bar but I want to remove that and want to add toolbar instead. How can I add that
Code for removing action bar:
<activity
android:name=".CMainActivity"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
/>
I am extending AppCompatActivity
// navigation bar code
m_Drawer = (DrawerLayout) findViewById(R.id.drawer_layout);//finding id of drawerlayout
s_drawerToggle = new ActionBarDrawerToggle(
this, m_Drawer, m_Toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
m_Drawer.setDrawerListener(s_drawerToggle);
m_Drawer.setScrimColor(getResources().getColor(android.R.color.transparent));
s_drawerToggle.syncState();
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:titleTextColor="#FFFF"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="UnusedAttribute">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabTextAppearance="?android:textAppearanceMedium"
tools:ignore="UnusedAttribute"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
tools:ignore="PrivateResource"/>
In your styles.xml set AppTheme to NoActionBar like below -
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then in your activity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and add this toolbar in your layout.xml file like below -
<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/primaryColor" />
Add this code to your xml layout to add a toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Then in your Java class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("title");
To remove default action bar, in your manifest file add
<android:theme="#android:style/Theme.NoTitleBar">
or in your styles.xml add:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
place this code in activity xml file:
<?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" android:fitsSystemWindows="true"
tools:context="com.ideabiz.riderapplication.ui.KmsActivity">
<android.support.design.widget.AppBarLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_kms" />
</android.support.design.widget.CoordinatorLayout>
place this code in content xml file:
<?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"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.ideabiz.riderapplication.ui.KmsActivity"
tools:showIn="#layout/activity_kms">
place this in java file:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
You might have 3 folders inside "res" folder
values
values-v11
values-v14
You need to change style.xml file from all this folders to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
in case you have included values-v21 same for that.
now extend your MainActivity with AppCompatActivity(Which you are doing) and assign your ToolBar as ActionBar.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I hope this will help you. if not tell me what error getting after doing that.
Update :
Add this another style to your styles.xml
<style name="NoActionBarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
</style>
and in manifest.xml file.
<activity
android:name=".CMainActivity"
android:screenOrientation="portrait"
android:theme="#style/NoActionBarStyle" />
Happy Coding.
I'm trying to add AppCompat toolbar in my application but I am unable to display it in correct way. I followed steps from this tutorial: http://www.android4devs.com/2014/12/how-to-make-material-design-app.html but the toolbar overlaps ListView and parts of it are separated. I don't know how to describe it well, so here is the screen of my app:
Below I am attaching codes of toolbar and my view. Could you please help to fix the toolbar?
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolbar_primary"
>
</android.support.v7.widget.Toolbar>
Activity view:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
tools:context="bak.grzegorz.pl.smm.Activities.MessageList">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Remove default old actionbar by using NoActionBar theme
style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
AndroidMainifest.xml
<application
android:theme="#style/AppTheme"
... >
Remove padding on your RelativeLayout and add layout_below flag on ListView
<?xml version="1.0" encoding="utf-8"?>
<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="bak.grzegorz.pl.smm.Activities.MessageList">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ListView
android:layout_below="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
in your MainActivity set toolbar as default actionbar
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
}
It overlaps because you are using a RelativeLayout, either use "layout_below" tag in your list view or use a LinearLayout. Also you have added padding in your main RelativeLayout so it will modify your toolbar's position.
Actually i want to put Action Bar menu into my layout given below, i am no getting how to put the Action bar menu into it. Can anyone help me in fixing this problem...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="#id/action_bar"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable Pin"
android:id="#+id/button"
android:layout_marginBottom="140dp"
android:layout_alignParentBottom="true"
android:layout_alignEnd="#+id/button2"
android:layout_alignStart="#+id/button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable Pattern"
android:id="#+id/button2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="51dp" />
</RelativeLayout>
first you must use tool bar because action bar is deprecated
and for that add below code to your layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/back">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
/>
<!-- add your other layout component here -->
</LinearLayout>
and in your activity you must extend form appcompactActivity like below:
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.yourlayout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
and in the style.xml add this code: specially this parent="Theme.AppCompat.Light.NoActionBar"
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
You should use Toolbar, since ActionBar is deprecated. Add this in your layout file:
<android.support.v7.widget.Toolbar
android:id=”#+id/my_awesome_toolbar”
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”?attr/actionBarSize”
android:background=”?attr/colorPrimary” />
Depending on your other project files, you may need to modify the styles.xml and your activity. Check out this link for more info.
I am using the new toolbar and setting it as the supportActionBar. My problem is that it is covering my content.
Here is the code I am using to setup the toolbar.
public void setupNavBar() {
mToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
mActionBar = getSupportActionBar();
mActionBar.setDisplayShowHomeEnabled(true);
mActionBar.setDisplayShowTitleEnabled(false);
}
}
The Styles:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="ToolBarStyle" parent="">
<item name="android:elevation">5dp</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
and the layout:
<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.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/material_blue_grey_800"
android:minHeight="#dimen/abc_action_bar_default_height_material"
android:id="#+id/toolbar_actionbar"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#478"
android:text="#string/hello_world" />
I thought that by calling setSupportActionbar the system would take care of positioning content below the toolbar view but that is not what I am seeing.
What is the correct way of using the toolbar. I have some activities where I wan the toolbar to be transparent with the content behind it it and others where I want it to be opaque with the content below.
Thanks
use below in textview
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#478"
android:text="#string/hello_world"
android:layout_below="#+id/toolbar_actionbar"
/>
I just encountered this same issue. I fixed it by adding these two lines in the context_main.xml file:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.yourappname.MainActivity"
Like this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.yourappname.MainActivity"
tools:showIn="#layout/app_bar_main">