BottomNavigation view ripple color effect - android

I've seen this ripple color effect on Material Calculator app, on the Google Play and now on the BottomNavigation view.
How can I make this color effect starting from touch?
Gif: https://d13yacurqjgara.cloudfront.net/users/72535/screenshots/2673294/bottom_navigation_material_design_by_jardson_almeida.gif

I think it will be easier if you use style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlHighlight">#color/ripple_material_dark</item>
</style>

If you know how to make simple ripple, then here is code to change color of it:
RippleDrawable rippleDrawable = (RippleDrawable)view.getBackground(); // assumes bg is a RippleDrawable
int[][] states = new int[][] { new int[] { android.R.attr.state_enabled} };
int[] colors = new int[] { Color.BLUE }; // sets the ripple color to blue
ColorStateList colorStateList = new ColorStateList(states, colors);
rippleDrawable.setColor(colorStateList);

Both answers do the work but I found a library which simplifies the work when using BottomNavigation:
https://github.com/roughike/BottomBar

Related

Android AppCompatRadioButton circle not shown

i use this code for make new radio button and add it to radioGroup
RadioButton buttonh = new RadioButton(getApplicationContext());
RadioGroup.LayoutParams params_rb = new RadioGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
buttonh.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
buttonh.setGravity(Gravity.START);
params_rb.setMargins(0, 0, 12, 0);
buttonh.setTextColor(getResources().getColor(R.color.textColor));
buttonh.setTextAlignment(View.TEXT_ALIGNMENT_TEXT_START);
buttonh.setText(Html.fromHtml(mscs.get("time_am")));
radiox.addView(buttonh,params_rb);
and its work but its show different color of circle so i must change it to
AppCompatRadioButton buttonh = new AppCompatRadioButton(this);
but when i use this code the circle gone only the text shown any idea ?
also i try to add color to circle but seems there are no circle only text
ColorStateList colorStateList = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked},
new int[]{android.R.attr.state_checked}
},
new int[]{
Color.DKGRAY
, Color.rgb (242,81,112),
}
);
buttonh.setSupportButtonTintList(colorStateList);
First, you should take a look to appCompat lib article there and to different attributs you can set:
colorPrimary: The primary branding color for the app. By default, this is the color applied to the action bar background.
colorPrimaryDark: Dark variant of the primary branding color. By default, this is the color applied to the status bar (via statusBarColor) and navigation bar (via navigationBarColor).
colorAccent: Bright complement to the primary branding color. By default, this is the color applied to framework controls (via colorControlActivated).
colorControlNormal: The color applied to framework controls in their normal state.
colorControlActivated: The color applied to framework controls in their activated (ex. checked, switch on) state.
colorControlHighlight: The color applied to framework control highlights (ex. ripples, list selectors).
colorButtonNormal: The color applied to framework buttons in their normal state.
With previous attributs you can define your own theme for RadioButton:
<style name="Theme.MyRadioButton" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_awesome_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight, and colorSwitchThumbNormal. -->
</style>
and :
<RadioButton
....................................
android:theme="#style/Theme.MyRadioButton">
</RadioButton>

How to change Android Button ripple colors while preserving other style properties?

I want to inherit all Button styles from default material design style and preserve background colors and shadows which appear when pressing a button (so called elevation). The only thing I want to change is the color of ripple effect (when you touch a button and then move your finger around).
If I use the following style:
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/MyTheme.Button</item>
</style>
<style name="MyTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/btn_material</item>
</style>
and drawable/btn_material is:
<ripple android:color="#ffff0000">
<item android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
then my button loses its background color and elevation shadow.
Is there any way to tell the button to keep the default colors and shadows inherited from parent and only replace the ripple color with the one given? Essentially I'd like to achieve something like android:backgroundRipple property which would change only the ripple leaving everything else intact.
RippleDrawable ripple= (RippleDrawable)view.getBackground();
int[][] attr= new int[][] { new int[] { android.R.attr.state_enabled} };
int[] colors = new int[] { Color.RED }; // sets the ripple color to red
ColorStateList color = new Color(states, colors);
ripple.setColor(color);

Set buttonColorNormal programatically for Android Button with AppCompat's design effect

