Touch feedback on menu item with actionLayout - android

I'm using a menu item with actionLayout because I need to add a textView along with my icon for the item on the ActionBar. everything shows up correctly but I don't know (and couldn't find anywhere) how to add the animation that shows up when user taps on a menu item on Lollipop devices.
I would like to show number of comments on the side of comment icon in my toolbar.
Here is what I have:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_like"
android:icon="#drawable/list_discuss_like"
android:title="Like"
app:showAsAction="always"/>
<item
android:id="#+id/menu_comment"
app:actionLayout="#layout/menu_item_comment"
android:title="Comment"
android:icon="#drawable/ic_comment_white_24dp"
app:showAsAction="always"/>
</menu>
and for my menu_item_comment.xml
<?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:clickable="true"
android:hapticFeedbackEnabled="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/ic_comment_white_24dp"/>
<TextView
android:id="#+id/ab_comment_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="(12)"
android:textColor="#color/grayTextHint"/>
</LinearLayout>
The animation and feedback works on the like item but not on the comment one.
Any help is appreciated.

Set the clickable element's background to the theme's action bar item background.
<LinearLayout
...
android:clickable="true"
android:background="?android:attr/actionBarItemBackground">
...
</LinearLayout>

Related

Android: How to create EditText field at the bottom of PopupMenu?

I have a PopupMenu view in my code and I want an EditText view to be one of it's options so a user can create a new file from the same menu where they select existing files. According to this post : Android : Display an EditText in a menu
it is not possible to use an EditText view as a PopupMenu item.
My question is, is there a workaround to not being able to declare an EditText as a menu item? Perhaps, creating a ListView and declaring the Popupmenu and EditText views as children?
Below is code I tried but produced, as predicted, a Popupmenu with no visible EditText Field.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend" />
</menu>
The code I'm suggesting would look something like this:
<?xml version="1.0" encoding="utf-8"?>
<ListView
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
</menu>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend" />
</ListView>
What would be the best way to accomplish this?
I think you need to create RelativeLayout and then set where each element need to go in queue.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<item android:id="#+id/new_track"
android:title="+ create new track"/>
<RelativeLayout>
<EditText
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/search_hint"
android:inputType="textCapWords"
android:imeOptions="actionSend"
android:layout_alignParentBottom="true"/> //this line put edittext at bottom
</RelativeLayout>
</menu>
EDIT: After many searches of this specific problem I can only say: no, you can't do that. You can only create a menu item which would call a specific fragment or it would change your toolbar to SearchView (like hide TextView, show EditText and Buttons).
For the first option take a look at: Search item on action bar android
For the second option: http://blog.rhesoft.com/2015/03/30/tutorial-android-actionbar-with-material-design-and-search-field/

Break line after Icon in Menu Item Android

Simple question that I don't find an answer for.
Is it possible to break line after the icon in a menu item making them not inline anymore? (The menu slides in from left by using NavigationView in Android support library)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/card_icon"
android:title="Cards" />
...
...
...
</group>
This is how I want it to look like.
But instead they are aligned inline.
Update after answer:
Using a modified android.R.layout.activity_list_item (changed to vertical aligned left):
<?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="wrap_content"
android:paddingTop="1dip"
android:paddingBottom="1dip"
android:paddingStart="8dip"
android:paddingEnd="8dip"
android:orientation="vertical">
<TextView android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_horizontal"
android:paddingStart="?android:attr/listPreferredItemPaddingStart" />
<ImageView android:id="#+id/icon"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_gravity="left" />
</LinearLayout>
And I added an actionLayout to the menu items:
<item
android:id="#+id/cards"
android:checked="false"
android:icon="#drawable/cards_icon"
android:actionLayout="#layout/vertical_menu_item"
android:title="Cards" />
But nothing happens. They are still inline. I also tried using app:showAsAction="always" and app:actionLayout="#layout/vertical_menu_item".
I suggest you to create a custom view (eg: vertical layout with ImageView and TextView), and in onCreateOptionsMenu() you can use setActionView() method of the MenuItem to use this custom view as Item view.
Or from menu xml:
android:actionLayout="#[package:]layout/layout_resource_name"

Selector for layout inside DrawerLayout doesn't work

I have a view aligned to the bottom of a navigation drawer that is not in list.
activity_main.xml
<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/readscreen_bg">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/loading_layout"
android:visibility="invisible">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_centerInParent="true" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="#+id/navigation_drawer_content"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:background="#color/navdrw_bg"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_gravity="start" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/navigation_support_item_height"
android:id="#+id/support_project"
android:focusableInTouchMode="true"
android:clickable="true"
android:focusable="true"
android:background="#drawable/support_project_selector"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="#dimen/navigation_item_icon_size"
android:layout_height="#dimen/navigation_item_icon_size"
android:id="#+id/navigation_icon"
android:layout_marginLeft="#dimen/navigation_item_icon_left_margin"
android:layout_marginRight="#dimen/navigation_item_icon_right_margin"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_support"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/navdrw_bg"
android:text="#string/navigation_support_project"
android:textSize="#dimen/navigation_item_text_size"
android:id="#+id/navigation_name"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/navigation_icon"/>
</RelativeLayout>
<ListView android:id="#+id/left_drawer"
android:layout_width="#dimen/navigation_width"
android:layout_height="match_parent"
android:layout_above="#+id/support_project"
android:layout_gravity="left"
android:dividerHeight="0dp"
android:divider="#null"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
It is, with id support_project. The problem is selector for this layout doesn't work.
support_project_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="true"
android:state_selected="true"/>
<!-- Pressed -->
<item
android:drawable="#color/navdrw_support_block_bg_pressed"
android:state_focused="false"
android:state_selected="true"/>
<!-- When not selected -->
<item
android:drawable="#color/navdrw_support_block_bg"/>
</selector>
I was trying many variants and nothing helped. Selector does install color when view is not clicked but when it is clicked it doesn't change it's color.
But layout is clickable, I do receive click event and can process it. The problem is only with click/activate color.
Colors in selector for active and normal state are 100% completely different.
There are multiple aspects you are handling not so good, here.
First, your selector possible states:
You should have an item tag per state you want to customize and one different android:state value per item tag. So, remove your android:state_focused attributes from both states (selected and pressed).
On your pressed state, you are using android:state_selected="true" when you should be using android:state_pressed="true". This will make your selector work when the item is actually pressed, not only when it is selected.
Second, in order to affect the selector to your RelativeLayout, you have to set it clickable by adding android:clickable=true attribute in your xml layout. RelativeLayout is not clickable by default, unlike a Button, for example.
For last, add android:duplicateParentState="true" to your RelativeLayout children Views, ImageView and TextView. This attribute allows the children to have the same state as the parent. When your RelativeLayout is selected or pressed, that state will be replicated by its children.
And you are done. Your selector is working.

Create a custom background for list view item

I have ListView (a derived JazzyListView) that is here in the main layout of my activity :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/lib/com.toto.toto"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background" >
<com.twotoasters.jazzylistview.JazzyListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
app:effect="cards"
app:max_velocity="0"
app:only_animate_fling="false"
app:only_animate_new_items="false"
/>
</RelativeLayout>
The main layout sets a color background.
For my list, I use items with this layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#color/item_background" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp" />
...
</RelativeLayout>
Here #color/item_background has not the same value that #color/background.
So my main layout has a background color specific and list items also.
With that method, when I click on items in my list, there is no selected background state and there is no the classic background selected applied on my list.
Someone would know how I can create a custom selector (perhaps ?) or other thing to have a custom color for my items and also that when I click on item the classic selected background effect be applied ?
Thanks for your help.
Sylvain
You first need to create a custom selector that you will use as background for your list items, something similar to the below :
item_background_selectable.xml (to be created in a drawable folder)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:state_pressed="true"
android:drawable="#color/item_background_pressed" />
<item android:drawable="#android:color/item_background" />
</selector>
then use that custom selector in your list item layout :
android:background="#drawable/item_background_selectable"
Hope this helps ;-)

