I have a ListActivity that I want to use the toolbar in but I get the error can't resolve getSupportToolbar. Everything works fine in my main activity but here I get errors.
found this excerpt on an Android dev blog post. You have to use the toolbar as a standalone object and add your own items.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blah);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.your_toolbar_menu);
}
According to me, you haven't set the toolbar in your activity. First you have to set the app theme to#style/Theme.AppCompat.Light.NoActionBar,
Then you have to set the custom toolbar in your MainActivity like
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar_main_activity);
setSupportActionBar(toolbar);
TextView toolbar_title = (TextView) toolbar.findViewById(R.id.title_toolbar);
getSupportActionBar().setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
I hope this might solve your problem.
This is how I had set up a toolbar in my List Activity. I will post the layout file details
activity1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_activity" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/list" />
</LinearLayout>
toolbar_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/toolbar_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:minHeight="?attr/actionBarSize"
android:background="#color/windowBackground"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<Button
android:id="#+id/buttonReturn"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:background="#drawable/arrow_left" />
</RelativeLayout>
Related
I'm trying to figure out how to have the title of a toolbar on top of the menu but I don't find anything online.
basically I want to have the same toolbar as google maps on that screenshot at the bottom:
their app
but at the moment I only have this:
my app
Here is how I add menu in my toolbar
toolbar = this.findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.a_menu);
toolbar.setTitle("Title");
Here is the XML for my toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="156dp"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:animateLayoutChanges="true"
android:background="#fff"
android:elevation="8dp"
android:gravity="top|left"
></androidx.appcompat.widget.Toolbar>
I guess you can use a custom title by adding a TextView within the Toolbar.
That actually won't solve the problem, but it will allow you to add your menu below this TextView by using custom layout within the Toolbar.
and to add the menu in certain place within the Toolbar, you can use ActionMenuView, and add the menu programmatically within onCreateOptionsMenu() activity callback, and handle menu clicks with onOptionsItemSelected
MainActivity
public class MainActivity extends AppCompatActivity {
private ActionMenuView mMenuView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Inflating ActionMenuView
mMenuView = findViewById(R.id.menu_view);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Adding menu to the ActionMenuView
getMenuInflater().inflate(R.menu.a_menu, mMenuView.getMenu());
return true;
}
#Override
public boolean onOptionsItemSelected(#NonNull MenuItem item) {
// handle menu clicks
return super.onOptionsItemSelected(item);
}
}
Your Toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="156dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:animateLayoutChanges="true"
android:background="#fff"
android:elevation="8dp"
android:gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="3 E Main Street" />
<androidx.appcompat.widget.ActionMenuView
android:id="#+id/menu_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
How it looks
I have a problem with a gap being displayed at the top of a fragment when I do actionBar.hide() (btw I don't see this gap on the simulator, only on a real device). I tried this answer and that one, but nothing works. This fragment is inside MainActivity, which loads different fragments when I click on the menu. It's the only fragment where the actionBar (which is custom) should be hidden, so I cannot set the fullscreen flag on MainActivity onCreate() method. How can I redraw the view so the actionBar empty space disappear?
Here is how it looks now:
This is the mainActivty where I load the fragment:
public void onCreate(Bundle savedInstanceState) {
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
super.onCreate(savedInstanceState);
showActionBar();
if(Build.VERSION.SDK_INT >= 21){
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
setContentView(R.layout.activity_main);
setUpMenu();
}
On click on the menu, I change the fragment accordingly:
#Override
public void onClick(View view) {
if (view == itemProfile){
mActionBar.hide();
ProfileFragment profile = new ProfileFragment();
profile.setUser(AppController.getInstance().getLoggedInUser());
changeFragment(profile);
}
}
And the custom actionBar
private void showActionBar() {
mActionBar = getSupportActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
ColorDrawable colorDrawable = new ColorDrawable(Color.parseColor("#ffffff"));
mActionBar.setBackgroundDrawable(colorDrawable);
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
mLogo = (ImageView) mCustomView.findViewById(R.id.logo);
ImageButton menuButton = (ImageButton) mCustomView
.findViewById(R.id.menu);
menuButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (resideMenu.isOpened()) {
resideMenu.closeMenu();
} else {
resideMenu.openMenu();
}
}
});
ImageButton mapButton = (ImageButton) mCustomView
.findViewById(R.id.map);
mapButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Intent i = new Intent(getApplicationContext(), MapsActivity.class);
startActivity(i);
}
});
mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);
}
My theme:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorPrimaryDark">#android:color/black</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
My mainActivity layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:fitsSystemWindows="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/main_fragment">
</FrameLayout>
</LinearLayout>
</FrameLayout>
</FrameLayout>
My custom actionBar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="7dp"
android:fontFamily="sans-serif-light"
android:text="#string/app_title"
android:textSize="#dimen/textsize_large"
android:textColor="#android:color/black"
android:layout_gravity="center"
android:visibility="gone"/>
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="7dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:background="#color/transparent" />
<ImageButton android:src="#drawable/earth"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="20dp"
android:scaleType="centerInside"
android:id="#+id/map"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="-15dp"
android:tint="#color/black"/>
<ImageButton android:src="#drawable/titlebar_menu_selector"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:id="#+id/menu"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="-15dp"
android:layout_gravity="left|center_vertical"
android:tint="#color/black"/>
</FrameLayout>
</RelativeLayout>
Any help would be great, I've been fighting with it for days now and I really don't know what to do...
If you have created Bottom Navigation Activity and you don't want the hidden ActionBar's blank gap, Check the Host activities layout XML file,
delete the line mentioned below
android:paddingTop="?attr/actionBarSize"
replace
mActionBar.hide();
with
mActionBar.setVisibility(View.GONE);
You need to add Toolbar to your Activity layout. Find the code snippet below for simple Toolbar Layout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#2196F3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
Apply the theme to Activity. Here in this step you need to apply the theme which we have created in step-1 to your activity. This can be done, by using android:theme attribute in your application AndroidManifest.xml.
<activity
android:name="com.javatechig.sample.MyActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
</activity>
Now you are almost ready. You just need to instantiate the Toolbar and add it to your activity by using setSupportActionBar(Toolbar) method.
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
public class MyActivity extends ActionBarActivity{
#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);
}
}
Visit the below link to know more..
Using Toolbar as ActionBar
Put this line on your toolbar help me clear the gap, don't know will it works on other components like ur Relative layout. Hope helpful :)
android:fitsSystemWindows="true"
like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true" //add this line
android:background="#color/transparent">
I want to change the app I have created so far, in order to implement a ListView. I followed this example and this example. The examples alone work, but not together with the changes I had to make to my so-far existing app.
I have a avticity_main.xml defined as follows:
<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=".MainActivity" >
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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.support.design.widget.AppBarLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_grid"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:columnCount="4"
>
<TextView
android:text="MainTitle"
android:textSize="32dip"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
and I have the following code for my main activity:
public class MainActivity extends AppCompatActivity {
static final String[] MOBILE_OS =
new String[] { "Android", "iOS", "WindowsMobile", "Blackberry"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ListView list = (ListView) findViewById(R.id.list);
list.setAdapter(new ListAdapter(this, MOBILE_OS));
The code compiles fine, but no list is shown.
ListActivity is a "convenience" class to implement a simple ListView. And that's pretty much all you can do. So, there's no setSupportActionBar(Toolbar) there.
To achieve what you want, use AppCompatActivity or default Activity.
This link provides a nice tutorial on how to use the new ToolBar instead of the old ActionBar.
You want something like this:
This layout example could be used:
P.S.: "#color/primary" could be any color like #FF009688.
activity_main.xml
<?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">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="#color/primary"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:id="#+id/lv"></ListView>
</RelativeLayout>
And on the Java side:
YourActivity.java
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private ListView lv;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
lv = (ListView) findViewById(R.id.lv);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(true);
}
// Populate the ListView here...
}
}
EDIT: This other answer of mine can show you how to create a Custom Adapter to display the data you want on the ListView.
Second edit: Use this 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"
android:fitsSystemWindows="true"
tools:context=".MainActivity" >
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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.support.design.widget.AppBarLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_grid"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:columnCount="4"
android:orientation="vertical">
<TextView
android:text="MainTitle"
android:textSize="32dip"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
What did I do?
Your LinearLayout was lacking the orientation parameter on the XML, and your TextView had a android:layout_height set to match_parent, so it was filling the entire layout. I've changed it to wrap_content and you're good to go.
setSupportActionBar(toolbar) is not available in ListActivity. You can use AppCompatActivity instead and just get a reference to the listview:
ListView list = findViewById(R.id.list); and use list.setAdapter(adapter) instead of setListAdapter(adapter);
You can't do that in ListActivity.
If you want to access getSupportActionBar(), you need to extent your class by AppCompatActivity.
My Suggestion : Don`t use ListActivty is you want to use ToolBar. Create an Activity and then only have ListView within that Activity. It'll work just fine.
OR
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.your_toolbar_menu);
}`
You can use the new AppCompatDelegate component provided by the Support Library to easily add a Toolbar to your ListActivity.
Follow this link,
How to add Toolbar to an Activity which doesn't extend AppCompatActivity
I want to create a toolbar like the following image as proposed in the material design guidelines:
I can achieve this via using the toolbar with an relative layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Toolbar/>
<LinearLayout android:layout_marginTop="-17dp" />
</RelativeLayout>
I am not sure this is the correct way or not. Any help is appreciated.
Thanks Gabriele for all the help. Here is working code:
Activity :
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mai);
Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
if (toolbar != null) {
// inflate your menu
toolbar.inflateMenu(R.menu.main);
toolbar.setTitle("Card Toolbar");
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
if (maintoolbar != null) {
// inflate your menu
maintoolbar.inflateMenu(R.menu.main);
maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
}
}
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" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#android:color/holo_orange_dark"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_main"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
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/card_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size"
android:background="#android:color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
Make sure your activity theme is extending Theme.AppCompat.Light.NoActionBar.
Here is what it will look like:
Few things to note:
If you are using card elevation then you need to alter the margin top so that your card aligns with the main toolbar.
I am still seeing 1-2 pixel margin between bottom of main toolbar and card toolbar. Not sure about what to do in this case. For now, I am aligning it manually.
You can obtain it using a Toolbar as ActionBar, a CardView and another Toolbar(standalone) inside the Card.
For the Toolbar standalone inside a Card you can use something like this:
<android.support.v7.widget.CardView>
<LinearLayout>
<Toolbar android:id="#+id/card_toolbar" />
//......
</LinearLayout>
</CardView>
Then you can inflate your menu to obtain the icon actions.
Toolbar toolbar = (Toolbar) mActivity.findViewById(R.id.card_toolbar);
if (toolbar != null) {
//inflate your menu
toolbar.inflateMenu(R.menu.card_toolbar);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
//.....
}
});
}
For the toolbar used as action bar and the main layout you can use:
option1:
<RelativeLayout>
<toolbar/> //Main toolbar
<View
android:background="#color/primary_color"
android:layout_height="#dimen/subtoolbar_height"/>
<CardView /> //described above
</RelativeLayout>
Option2: An extended toolbar (as actionbar) and a CardView as described above playing with margins.
I want to create a toolbar like the following image as proposed in the material design guidelines:
I can achieve this via using the toolbar with an relative layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Toolbar/>
<LinearLayout android:layout_marginTop="-17dp" />
</RelativeLayout>
I am not sure this is the correct way or not. Any help is appreciated.
Thanks Gabriele for all the help. Here is working code:
Activity :
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mai);
Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
if (toolbar != null) {
// inflate your menu
toolbar.inflateMenu(R.menu.main);
toolbar.setTitle("Card Toolbar");
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
if (maintoolbar != null) {
// inflate your menu
maintoolbar.inflateMenu(R.menu.main);
maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
}
}
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" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#android:color/holo_orange_dark"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_main"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
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/card_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size"
android:background="#android:color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
Make sure your activity theme is extending Theme.AppCompat.Light.NoActionBar.
Here is what it will look like:
Few things to note:
If you are using card elevation then you need to alter the margin top so that your card aligns with the main toolbar.
I am still seeing 1-2 pixel margin between bottom of main toolbar and card toolbar. Not sure about what to do in this case. For now, I am aligning it manually.
You can obtain it using a Toolbar as ActionBar, a CardView and another Toolbar(standalone) inside the Card.
For the Toolbar standalone inside a Card you can use something like this:
<android.support.v7.widget.CardView>
<LinearLayout>
<Toolbar android:id="#+id/card_toolbar" />
//......
</LinearLayout>
</CardView>
Then you can inflate your menu to obtain the icon actions.
Toolbar toolbar = (Toolbar) mActivity.findViewById(R.id.card_toolbar);
if (toolbar != null) {
//inflate your menu
toolbar.inflateMenu(R.menu.card_toolbar);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
//.....
}
});
}
For the toolbar used as action bar and the main layout you can use:
option1:
<RelativeLayout>
<toolbar/> //Main toolbar
<View
android:background="#color/primary_color"
android:layout_height="#dimen/subtoolbar_height"/>
<CardView /> //described above
</RelativeLayout>
Option2: An extended toolbar (as actionbar) and a CardView as described above playing with margins.