Using a custom template for actionbar menu item - android

I am trying to display a menu with text and icon always visible. I have defined my item layout as following
<?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="match_parent"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:drawableLeft="#drawable/ic_cart"
android:gravity="center"
android:orientation="vertical"
android:text="(0)"
android:drawablePadding="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textColor="#android:color/white" />
And the menu is defined as following
<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="com.taptoscan.taptoscan.MainActivity">
<item
android:id="#+id/action_sign"
android:title="(0)"
app:showAsAction="always|withText"
app:actionLayout="#layout/menu_sign" />
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
I'm having an issue with enabling the ripple effect on the background. It works but the ripple effect is not rounded, lik on a regular menu icon. It's square shaped and looks kinda ugly. What would be the best way to achieve the native ripple effect look on a custom menu item?
EDIT: This is what it looks like

NOTE: Better solution found, check the edit
I figured it out. First I created a background drawable with rounded corners, like this:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<corners android:radius="5dp" />
</shape>
</ripple>
After that, I set the TextView's background as the drawable from above. Ripple effect works as intended and it's all rounded like on default menu items.
EDIT
After further messing around with the custom menu item, I have found out that just by using a TextView without a root element will cause TextView's baseline to be changed after clicking on another menu item and then clicking back on the custom one. The solution is using the following layout
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/btn_actionbar_icon">
<TextView
android:id="#+id/icon_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_cart"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:padding="10dp"
android:text="(0)"
android:textColor="#android:color/white"
android:textSize="14sp" />
</RelativeLayout>

Related

how to show divider line in autocompleteTextview? [duplicate]

I've seen this question asked some other times on the site, but no one couldn't get any answer.
Is there any way to customize the appearance of the divider in the dropdown showing when using an AutocompleteTextview in android?
It's pretty easy for a ListView, but using only an ArrayAdapter for the autocompletetextview, is there any way to customize the divider.
(Not the textview, I already know doing that)
Im not sure how you can do it for single AutoCompleteTextView but I know how to set it for the whole application. This should also help you :)
<style name="MyTheme" parent="AppTheme">
<item name="android:dropDownListViewStyle">#style/MyListViewStyle</item>
</style>
<style name="MyListViewStyle" parent="#android:style/Widget.ListView">
<item name="android:divider">#F00</item>
<item name="android:dividerHeight">1px</item>
</style>
I didnt find any divider properties so I did this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView129"
android:textColor="#000000"
android:background="#color/white"
android:layout_marginBottom="1dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"/>
</LinearLayout>
So wat im doing is I have a background color for the Linear layout and another background color for the text View (textView's background color overlaps the linear layout's background color) now using the margin property and setting the bottom margin of textview to 1dp u'll get a clean line between elements....
I had faced same problem and try many ways but not achieve result, at last i got a quick and easy way to set divider and divider lenght with AutocompleteTextview. Basically we can set a border from bottom side with TextView of ArrayAdapter Layout. Like as
step1. Make a layout for arrayadapetr like as
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_single_line"
android:textColor="#drawable/text_color"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
style="?android:attr/dropDownItemStyle"
android:maxLines="1"
android:padding="3dp"
android:textSize="16sp" />
step2: in drawable folder create new layout its name background_single_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
Finally looks as divider .
The answer from Mark is normally the best solution. However different versions of the AppCompat library have different behavior, regarding how android:dropDownListViewStyle affects other menus, like the system overflow/options menu. For example, in AppCompat version 23.0.1, it will not affect this menu in the ActionBar/Toolbar; whereas version 23.2.1 it will affect it, as explained here.
If you want a style that is isolated to only affect the AutoCompleteTextView, it may not be possible. But an alternative way is to create the list divider image manually, as part of the layout of the dropdown list row:
res/layout/autocomplete_list_row.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"
tools:layout_height="50dip">
<TextView
android:id="#+id/text"
style="?android:attr/dropDownItemStyle"
android:textSize="18sp"
android:layout_width="fill_parent"
tools:text="An auto-complete list item"
android:minHeight="48dip"
android:layout_height="wrap_content"
android:ellipsize="marquee"/>
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#drawable/divider"/>
</LinearLayout>
res/drawable/divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#458c8c8c" />
</shape>
Then use this layout in your adapter for the AutoCompleteTextView:
ArrayAdapter<CharSequence> autoCompleteListAdapter =
new ArrayAdapter<>(context,
R.layout.autocomplete_list_row,
R.id.text, arrayList);
Similar approach using ConstraintLayout here.

