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.
Related
In order to get action-buttons into my toolbar, I have implemented a custom-toolbar in which the layout with the button images can be defined. In the activity_main layout file, I refer to this custom-toolbar layout via an include instruction.
It works to the extend that now in 1 line at the top of the action bar both contents appear: My program title and the overflow menu icon PLUS the button from the custom-toolbar. The problem is that below this line a second empty row appears with no content. Means, the height of the action bar is doubled and this unwanted area is overlapping my canvas. Here the screenshot of the phenomena:
I have searched for documents addressing this but did not find a mapping case. Furthermore I have tried all kind of constellations in my layout file (e.g. in respect to the postion of the include instruction) but did not achieve a Change. I also tried with different sizes of the image file without a Change. The current size is 3K with 80x49 Pixel.
Here my code which is reduced to show just the case relevant lines:
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.View;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public void on_distance_waiting_Click(View view) {
}
}
The main layout:
<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"
tools:context="com.pm.pmactionbaricon.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:orientation="vertical">
<include layout="#layout/custom_toolbar" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The custom-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"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:padding="0dp"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="310dp"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:background="#drawable/distance_waiting_small"
android:layout_width="100dp"
android:layout_height="wrap_content"
style="?android:attr/buttonBarButtonStyle"
android:title="#string/Distance"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="on_distance_waiting_Click"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
The style file:
<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>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/holo_blue_light</item>
<item name="actionMenuTextColor">#android:color/holo_green_light</item>
</style>
</resources>
Here also the used Image:
When I work with the Layouts in the design mode, I can recognize that the regular toolbar element (not the custom-toolbar) seems to be responsible for the unwanted area. The following 3 screenshots might help to Highlight this. It is also strange that the appearance here is different from the result on the device as shown at the beginning.
The activity layout (consider what is selected in the right window):
The activity layout with (Standard) toolbar selected:
The custom toolbar:
So, what is causing this unwanted area below the actionbar?
In your activity_main.xml remove the extra toolbar element:
<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"
tools:context="com.pm.pmactionbaricon.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:orientation="vertical">
<include layout="#layout/custom_toolbar" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
In custom_toolbar.xml layout make changes as shown below:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:padding="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="310dp"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:background="#drawable/distance_waiting_small"
android:layout_width="100dp"
android:layout_height="wrap_content"
style="?android:attr/buttonBarButtonStyle"
android:title="#string/Distance"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="on_distance_waiting_Click"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Also, make sure that your activity tag has this attribute set in the manifest file.
android:theme="#style/AppTheme.NoActionBar"
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);
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.
I have following menu_main.xml :
<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="Test">
<item
android:id="#+id/action_chat"
android:orderInCategory="200"
android:title="Search"
android:icon="#drawable/ic_chat"
app:showAsAction="ifTest"
></item>
<item
android:id="#+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="#drawable/ic_drawer"
app:showAsAction="ifTest"></item>
</menu>
I can see two icon in App-bar (right aligned). Now I want to add an Icon on the left most place. How can i do that?
try it like this.
<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"
tools:context=".HomeActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="..."
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="..."
android:textColor="..."
android:textSize="..." />
<ImageView
android:id="#+id/..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/..."
android:padding="15dp"
android:layout_gravity="start"
android:src="#drawable/..." />
<ImageView
android:id="#+id/..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:padding="15dp"
android:src="#drawable/..." />
</android.support.v7.widget.Toolbar>
....
....
..all other layout files
</RelativeLayout>
now in your mainactivity
...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Set a toolbar to replace the action bar.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
....
this will be your layout file for mainactivity
1st imageview will be at start
To add custom views for ActionBar, use setCustomView and provide it your own layout file or view. This will take over the space where the title of the actionbar would normally go.
I'm currently trying to convert my app to lollipop material design and have run into some problems with the actionbar/toolbar. Implementing everything the way I did, the actionbar/toolbar won't show on either a lollipop or kitkat device. Perhaps someone could look at my themes, styles, activity_main (where I hold a bunch of fragments and is the only place I put the toolbar xml code), and mainactivity.
Thanks.
values/styles.xml
<resources>
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- Set AppCompat’s actionBarStyle -->
<item name="actionBarStyle">#menu/action_menu</item>
<!-- The rest of your attributes -->
</style>
</resources>
values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="colorPrimary">#color/material_blue_grey_800</item>
<item name="colorPrimaryDark">#color/material_blue_grey_950</item>
<item name="android:textColor">#color/black</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
</resources>
activity_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/drawerView"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="start" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<ListView
android:id="#+id/drawerList"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#drawable/nav_border"
android:divider="#null" />
</RelativeLayout>
<!--
<fragment
android:id="#+id/fragment1"
android:name="com.shamu11.madlibsportable.MadlibsSelect"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
-->
</android.support.v4.widget.DrawerLayout>
mainactivity
public class MainActivity extends ActionBarActivity implements
OnItemClickListener {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fragment fragment = new MadlibsSelect();
fragment = new MadlibsSelect();
FragmentTransaction fm = getSupportFragmentManager().beginTransaction();
fragment.setArguments(getIntent().getExtras());
fm.add(R.id.fragment_container, fragment);
fm.commit();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.inflateMenu(R.menu.action_menu);
//ActionBar bar = getActionBar();
//bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#428bca")));
...more stuff happen down here including adding nav drawer.
Change you're activity_main.xml as follows
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout
android:id="#+id/drawerView"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="start" >
<ListView
android:id="#+id/drawerList"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#drawable/nav_border"
android:divider="#null" />
</RelativeLayout>
<!--
<fragment
android:id="#+id/fragment1"
android:name="com.shamu11.madlibsportable.MadlibsSelect"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
-->
</android.support.v4.widget.DrawerLayout>
and If you're using setSupportActionBar then toolbar.inflateMenu won't work.
For more details check this post Android Usages Of Toolbar. It may help you.
Your activity has to extend from ActionBarActivity when using the new AppCompat library.
Yes this happen , I have wasted over an hour to fix this.
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
This will automatically sync and finally show the toogle icon.
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggls
mDrawerToggle.onConfigurationChanged(newConfig);
}
That works for me, Hope that helps.