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.
Related
I am using bottom TabLayout with ViewPager above the tabs, XML listed below:
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar_wrapper"
layout="#layout/toolbar_main" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs_bottom_main"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_alignParentBottom="true"
app:tabGravity="fill" />
<View
android:id="#+id/view_black_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="#id/tabs_bottom_main"
android:background="#android:color/black" />
<NonSwipableViewPager
android:id="#+id/view_pager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/view_black_line"
android:layout_below="#id/toolbar_wrapper"
android:background="#android:color/white" />
</RelativeLayout>
When the keyboard shows up, the whole View pushed up, I would like to hide the bottom TabLayout only (but keep the ViewPager above) once the keyboard shows up. How to achieve it?
P.S.
I have tried listening the keyboard show up event and set TabLayout visibility with mBottomTabLayout.setVisibility(isOpen ? View.GONE : View.VISIBLE);
But this will hide the whole ViewPager together with the TabLayout.
Add this to your manifest under activity tag in which you want to hide the TabLayout:
android:windowSoftInputMode="adjustPan"
It works after I change RelativeLayout to LinearLayout according to #Rahul Sharma's advice.
Then I used the KeyboardVisibilityEvent library:
KeyboardVisibilityEvent.setEventListener(this,
new KeyboardVisibilityEventListener() {
#Override
public void onVisibilityChanged(boolean isOpen) {
mBottomTabLayout.setVisibility(isOpen ? View.GONE : View.VISIBLE);
}
});
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();
My drawerLayout is intercepting all touch events. I need help figuring out how to click on elements below it. Here is how my drawerLayout is set up
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
.... some code ...
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
I then reference this layout in another layout like this
<!-- elements inside of this relative layout
are unclickable because the drawer layout below
intercepts all clicks. If I place the drawer above
this view the drawer is beneath all the elements
in the relative layout, however, I am able to do
my clicks as expected. What I am doing incorrectly? -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- ... some code * the buttons here are what
I want to be clickable when drawer is closed.
I currently cannot reach them ... -->
</RelativeLayout>
<include layout="#layout/drawer" />
</FrameLayout>
I have added android:clickable="false" and android:focusable="false" in the xml on the drawer. Programmatically I logged the clicks, and it is the actual drawer with id "drawer_layout" intercepting all clicks. Making it unclickable does not work, it is still clickable. I also tried setting the visibility to INVISIBLE and GONE and these are not viable solutions either.
How can I make that drawerLayout allow clicks through it to elements beneath it? Thanks in advance!
By setting clickable and focusable to false, I think you are disabling click to the views in the layout too. Remove these options from the drawer layout.
Try setting android:clickable="true" and android:focusable="true" for the container inside the drawer layout.
I figured this out. I ended up adding my main layout to the drawer which is the reverse of what I was doing before because before I was adding the drawer to my main layout. So the change I made was
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="#layout/main_layout" />
</FrameLayout>
<RelativeLayout
.... some code ...
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
If anyone else runs into this problem it is view hierarchy conflict. You cannot have your drawer on top of elements that you want to interact it. If you have buttons or other widgets that you need to interact it you should include it to your drawer layout instead. I hope this helps someone else out there.
I have a material design navigation drawer i created from this tutorial.
It works perfect with toolbar and all. I can click on an item in the drawer and the respective fragment is displayed plus the title.
However i would like to make the toolbar on one fragment to be transparent so that the background image is displayed like in the image below:
PROBLEM: My problem is the fragment doesnt seem to start over the toolbar but below it.This is the result:
I dont know how to fix this.Any suggestions will be welcomed.
Use this for toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/toolbar_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
Of course, you'll need to change "#drawable/toolbar_image" to the drawable that you want to use for the background image.
I used the way https://stackoverflow.com/a/27051852/3875363 to achieve the drawer behind the status bar, it seems fine before only stay for one view.
But I faced a strange case after I hide and show this fragment, a white padding appears on the bottom of the drawerlayout, it likes below.
I comment most codes to show a simple example.
The layout of activity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
The layout of fragment with drawer
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/action_bar_in_list"
layout = "#layout/toolbar"/>
</RelativeLayout>
<com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/debug_content"
android:background="#color/setting_item_group_title_text"
app:insetForeground="#4000"
android:fitsSystemWindows="true"
android:layout_gravity="start"
android:layout_height="match_parent"
android:layout_width="#dimen/navigation_drawer_width">
</com.ghostflying.portalwaitinglist.ScrimInsetsFrameLayout>
</android.support.v4.widget.DrawerLayout>
The layout of the second fragment:
<FrameLayout 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">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment"/>
</FrameLayout>
Once I hide the drawer fragment, show the second fragment, then I popup the back stack to return. The drawer fragment will seem like the image, a padding with the height of status bar always appear. So strange.
Try to remove android:paddingBottom from DrawerLayout.
android:paddingTop makes Drawer doesn't cover the Status Bar, but there is no reason to duplicate padding at the bottom.
EDIT:
After your update, I analyzed it once more and I think your issue can be caused by your unusual design. All guides suggest that DrawerLayout should be root element of view hierarchy (as in your example you provided). See here: link
So I suggest one of these solutions.
Use separate Activities to display Views with and without Drawer. (I recommend this, especially when your Drawer plays navigational role.)
Use one Activity with Drawer Layout as root and put Fragments as Drawer's main content. If you don't want Drawer to be openable use this method after changing Fragment:
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
Try to remove the android attribute:
fitsSystemWindows = "true"
This worked for me.
According to the official documentation it's a
Boolean internal attribute to adjust view layout based on system
windows such as the status bar. If true, adjusts the padding of this
view to leave space for the system windows.