CODEWITHSUNDEEP
androidandroid-styles
Sanjana Nair
Sanjana Nair

Reputation: 2785

Ripple effect on toolbar which has action menu in android

I am not sure If this is happening only for me or even for others, here is what is happening:

I have set menu.xml which four icons

<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.ylg.default.Home">

    <item
        android:id="@+id/action_key"
        android:icon="@drawable/key"
        android:orderInCategory="9999999"
        android:title="@string/lock"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_alert"
        android:icon="@drawable/bell"
        android:orderInCategory="9999999"
        android:title="@string/alert_action"
        app:showAsAction="always" />


    <item
        android:id="@+id/action_home"
        android:icon="@drawable/home_tool"
        android:orderInCategory="9999999"
        android:title="@string/office"
        app:showAsAction="always" />


    <item
        android:id="@+id/action_logo"
        android:icon="@drawable/rupees"
        android:orderInCategory="9999999"
        android:title="@string/home"
        app:showAsAction="always" />
</menu>

The icons shows properly with ripple effect on my Nexus 5 but the problem is that the title gets cut hence I changed the padding values for icons (Right and left) in my style using:

<style name="Theme.default" parent="Theme.AppCompat.Light.NoActionBar">
 <item name="android:actionButtonStyle">@style/MyActionButtonStyle</item> 
</style>

<style name="MyActionButtonStyle" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:minWidth">40dp</item>
        <item name="android:paddingLeft">2dp</item>
        <item name="android:paddingRight">2dp</item>
    </style>

If I put this the menu icons reduces their spacing between each other but ripple effect is not seen when I touch the icons.

I am not sure why this happening? Anybody there who can help me with this?

Thanks!

Upvotes: 0

Views: 2971

Answers (1)

Yaroslav Mytkalyk
Yaroslav Mytkalyk

Reputation: 17115

The parent you've used for MyActionButtonStyle has no proper background. The parent should be Widget.AppCompat.Light.ActionButton. 

<style name="MyActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">

But anyway that's not a good idea reducing the space between the menu items. Instead, use

app:showAsAction="ifRoom"

So items that do not fit will be put into overflow. This is necessary because there is always a smaller dp screen that Nexus 5 resulting in title being cut even more. The lint should have warned you about this.

Upvotes: 1

Related Questions