I have been using Google design support library for Android. In order to set colour of a button different from the app theme I declare the Button in layout XML file as follows:
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyButton" />
And then define the MyButton in styles.xml as
<style name="MyButton" parent="ThemeOverlay.AppCompat">
<item name="colorButtonNormal">#color/my_color</item>
</style>
This gives me a button as per the design support library, with the background color as the one defined with #color/my_color in my colors.xml file.
Hence basically it is to use android:theme to change the colorButtonNormal attribute in order to get the desired color.
How could I achieve the same result programatically? Basically if I could do something like
myButton.setTheme(R.style.MyButton)
...then I could set the colorButtonNormal to get the view.
I cannot set the it like
myButton.setBackgroundColor(ContextCompat.getColor(getContext(),R.color.my_color));
or not even like
ColorStateList colorStateList = ContextCompat.getColorStateList(getActivity(), R.color.my_color);
ViewCompat.setBackgroundTintList(myButton, colorStateList);
This will remove the design support library effect of touch.
for Button I wrote this helper method:
public static ColorStateList getButtonColorStateList(Context context, int accentColor) {
// get darker variant of accentColor for button pressed state
float[] colorHSV = new float[3];
Color.colorToHSV(accentColor, colorHSV);
colorHSV[2] *= 0.9f;
int darkerAccent = Color.HSVToColor(colorHSV);
return new ColorStateList(
new int[][] {{android.R.attr.state_pressed}, {android.R.attr.state_enabled}, {-android.R.attr.state_enabled}},
new int[] { darkerAccent, accentColor, getColor(context, R.color.buttonColorDisabled) });
}
accentColor is color value for normal enabled state. For pressed state is used darker variant of accentColor and for disable state I have defined color in values:
<color name="buttonColorDisabled">#dddddd</color>
Use this method:
mButton.setSupportBackgroundTintList(Utils.getButtonColorStateList(this, accentColor));
where mButton is AppCompatButton and accentColor is value of color.
This works for me on Lollipop and above with effect of touch and on pre-Lollipop as standard color change.
If you only need one color (in spite of the state), you can use
Button button = ...;
int color = ...;
ViewCompat.setBackgroundTintList(button, ColorStateList.valueOf(color));
This will preserve ripple effect on Lollipop and newer devices (API 21+)

How to use colors from android standard themes?

I want to create custom controls and stylize them according to current theme. How can I access colors and drawables in standard system themes?
If you're referring to retrieving colors like colorPrimary or colorPrimaryDark from your theme dynamically, then let's say your theme looks something like
<style name="AppTheme.OrangeTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/orange</item>
<item name="colorPrimaryDark">#color/orangeDark</item>
<item name="colorAccent">#color/orangeAccent</item>
</style>
You can access primaryColor from styledAttributes using this method
public static int getPrimaryColorFromSelectedTheme(Context context) {
int[] attrs = {R.attr.colorPrimary, R.attr.colorPrimaryDark};
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs);
int primaryColor = ta.getColor(0, Color.BLACK); //1 index for primaryColorDark
//default value for primaryColor is set to black if primaryColor not found
ta.recycle();
return primaryColor;
}
Similarly, you can also access colorAccent as well, by adding it to the attributes.
About the drawables, I don't quite understand what you mean by accessing drawables in standard system themes. But you can access Android drawables using
ContextCompat.getDrawable(context, android.R.drawable.[Drawable Name]);

Problem in implementing Android rating bar style

I want to make style for rating bar programmatically. I've read this tutorial
Pretty Rating Bar
I can do layerList and selector and I can link them programmatically but I can't link the layerList I made with The style attribute programmatically so I can set the style attribute in the rating bar constructor with my own style
RatingBar rb=new RatingBar(getBaseContext(), null, defStyle);.
to make custom rating bar I need to do the following :-
1-make 2 xmls one for the full_empty state and another one for full empty they both include selectors
I made this for example for the fullFilled state:
StateListDrawable state_fullFilled = new StateListDrawable();
state_fullFilled.addState(new int[] {android.R.attr.state_pressed},
getResources().getDrawable(R.drawable.star_rated));
state_fullFilled.addState(new int[] {android.R.attr.state_focused},
getResources().getDrawable(R.drawable.star_rated));
state_fullFilled.addState(new int[] {android.R.attr.state_selected },
getResources().getDrawable(R.drawable.star_rated));
this for fullEmpty:-
StateListDrawable state_fullEmpty = new StateListDrawable();
state_fullEmpty.addState(new int[] {android.R.attr.state_pressed},
getResources().getDrawable(R.drawable.rate));
state_fullEmpty.addState(new int[] {android.R.attr.state_focused},
getResources().getDrawable(R.drawable.rate));
state_fullEmpty.addState(new int[] { android.R.attr.state_selected},
getResources().getDrawable(R.drawable.rate));
2-then I should make layerList of those drawables I've made like this:-
Drawable[] d=new LayerDrawable[2];
d[0]=state_fullEmpty;
d[1]=state_fullFilled;
LayerDrawable layer=new LayerDrawable(d);
3-I should make this step programmatically But I can't:-
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/food_ratingbar_full</item>

Categories

Resources