ActionBar Overflow Menu styling information for manual implementation

I'm trying to duplicate the Overflow Menu dropdown functionality for other ActionBar items. I'm working on a manual implementation of this functionality as I think it has been left out of the environment (likely to force standardisation of UI's). Does anybody know what style / style items are used for the drop down list when you click on the Overflow menu?
EDIT
The overflow button is actually a modified spinner. Here is the style information for it.
<style name="Widget.Holo.Spinner" parent="Widget.Spinner.DropDown">
<item name="android:background">#android:drawable/spinner_background_holo_dark</item>
<item name="android:dropDownSelector">#android:drawable/list_selector_holo_dark</item>
<item name="android:popupBackground">#android:drawable/menu_dropdown_panel_holo_dark</item>
<item name="android:dropDownVerticalOffset">0dip</item>
<item name="android:dropDownHorizontalOffset">0dip</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:popupPromptView">#android:layout/simple_dropdown_hint</item>
<item name="android:gravity">left|center_vertical</item>
</style>
Here is a roundup of what I've cobbled together:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dropdownContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/leftBuffer"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/actionbarDropdown"
style="#style/Widget.ActionBarDropDown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#android:color/transparent"
android:entries="#array/sortOptions" />
<LinearLayout
android:id="#+id/bottomBuffer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightBuffer"
android:layout_width="118px"
android:layout_height="match_parent" />
</LinearLayout>
Adding an onClick to an ActionBar item which: adds the above layout as a child to your Activities root ViewGroup gives you the illusion of a drop down.
Adding an onClick to each of the buffers which removes the view from the root ViewGroup allows the drop down to "exit" when you try and move focus.
The styling information for the drop down is:
<item name="android:background">#drawable/menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">#drawable/list_selector_background</item>
The layout for each list item is:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:textSize="17sp"
android:gravity="right|center_vertical"
style="?android:attr/dropDownItemStyle"
android:ellipsize="marquee"
android:id="#android:id/text1">
</TextView>
This doesn't give a perfect copy of the functionality of an overflow drop down but it's pretty darn close. I am very interested if anyone else knows a way to reproduce this functionality in a more integrated way!
I achive this by having a simple custom view that I put in the ActionBar:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_starred"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="?android:attr/actionButtonStyle"
android:src="#drawable/ic_action_star" />
I then attach a OnClickListener to it in onCreateOptionsMenu() which simply adds a Fragment which takes care of creating a ListPopupWindow and setting the anchor to be the action view. It finds the action view via getActivity().findViewById(R.id.action_starred).
That's simply it, you can set the popup to be modal to make it behave more like a menu. As list items you can use something like android.R.layout.simple_dropdown_item_1line.
This method should work equally well even if you don't put the view in the ActionBar as I do.

Categories

Resources