I have a photo preview activity that has an overlay actionbar. I don't want this view to have a full opaque color because it would obstruct the image when zoomed. I created a gradient to set as the background:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#color/theme_main_color_40pct"
android:endColor="#color/theme_main_color_0pct"
android:angle="270"/>
</shape>
I assign this background to my toolbar via the following theme:
<style name="my_toolbar" >
<item name="android:background">#drawable/ab_gradient_purple</item>
<item name="android:minHeight">?attr/actionBarSize</item>
<item name="android:textColorPrimary">?attr/colorAccent</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
In my layout:
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
app:theme="#style/my_toolbar"
android:elevation="5dp"
android:layout_gravity="top"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
When I open this activity, it looks like the toolbar is taking that background and applies it to all subviews, resulting in the picture below. How do I prevent this overlay?
I've tried playing with backgroundTint and backgroundTintMode, but it seems like they're not available for pre-lollipop.
It seems that applying the background through the style applies it too all nested items. I set the style background to #android:color/transparent and in my layout:
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
app:theme="#style/my_toolbar"
android:background="#drawable/ab_gradient_purple"
android:elevation="5dp"
android:layout_gravity="top"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
The result is exactly what I was looking for:
Related
I've this issue, I don't know where it come from, I've created this buttons with custom background, but the background color talking the primary color and cannot change it unless change the primary color.
<Button
android:id="#+id/btn_teacher"
style="#style/normalText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_16sdp"
android:background="#drawable/btn_rounded_stroke"
android:text="#string/txt_teacher" />
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="bg_color">#FFD7A4</color>
</resources>
I have many buttons with different colors, so i can't change the primary color
here is my drawable background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<size android:height="#dimen/_48sdp" />
<corners android:radius="#dimen/_24sdp" />
<stroke android:width="#dimen/_1sdp" android:color="#59CECE" />
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
I'm using new material design by google
implementation "com.google.android.material:material:1.3.0-alpha02"
How can i override this color?
Since you are using a Theme.MaterialComponents.* your Button is replaced at runtime by a MaterialButton.
Currently the backgroundTint is still the default MaterialButton style.
It means that if you are using a custom android:background, you have to make sure to null out backgroundTint to avoid that the custom background doesn't get tinted with the attr/colorPrimary defined in your theme.
You have to add app:backgroundTint="#null":
<Button
app:backgroundTint="#null"
android:background="#drawable/.."
In any case you don't need a custom background (btn_rounded_stroke) in your case. You are just using a custom background only to define rounded corners. This feature is provided by default by the MaterialButton, then just use the cornerRadius attribute.
Use the standard MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#59CECE"
app:cornerRadius="24dp"
When Material theme is used then Button view is mapped to MaterialButtton.
There is one more way to setup the button background in this case.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"
...
<item name="materialButtonStyle">#style/ColoredButton</item>
</style>
<style name="ColoredButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">#color/customButtonColor</item>
</style>
What worked for me
First create btn_style in your styles.xml or themes.xml
<style name="btn_style" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#null</item>
</style>
then in you layout apply the style and use the color or drawable that you want
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:background="#color/Red"
style="#style/btn_style"
android:text="Button"/>
Try this .
Your Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_margin="5dp"
android:background="#drawable/round_btn"
android:padding="20dp"
android:text="My Text" />
Here is your round_btn drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:radius="20dp" />
</shape>
In your Gradle just replace this line
implementation "com.google.android.material:material:1.3.0-alpha02"
with this
implementation 'com.google.android.material:material:1.2.1'
All you need to do is simply go to your themes.xml file and change the style name to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.Light.NoActionBar"
in Light theme mode and to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.DayNight.NoActionBar"
in Dark theme mode in your theme.xml(night) file and then you can customize your button and change its colour.
UPDATE:
The other question uses a white background and since it uses white background there is no ripple on the BottomNavigationBar (because the ripple itself is white). But in my case the ButtomNavigationBar is blue, and it reflects the ripple. In fact all of the colors except the white(that the other question uses) reflect the incomplete ripple.
ORIGINAL:
I am using ButtomNavigationView, and the problem is that it doesn't show ripple effect in the background of it's Items.
Or it doesn't care about app:itemBackground it just uses android:background value without any ripple effect.
I've tried using a ripple instead of selector in drawable-21 and changing the app:itemBackground color values but it is not working.
ButtomNavigationView:
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="56dp"
android:theme="#style/BottomNavigationStyle"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
ButtomNavigationStyle:
<style name="BottomNavigationStyle">
<item name="itemBackground">#drawable/navigation_bar_item_bg</item>
<item name="itemIconTint">?attr/bottom_nav_colors</item>
<item name="itemTextColor">?attr/bottom_nav_colors</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="android:fontFamily">#font/iransans_mobile</item>
</style>
bottom_nav_menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_mylibrary"
android:icon="#drawable/ic_library_books_black_24dp"
android:title="#string/title_mylibrary" />
<item
android:id="#+id/navigation_search"
android:icon="#drawable/ic_search_black_24dp"
android:title="#string/title_search" />
.
.
.
</menu>
navigation_bar_item_bg:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/black_color"
android:state_checked="true"/>
<item android:drawable="#drawable/black_color"/>
</selector>
ScreenShot:
https://firebasestorage.googleapis.com/v0/b/library-1696f.appspot.com/o/Screenshot%20from%202019-06-17%2005-39-23.png?alt=media&token=20efbe56-3234-47ab-b6cc-898124b77762
I've searched and I've found that it is a library bug that is not fixed yet.
But I've found a solution for this.
1) Since the android:background and android:itemBackground don't work correctly delete both of them from BottomNavigationView.
2) Create a new FrameLayout and put your BottomNavigationView inside FrameLayout.
3) change these properties of the FrameLayout:
android:layout_width="match_parent"
android:layout_height="wrap_content"
4)Finally Add your desired color for ButtomNavigationView into FrameLayout as android:background.
Example:
<FrameLayout
android:id="#+id/buttomnavigation_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"><!--Background color for BNV-->
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="56dp"
app:itemIconTint="#color/bottom_navigation_colors"
app:itemTextColor="#color/bottom_navigation_colors"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_nav_menu"/>
</FrameLayout>
bottom_navigation_colors.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:color="#FFFFFF" />
<item
android:state_checked="false"
android:color="#C7FFFFFF" />
</selector>
I defined a Gradient Drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:endColor="#2F3F59"
android:startColor="#4078A7"
android:type="linear"
android:angle="90" />
</shape>
And I set it on my Toolbar:
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
This is working! BUT:
This is what happens with the title. It gets the same gradient. This looks really ugly so I have to change this. How can I set the background of that info text to be transparent?
You can also solve this by setting the background of the toolbar to your drawable.
mToolbar().setDrawable(R.drawable.your_gradient)
link - Set transparent background of an imageview on Android
use this color in your color xml file and then give this color to your startcolor and end color
The solution is to disable the title of the toolbar:
this.getSupportActionBar().setDisplayShowTitleEnabled(false);
and to add a custom TextView:
<?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"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:text="Toolbar Title"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Changing the background color to transparent in the style section should fix the issue
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#00000000</item>
</style>
The question How to make title background transparent on android app had similar issue above solution did the trick. The android app was for Renesas RX130 and Texas Instrument CC2650 BLE solution. Bellow is solution after the fix.
How can I have a ripple effect in a simple linear/relative layout when touching the layout?
I've tried setting the background of a layout to something like:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight" >
<item android:drawable="#android:color/white"/>
</ripple>
However I'm only seeing a plain white background and no ripple effect when touching the layout. What am I doing wrong?
Edit:
For reference, here is my layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/test"
android:clickable="true">
</RelativeLayout>
Set these properties on your layout (if your layout has the default white/light background):
android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"
You don't need a custom drawable in this case.
However, if your layout has a black/dark background, you'd have to create your own ripple drawable like this one:
<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white">
<item
android:id="#android:id/mask"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
</ripple>
And then set this ripple drawable as your android:background property.
You can see many examples of these types of ripples in AOSP: in here
I'm adding this in addition to Igor Ganapolsky's answer in case anyone wants to have a layout with different color and also have a ripple effect. You simply create a ripple effect in drawables like this:
ripple.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="#color/rippleColor"
tools:targetApi="lollipop"> <!-- ripple effect color -->
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#color/backgroundColor" /> <!-- background color -->
</shape>
</item>
</ripple>
then give it as your layout's background or any button as Igor Ganapolsky mentioned in his answer.
android:clickable="true"
android:background="#drawable/ripple"
You have to alter following code snippet in any widget(TextView/Button) and you can implement Ripple Effect:
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
And you are good to go.
It turns out this is working as intended. The standard Material theme colorControlHighlight value is #40ffffff. So on a white background, this will not show up. Changing the highlight color to something else works, and/or changing the background color of the object.
Thanks all (especially Alanv for pointing me in the right direction).
This is an example for clicking on a sample layout with ripple effect :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
Set android:clickable="true" on your layout.
<?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="#cfd8dc"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#d1c4e9" />
</shape>
</item>
</ripple>
Use this ripple.xml in Drawable folder, then assign it as View's
android:background="#drawable/ripple"
android:clickable="true"
Simply add default ripple effect with android:background="?selectableItemBackground"
Like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="?selectableItemBackground"
android:clickable="true"
>
...
</LinearLayout>
Put this into your layout:
android:clickable="true"
android:background="?attr/selectableItemBackground"
Note: There is a bug in API documentation. It will work only on API >= 23
For all API levels use this Solution
I tries all those answers and nothing worked to me, so, I solved creating the following style:
<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
<item name="android:layout_marginLeft">-6dp</item>
<item name="android:layout_marginRight">-6dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
</style>
And then, I applied to my linear layout:
<LinearLayout
android:id="#+id/ll_my_ripple"
style="#style/Button.Borderless">
</LinearLayout>
To make a circlar effect use the below code:
android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"
I'm confused on button styles for material design. I'd like to get colorful raised buttons like in the attached link., like the "force stop" and "uninstall" buttons seen under the usage section. Are there available styles or do I need to define them?
http://www.google.com/design/spec/components/buttons.html#buttons-usage
I couldn't find the default button styles.
Example:
<Button style="#style/PrimaryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate"
android:id="#+id/button3"
android:layout_below="#+id/editText5"
android:layout_alignEnd="#+id/editText5"
android:enabled="true" />
If I try to change the background color of the button by adding
android:background="#color/primary"
all of the styles go away, such as the touch animation, shadow, rounded corner, etc.
I will add my answer since I don't use any of the other answers provided.
With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available:
style="#style/Widget.AppCompat.Button"
style="#style/Widget.AppCompat.Button.Colored"
style="#style/Widget.AppCompat.Button.Borderless"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
Widget.AppCompat.Button:
Widget.AppCompat.Button.Colored:
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored:
To answer the question, the style to use is therefore
<Button style="#style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>
How to change the color
For the whole app:
The color of all the UI controls (not only buttons, but also floating action buttons, checkboxes etc.) is managed by the attribute colorAccent as explained here.
You can modify this style and apply your own color in your theme definition:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorAccent">#color/Orange</item>
</style>
For a specific button:
If you need to change the style of a specific button, you can define a new style, inheriting one of the parent styles described above. In the example below I just changed the background and font colors:
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/Red</item>
<item name="android:textColor">#color/White</item>
</style>
Then you just need to apply this new style on the button with:
android:theme="#style/AppTheme.Button"
To set a default button design in a layout, add this line to the styles.xml theme:
<item name="buttonStyle">#style/btn</item>
where #style/btn is your button theme. This sets the button style for all the buttons in a layout with a specific theme
Simplest Solution
Step 1: Use the latest support library
compile 'com.android.support:appcompat-v7:25.2.0'
Step 2: Use AppCompatActivity as your parent Activity class
public class MainActivity extends AppCompatActivity
Step 3: Use app namespace in your layout XML file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
Step 4: Use AppCompatButton instead of Button
<android.support.v7.widget.AppCompatButton
android:id="#+id/buttonAwesome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Awesome Button"
android:textColor="#color/whatever_text_color_you_want"
app:backgroundTint="#color/whatever_background_color_you_want"/>
If I understand you correctly, you want to do something like this:
In such case, it should be just enough to use:
<item name="android:colorButtonNormal">#2196f3</item>
Or for API less than 21:
<item name="colorButtonNormal">#2196f3</item>
In addition to Using Material Theme Tutorial.
Animated variant is here.
You can use the
Material Component library.
Add the dependency to your build.gradle:
dependencies { implementation ‘com.google.android.material:material:1.3.0’ }
Then add the MaterialButton to your layout:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
app:strokeColor="#color/colorAccent"
app:strokeWidth="6dp"
app:layout_constraintStart_toStartOf="parent"
app:shapeAppearance="#style/MyShapeAppearance"
/>
You can check the full documentation here and API here.
To change the background color you have 2 options.
Using the backgroundTint attribute.
Something like:
<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/button_selector</item>
//..
</style>
It will be the best option in my opinion. If you want to override some theme attributes from a default style then you can use new materialThemeOverlay attribute.
Something like:
<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name=“materialThemeOverlay”>#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<!-- For filled buttons, your theme's colorPrimary provides the default background color of the component -->
<item name="colorPrimary">#color/green</item>
</style>
The option#2 requires at least the version 1.1.0.
You can use one of these styles:
Filled Button (default): style="#style/Widget.MaterialComponents.Button
Text Button: style="#style/Widget.MaterialComponents.Button.TextButton"
OutlinedButton: style="#style/Widget.MaterialComponents.Button.OutlinedButton"
OLD Support Library:
With the new Support Library 28.0.0, the Design Library now contains the MaterialButton.
You can add this button to our layout file with:
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="YOUR TEXT"
android:textSize="18sp"
app:icon="#drawable/ic_android_white_24dp" />
By default this class will use the accent colour of your theme for the buttons filled background colour along with white for the buttons text colour.
You can customize the button with these attributes:
app:rippleColor: The colour to be used for the button ripple effect
app:backgroundTint: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.
app:strokeColor: The color to be used for the button stroke
app:strokeWidth: The width to be used for the button stroke
app:cornerRadius: Used to define the radius used for the corners of the button
Here is how I got what I wanted.
First, made a button (in styles.xml):
<style name="Button">
<item name="android:textColor">#color/white</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:layout_margin">3dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
<item name="android:background">#drawable/primary_round</item>
</style>
The ripple and background for the button, as a drawable primary_round.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/primary_600">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp" />
<solid android:color="#color/primary" />
</shape>
</item>
</ripple>
This added the ripple effect I was looking for.
Beside android.support.design.button.MaterialButton (which mentioned by Gabriele Mariotti),
There is also another Button widget called com.google.android.material.button.MaterialButton which has different styles and extends from AppCompatButton:
style="#style/Widget.MaterialComponents.Button"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
style="#style/Widget.MaterialComponents.Button.TextButton"
style="#style/Widget.MaterialComponents.Button.Icon"
style="#style/Widget.MaterialComponents.Button.TextButton.Icon"
Filled, elevated Button (default):
style="#style/Widget.MaterialComponents.Button"
Filled, unelevated Button:
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
Text Button:
style="#style/Widget.MaterialComponents.Button.TextButton"
Icon Button:
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/icon_24px" // Icons can be added from this
A text Button with an icon::
Read: https://material.io/develop/android/components/material-button/
A convenience class for creating a new Material button.
This class supplies updated Material styles for the button in the
constructor. The widget will display the correct default Material
styles without the use of the style flag.
Here is a sample that will help in applying button style consistently across your app.
Here is a sample Theme I used with the specific styles..
<style name="MyTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">#drawable/material_button</item>
</style>
This is how I defined the button shape & effects inside res/drawable-v21 folder...
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/primary" />
</shape>
</item>
</ripple>
2dp corners are to keep it consistent with Material theme.
I tried a lot of answer & third party libs, but none was keeping the border and raised effect on pre-lollipop while having the ripple effect on lollipop without drawback. Here is my final solution combining several answers (border/raised are not well rendered on gifs due to grayscale color depth) :
Lollipop
Pre-lollipop
build.gradle
compile 'com.android.support:cardview-v7:23.1.1'
layout.xml
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
card_view:cardElevation="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardMaxElevation="8dp"
android:layout_margin="6dp"
>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:background="#drawable/btn_bg"
android:text="My button"/>
</android.support.v7.widget.CardView>
drawable-v21/btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
drawable/btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimaryDark" android:state_pressed="true"/>
<item android:drawable="#color/colorPrimaryDark" android:state_focused="true"/>
<item android:drawable="#color/colorPrimary"/>
</selector>
Activity's onCreate
final CardView cardView = (CardView) findViewById(R.id.card);
final Button button = (Button) findViewById(R.id.button);
button.setOnTouchListener(new View.OnTouchListener() {
ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
.setDuration
(80);
ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
.setDuration
(80);
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
o1.start();
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
o2.start();
break;
}
return false;
}
});
1) You can create rounded corner button by defining xml drawable and you can increase or decrease radius to increase or decrease roundness of button corner.
Set this xml drawable as background of button.
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="4dp"
android:insetTop="6dp"
android:insetRight="4dp"
android:insetBottom="6dp">
<ripple android:color="?attr/colorControlHighlight">
<item>
<shape android:shape="rectangle"
android:tint="#0091ea">
<corners android:radius="10dp" />
<solid android:color="#1a237e" />
<padding android:bottom="6dp" />
</shape>
</item>
</ripple>
</inset>
2) To change default shadow and shadow transition animation between button states, you need to define selector and apply it to button using android:stateListAnimator property. For complete button customization reference : http://www.zoftino.com/android-button
I've just created an android library, that allows you to easily modify the button color and the ripple color
https://github.com/xgc1986/RippleButton
<com.xgc1986.ripplebutton.widget.RippleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btn"
android:text="Android button modified in layout"
android:textColor="#android:color/white"
app:buttonColor="#android:color/black"
app:rippleColor="#android:color/white"/>
You don't need to create an style for every button you want wit a different color, allowing you to customize the colors randomly
// here is the custom button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="45"
android:centerColor="#color/colorPrimary"
android:startColor="#color/colorPrimaryDark"
android:endColor="#color/colorAccent"
>
</gradient>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
>
</corners>
<stroke
android:width="2dp"
android:color="#color/colorWhite"
>
</stroke>
</shape>
</item>
</selector>
you can give aviation to the view by adding z axis to it and can have default shadow to it. this feature was provided in L preview and will be available after it release. For now you can simply add a image the gives this look for button background