Android Recycler View Ripple Effect not working

I am using the following xml drawable as the background of my recyclerview list item.
touch_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true"
android:drawable="#color/green_text_500"/>
<!-- Default, "just hangin' out" state. The base state also
implements the ripple effect. -->
<item android:drawable="#drawable/touch_selector_base" />
</selector>
touch_selector_base.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/light_grey">
<item android:id="#android:id/mask" android:drawable="#color/light_grey" />
<item android:drawable="#color/dark_grey"/>
</ripple>
In the list item I am using the touch_selector.xml as follows in my list_item_quote.xml
<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="86dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:clickable="true"
android:focusable="true"
android:background="#drawable/touch_selector"
>
// layout
</LinearLayout>
SIMILARLY I have another xml drawable touch_selector_dark.xml and touch_selector_base_dark.xml
In my recycler-view-adapter I alternate between these two drawables based on the index. For even indexes I use the darker drawable and for the odd index I use the lighter background to produce an alternating effect. But the issue is that the ripple effect is not working.
Here are the colors:
light_grey = #5b5b5b
dark_grey = #212121
green_text_500 = #37863a
use this line in your recycleview list layout
android:background="?android:attr/selectableItemBackground"
try this
worked for me
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
I think your ripple file is not valid, you can check this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/dark_grey"/>
</shape>
</item>
</selector>
You can use android:foreground="#drawable/touch_selector" to display the ripple effect and also use android:background="" to set any other drawable background.

How to set button background drawable image with ripple effect in android

My Xml code:
<Button
android:id="#+id/link_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/google_btn" />
I am applying Default ripple effect
<Button
android:id="#+id/link_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground" />
but I need button background "#drawable/google_btn" with
"?android:attr/selectableItemBackground". it's means i need ripple effect with custom background.
In your drawable-v21 folder you can write code for ripple effect by your own. Make a drawable xml file and set starting tag by ripple. Like this :
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#color/colorAccentDark">
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#color/button_accent_dark"
android:state_checked="false"/>
<item
android:drawable="#color/button_accent"
android:state_checked="true" />
<item
android:drawable="#color/button_accent_dark" />
</selector>
</item>
</ripple>
When the button has a background from the drawable, we can add ripple effect to the foreground parameter.. Check below code its working for my button with a different background
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="#drawable/shape_login_button"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:text="#string/action_button_login"
/>
Add below parameter for ripple effect
android:foreground="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:focusable="true"
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight" >
<item
android:id="#android:id/mask"
android:drawable="#drawable/btn_rectangle"/>
<item android:drawable="#drawable/btn_rect_states"/>
</ripple>
Try the above code here in drawables give your own custom drawable backgrounds as you need it.
Another option is to create a layer list drawable and set that as a background. For example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_background"/>
<item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

How to make a ripple effect over a linear layout, without overriding the background color on its children?

I have a LinearLayout that looks like this.
I want each row to be clickable. The LinearLayout code for a row looks like this:
<LinearLayout
style="#style/home_menu_item_container"
android:id="#+id/home_menu_acronyms_button"
>
<ImageView
style="#style/home_menu_item_left"
android:background="#color/greyLight"
/>
<TextView
style="#style/home_menu_item_right"
android:text="#string/home_menu_option_2"
android:background="#color/grey"
/>
</LinearLayout>
How can I add a ripple effect that expands over the entire row (parent) - not just one child view in the row? The tricky part here is to let the ripple go over the two colored row.
So far, I found out the easiest way to do so is define a <ripple> in your drawable and then set the background of the LinearLayout to this drawable resource.
Define your drawable-v21/item_selector.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/your_background_color">
<item android:id="#android:id/mask"
<!--color here doesn't matter-->
android:drawable="#android:color/white" />
</ripple>
Set the background of your LinearLayout to drawable/item_selector.
<LinearLayout
style="#style/home_menu_item_container"
android:background="#drawable/item_selector"
android:id="#+id/home_menu_acronyms_button" >
...
</LinearLayout>
Besides, if you don't have your own background color, then there is no need to define a item_selector at all. You can simply define background as android:background="?android:attr/selectableItemBackground" for your LinearLayout.
It is a little bit complicated for that what you need but I don't think there is another way,...
You need to put your ImageView's into a ListView so that every ImageView is a ListItem and then you can set the ripple but you also need to set drawSelectorOnTop="true" otherwise it won't work correctly
I too faced this problem, finally found a simple solution
In linear Layout just add android:clickable="true";
and set background with ur ripple effect as
android:background="#drawable/ripple_effect"
code:
<LinearLayout
android:clickable="true"
android:background="#drawable/ripple_effect"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add your child views here -->
</LinearLayout>
add ripple_effect.xml in drawable
ripple_effect.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f87d05c2"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f87d05c2" />
</shape>
</item>
</ripple>
<RelativeLayout
android:id="#+id/rll_privacy_policy"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?android:attr/selectableItemBackground"
android:orientation="vertical">
<TextView
android:id="#+id/txt_privacy_policy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/layout_margin_16"
android:text="#string/privacy_policy"
android:layout_centerVertical="true"
android:textColor="#color/link_acc"
android:textSize="#dimen/txt_title_20" />
</RelativeLayout>
Another option is to make the ripple's background color transparent. This way only the ripple can be seen. The ripple's xml file (in your drawable-v21/ folder) is thus:
<-- Ripple in some ghastly color, like bright red so you can see it -->
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/red"
>
<!-- background color uses a transparent mask set to full #ffffff (white) -->
<item
android:id="#android:id/mask"
android:drawable="#android:color/white"
/>
Note that if you are supporting pre-lollipop devices, you need to have a dummy file with the same name in your drawable/ folder. An empty selector is sufficient for that file. And remember that those older devices will not ripple.
answer above dont work for me,
here is my solution:
ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
>
...put het your design
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ripple" />
</FrameLayout>

