CardView toolbars - android

I have a RecyclerView that contains CardViews.
I would like to add a Toolbar to each of those CardViews that would look and behave like the main Toolbar:
[Icon] [Title] .......... [Button] [Button] [Menu]
I've seen from here (http://blog.grafixartist.com/create-a-card-toolbar/) that it is possible to set an actual android.support.v7.widget.Toolbar object inside a CardView. But it relies on setSupportActionBar(...) to inflate the menu and respond to actions.
Do you think it's possible to reproduce that behaviour in each of my CardViews?

You don't need setSupportActionBar for your cardviews with toolbars until you would need to set some ActionBar specific actions up/back navigation actions.
Take a look at this fine example (link to whole page below):
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);
toolbar.setTitle("Card Toolbar");
if (toolbar != null) {
// inflate your menu
toolbar.inflateMenu(R.menu.main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
if (toolbar != 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 altar 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.
From: How to create a card toolbar using appcompat v7
Notice that author of this post hadn't used it at all, so I'm pretty sure you would also don't need that for implementation your idea
Hope it help

Sure. setSupportActionBar is used to set target for setTitle, menu inflation and up/back action. You can use Toolbar anywhere you want without using setSupportActionBar. It will behave like a ViewGroup.

Previous answers are correct but I would like to mention they there are times where the menu items become duplicate. In order to get around this, you need to clear the toolbar's menu for each CardView by invoking toolBar.getMenu().clear();

Related

Settings Activity being overlapped by Action Bar

I am working on Android project and I've created a new Settings Activity from Android. When I created the activity, and tried running, it the Settings Activity that Android Studio created, didn't include an action bar for some reason. I googled around and found that it seems to be a common thing and add the action bar manually, so I've done the following:
private void setupActionBar()
{
getLayoutInflater().inflate(R.layout.toolbar, (ViewGroup)findViewById(android.R.id.content));
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null)
{
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I found that the first preference header is hidden under the action bar, again Googled around, found you need to add padding to the list view which I did using the following in the onCreate()
getListView().setPadding(0, 180, 0, 0);
Doing the above seems a little odd, and it only works on the initial settings activity screen with the list of preference headers. Once you click on the preference headers to view the settings, the first setting is hidden under the action bar as shown in the screenshot below:
I think I figured it out.
I created a toolbar XML as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/settings_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then in the SettingsActivity in the setupActionBar method as below:
private void setupActionBar()
{
ViewGroup rootView = (ViewGroup)findViewById(R.id.action_bar_root);
View view = getLayoutInflater().inflate(R.layout.settings_toolbar, rootView, false);
rootView.addView(view, 0);
Toolbar toolbar = (Toolbar)findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I suggest to remove your Action Bar and make a custom toolbar which will be described by other layout file and will contain a widget that cancels your current activity.
For example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relLayout1">
<include layout="#layout/snippet_comments_toolbar"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relLayout2"
android:layout_below="#+id/relLayout1"
android:layout_marginBottom="60dp">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView"></ListView>
</RelativeLayout>
and then snippet_comments_toolbar which is that toolbar I am talking about:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/white_grey_border_bottom"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profileToolBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="20dp"
android:layout_centerVertical="true"
android:id="#+id/backArrow"
android:src="#drawable/ic_backarrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:layout_toRightOf="#+id/backArrow"
android:layout_marginRight="15dp"
android:textSize="20sp"
android:textColor="#color/black"
android:layout_centerVertical="true"
android:id="#+id/tvNext"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</merge>

Toolbar becomes empty on Oreo devices, but same code works on Nougat and lower versions

I am facing an issue on Oreo OS for an existing application. The toolbar becomes empty for same code on Oreo whereas it works on Nougat and lower versions.
The following images show the state when the app is launched. We can see that the toolbar is visible and has the required text.
Marshmallow First Launch
Oreo First Launch
Whereas when we try to change the fragment by some button click or navigation drawer, we see that the toolbar data is empty and the hamburger icon is missing.
Marshmallow Fragment Change
Oreo Fragment Change
I am sure this code is not a good way of writing code and uses a lot of incorrect code or issues with work. But this code has been passed through hands of multiple teams and hence the bad quality. We are trying to improve the code.
Please find the code attached below for reference.
Toolbar Layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
tools:ignore="MissingPrefix">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<LinearLayout
android:id="#+id/toolBar_leftIconsLinearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="9dp"
android:layout_marginRight="7dp"
android:orientation="horizontal">
</LinearLayout>
<TextView
android:id="#+id/toolBar_titleTextView"
fontPath="fonts/Roboto-Medium.ttf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/toolBar_leftIconsLinearLayout"
android:layout_toRightOf="#+id/toolBar_leftIconsLinearLayout"
android:text="#string/app_name"
android:textColor="#color/black"
android:textSize="20sp"
android:visibility="gone" />
<LinearLayout
android:id="#+id/toolBar_rightIconsLinearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="7dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
Base Activity:
public void setupActionBar(boolean backEnabled, String title) {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
if (backEnabled) {
addLeftIcon(R.drawable.back, new View.OnClickListener() {
#Override
public void onClick(View v) {
onHomePressed();
}
});
}
if (title != null && !title.isEmpty()) {
changeToolbarText(title);
}
setSupportActionBar(toolbar);
}
}
Main Activity does not have any action bar or toolbar code. The fragments include the layout for it.
The onActivityCreated method in the Fragment has the following code for setting up the Action Bar.
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
((BaseActivity) getActivity()).setupActionBar(false, getString(R.string.myOrdersFragment_toolbarTitle));
((BaseActivity) getActivity()).addLeftIcon(R.drawable.menu, mLeftToolbarIconListener);
((MainActivity) getActivity()).enableSwipeToRefresh(true);
}
Please let me know what am I missing here. My assumption here is that maybe Android has upgraded some stuff with Fragments which might not support Toolbar change or Support Action Bar is changed; maybe the setSupportActionBar(toolbar); won't work if the action bar is already set.

Fab to search bar

I am looking to make a floating action button for my android app that turns into search bar when clicked.
I've seen them turn into actionbar toolbar ,but I want to use it for searching. Any help on making this happen would be appreciated.
Thanks!
You can do this in 3 steps.
Floating Action Button, which you can use Google Support Library, which I have explained here.
On click of floating action button, you need to show toolbar,
For that your main page should have FAB as well as toolbar, like the following:
<LinearLayout android:id="#+id/mainView"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/app_bar"/>
<View android:id="#+id/stripBelowToolbar"
android:layout_height="0dp"
android:layout_width="fill_parent"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
style="#style/fab_style"
android:id="#+id/fabBtn"
android:layout_gravity="bottom|right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
fab:backgroundTint="#color/sap_uex_dark_yellow"
fab:rippleColor="#color/white"/>
code behind files should have
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setvisibility(View.VISIBLE)// show the searchbox and bla bla...
}
});
You need to animate the hiding of floating action button, which can be achieved like this.

Android clickable transparent toolbar

I have added a transparent toolbar in an activity, which is working fine. The problem is that I want to click on an element which is under the toolbar. Although the element is visible (as the toolbar is transparent) I cannot click on that element because the event is being captured by the toolbar.
How can I solve that behaviour?
The xml code I have is:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/Theme.Transparent"
android:layout_height="#dimen/topbar"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true" />
</RelativeLayout>
As I said, it's showing the toolbar transparent over the fragment, but I cannot click on the element which is under the toolbar.
Thanks in advance!
You can either add android:clickable="false" to not capture clicks on the toolbar or use a custom OnTouchListener.
I answer my own question. I have created a custom Toolbar view that extends the Toolbar, and which overrides the onTouchEvent method as:
#Override
public boolean onTouchEvent(MotionEvent ev) {
return false;
}
Now it's working fine.

Custom Action Bar in Android does not match parent

Hello everyone I'm try to make custom action bar. My codes below. Everything is good at the right side of Action Bar but at the left side custom action bar does not match. How can I solve this problem.
Thanks in helpings.
EDIT 1 :
My main activity xml, it has not got anything interest with action bar but I could not figure out where the problem is
activity_main.xml
<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="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="#+id/hh">
</RelativeLayout>
Here is my custom action bar xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:background="#ffff2301" />
</RelativeLayout>
My Java Code;
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setCustomView(R.layout.action_bar);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
}
You are using setCustomView() on the default toolbar provided by the theme. Custom views are meant to be loaded in the toolbar space that is not occupied by other views (logo, title, overflow menu..).
So your custom layout becomes part of the toolbar, and does not replace it. So either:
You want things to be this way. In this case your issue is just background color. I don't know how you set the custom view to be yellow, but try adding android:background="#color/transparent" to the RelativeLayout and switch the whole toolbar color to yellow instead. The room in the left will be eventually loaded with navigation icons, so you want it to be there.
You want to (I'd suggest to) use the Toolbar API which makes it easier to add custom views. This is done this way:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/custom_toolbar"/>
<RelativeLayout android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
</LinearLayout>
And then, in custom_toolbar.xml,
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:abc="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
<!-- you can add any custom view here -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:background="#ffff2301" />
</android.support.v7.widget.Toolbar>
In your onCreate() you now have to call:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
}
}

Categories

Resources