Customize divider / separator in dropdown of an AutocompleteTextview

I've seen this question asked some other times on the site, but no one couldn't get any answer.
Is there any way to customize the appearance of the divider in the dropdown showing when using an AutocompleteTextview in android?
It's pretty easy for a ListView, but using only an ArrayAdapter for the autocompletetextview, is there any way to customize the divider.
(Not the textview, I already know doing that)
Im not sure how you can do it for single AutoCompleteTextView but I know how to set it for the whole application. This should also help you :)
<style name="MyTheme" parent="AppTheme">
<item name="android:dropDownListViewStyle">#style/MyListViewStyle</item>
</style>
<style name="MyListViewStyle" parent="#android:style/Widget.ListView">
<item name="android:divider">#F00</item>
<item name="android:dividerHeight">1px</item>
</style>
I didnt find any divider properties so I did this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView129"
android:textColor="#000000"
android:background="#color/white"
android:layout_marginBottom="1dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"/>
</LinearLayout>
So wat im doing is I have a background color for the Linear layout and another background color for the text View (textView's background color overlaps the linear layout's background color) now using the margin property and setting the bottom margin of textview to 1dp u'll get a clean line between elements....
I had faced same problem and try many ways but not achieve result, at last i got a quick and easy way to set divider and divider lenght with AutocompleteTextview. Basically we can set a border from bottom side with TextView of ArrayAdapter Layout. Like as
step1. Make a layout for arrayadapetr like as
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/testt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_single_line"
android:textColor="#drawable/text_color"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
style="?android:attr/dropDownItemStyle"
android:maxLines="1"
android:padding="3dp"
android:textSize="16sp" />
step2: in drawable folder create new layout its name background_single_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
Finally looks as divider .
The answer from Mark is normally the best solution. However different versions of the AppCompat library have different behavior, regarding how android:dropDownListViewStyle affects other menus, like the system overflow/options menu. For example, in AppCompat version 23.0.1, it will not affect this menu in the ActionBar/Toolbar; whereas version 23.2.1 it will affect it, as explained here.
If you want a style that is isolated to only affect the AutoCompleteTextView, it may not be possible. But an alternative way is to create the list divider image manually, as part of the layout of the dropdown list row:
res/layout/autocomplete_list_row.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"
tools:layout_height="50dip">
<TextView
android:id="#+id/text"
style="?android:attr/dropDownItemStyle"
android:textSize="18sp"
android:layout_width="fill_parent"
tools:text="An auto-complete list item"
android:minHeight="48dip"
android:layout_height="wrap_content"
android:ellipsize="marquee"/>
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#drawable/divider"/>
</LinearLayout>
res/drawable/divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#458c8c8c" />
</shape>
Then use this layout in your adapter for the AutoCompleteTextView:
ArrayAdapter<CharSequence> autoCompleteListAdapter =
new ArrayAdapter<>(context,
R.layout.autocomplete_list_row,
R.id.text, arrayList);
Similar approach using ConstraintLayout here.

Categories

Resources