I am trying to maintain the material design ripple effect for devices with lollipop and above (21+) and stylize the button so that it doesn't have a large margin/space around it.
Example 1: Buttons with ripple effect but with margin/gap:
Example 2: Buttons with NO ripple effect and without the margin/gap:
I want the layout of Exmaple 2 with the ripple effect that is used in Example 1.
What my styles-v21 look like for Example 1 :
<?xml version="1.0" encoding="utf-8"?>
<resources>
... other styles ...
<style name="FacebookButton" parent="android:Widget.Material.Button">
<item name="android:colorButtonNormal">#ff3b5998</item>
<item name="android:layout_margin">0dp</item>
<item name="android:borderlessButtonStyle">#style/Widget.AppCompat.Button.Borderless</item>
</style>
<style name="GoogleButton" parent="android:Widget.Material.Button">
<item name="android:colorButtonNormal">#ffdd4b39</item>
<item name="android:layout_margin">0dp</item>
<item name="android:borderlessButtonStyle">#style/Widget.AppCompat.Button.Borderless</item>
</style>
<style name="TwitterButton" parent="android:Widget.Material.Button">
<item name="android:colorButtonNormal">#ff55acee</item>
<item name="android:layout_margin">0dp</item>
<item name="android:borderlessButtonStyle">#style/Widget.AppCompat.Button.Borderless</item>
</style>
<style name="SkipButton" parent="android:Widget.Material.Button">
<item name="android:colorButtonNormal">#ffdfa800</item>
<item name="android:layout_margin">0dp</item>
<item name="android:borderlessButtonStyle">#style/Widget.AppCompat.Button.Borderless</item>
</style>
</resources>
What my button layout looks like for Example 1:
<Button
android:id="#+id/login_with_facebook"
android:text="#string/login_with_facebook"
android:fontFamily="sans-serif-condensed"
android:textSize="16sp"
android:drawableLeft="#drawable/facebook_icon"
android:drawablePadding="25dp"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="16.88"
android:textColor="#ffffff"
android:gravity="left|center_vertical"
android:paddingLeft="45dp"
android:theme="#style/FacebookButton" />
<Button
android:id="#+id/login_with_google"
android:text="#string/login_with_google"
android:fontFamily="sans-serif-condensed"
android:textSize="16sp"
android:drawableLeft="#drawable/google_icon"
android:drawablePadding="25dp"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="16.88"
android:textColor="#ffffffff"
android:gravity="left|center_vertical"
android:paddingLeft="45dp"
android:theme="#style/GoogleButton" />
<Button
android:id="#+id/twitter_login_button"
android:text="#string/login_with_twitter"
android:fontFamily="sans-serif-condensed"
android:textSize="16sp"
android:drawableLeft="#drawable/twitter_icon"
android:drawablePadding="25dp"
android:layout_height="45dp"
android:gravity="left|center_vertical"
android:layout_width="match_parent"
android:layout_weight="16.88"
android:textColor="#ffffffff"
android:paddingLeft="45dp"
android:theme="#style/TwitterButton" />
<Button
android:id="#+id/login_anonymously"
android:text="#string/login_anonymously"
android:fontFamily="sans-serif-condensed"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:textColor="#ffffffff"
android:theme="#style/SkipButton" />
Any idea how I can achieve the look of Example 2 while using the ripple methodology I've presented? Any links to resources or help would be appreciated. Thanks.
Extra:
I've already read over the following
Coloring Buttons in Android with Material Design and AppCompat
How to properly style material buttons in android
You can use android:background="?android:attr/selectableItemBackground" to get a rectangular ripple.
Alternatively, you can create your own drawable. Here's the XML for the framework's selectable item background:
drawable/item_background_material.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask">
<color android:color="#android:color/white" />
</item>
</ripple>
Related
I want to change the color of the active toggle button. But just the change of the rippleColor makes a difference.
I wish to customize the background color of the active button and the text color.
<style name="ToggleButtonGroupStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="rippleColor">#color/colorAccent</item>
</style>
In the following toggleButtonGroup I used this style from above:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/priority_btn_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentLeft="true"
app:selectionRequired="true"
app:singleSelection="true"
app:checkedButton="#+id/btn_one"
>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:shadowColor="#color/project_text"
android:text="0" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:text="!" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="#dimen/priority_btn_width"
android:layout_height="wrap_content"
android:text="!!" />
<com.google.android.material.button.MaterialButton
style="#style/ToggleButtonGroupStyle"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="!!!" />
</com.google.android.material.button.MaterialButtonToggleGroup>
Could anybody give me a hint what the problem here is?
Thanks :)
The background color of the checked buttons is based on the colorPrimary attribute.
You can use:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="?attr/materialButtonOutlinedStyle"
android:theme="#style/ThemeOverlay.Custom.Button"
with:
<style name="ThemeOverlay.Custom.Button" parent="">
<item name="colorPrimary">#color/....</item>
</style>
or you can use a custom style with:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_one"
style="#style/ToggleButtonGroupStyle"
with:
<style name="ToggleButtonGroupStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="backgroundTint">#color/custom_selector</item>
</style>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/..." android:state_checked="true"/> <!-- selected color -->
<item android:color="#android:color/transparent" android:state_checked="false"/>
</selector>
Not able to make the selected color of MaterialToggleButton to a solid color, only a transparent shade of color primary is shown.
I tried the below set of code and the out image is shown below.
Button theme in styles
<style name="ThemeButtonColorToggle" parent="AppTheme">
<item name="colorPrimary">#color/colorOrange</item>
<item name="colorButtonNormal">#color/colorOrange</item>
<item name="android:backgroundTint">#color/black</item>
<item name="strokeColor">#color/colorOrange</item>
<item name="strokeWidth">#dimen/mtrl_btn_stroke_size</item>
<item name="colorOnPrimary">#color/colorOrange</item>
<item name="colorOnPrimarySurface">#color/colorOrange</item>
</style>
XML code
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="#id/btnAndroid"
app:layout_constraintTop_toBottomOf="#id/tvName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:selectionRequired="true"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:theme="#style/ThemeButtonColorToggle"
android:textColor="#android:color/white"
android:textColorHighlight="#color/colorOrange"
android:text="Android" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btniOS"
android:layout_width="wrap_content"
android:textIsSelectable="true"
android:textColor="#android:color/white"
android:theme="#style/ThemeButtonColorToggle"
android:layout_height="wrap_content"
android:text="iOS" />
</com.google.android.material.button.MaterialButtonToggleGroup>
I require to get a solid color as shown below
can anyone please help me to sort out
The background color of the MaterialButton is defined by the backgroundTint attribute.
The default value is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
You can change it in the xml layout or you can define a custom style:
<com.google.android.material.button.MaterialButton
style="#style/ButtonStyle"
.. />
with:
<style name="ButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/your_button_background_selector</item>
...
</style>
I've searched here and it doesn't seem like anyone has had this problem.
I'm following the Android Studio tutorials from here.
Basically what is happening is that my buttons look fine when I implement my XML code, but when I transfer over some of the XML code to my styles.xml and import it into my activity_main.xml file, my button changes its dimensions.
Here's my activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
android:padding="16sp"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:contentDescription="#string/minus_button"
android:background="#drawable/button_background"
android:onClick="decreaseScore" />
<ImageButton
android:id="#+id/increaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:layout_alignParentEnd="true"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:background="#drawable/button_background"
android:contentDescription="#string/minus_button"
android:onClick="decreaseScore"
/>
<ImageButton
android:id="#+id/increaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_2"/>
</RelativeLayout>
</LinearLayout>
My strings.xml file.
<resources>
<string name="app_name">Scorekeeper</string>
<string name="team_2">Team 2</string>
<string name="initial_score">0</string>
<string name="plus_button">Plus Button</string>
<string name="minus_button">Minus Button</string>
<string name="team_1">Team 1</string>
</resources>
drawable.ic_minus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13H5v-2h14v2z"/>
</vector>
drawable.ic_plus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
drawable.button_background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#color/colorPrimary"/>
</shape>
I hope I have not missed anything out. If you copy paste my code inside an empty activity activity_main.xml file, you should see something like this.
Now the problem:
I want to implement some styles for my buttons. I have updated my styles.xml as such. In this case I have a parent ScoreButton which only takes the background, whereas the child elements are the plus and minus, which takes the picture and description.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
</style>
<style name="PlusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_plus</item>
<item name="android:contentDescription">#string/plus_button</item>
</style>
<style name="MinusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_minus</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
</resources>
And if I update one of my button's code as such, for instance, replacing #+id/decreaseTeam1 with the code below:
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
style="#style/PlusButtons"
android:onClick="decreaseScore" />
The minus button suddenly becomes inflated.
I read that child views override parent views, but I don't see how that can be a problem, since there is no change to the image size, nor have I compressed it.
The problem is that in the style definition, your ScoreButtons has Widget.AppCompat.Button as parent. This style defines a minHeight and minWidth, as follows:
<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
So, in order to solve your problem, you just have to remove the parent from ScoreButtons style:
<style name="ScoreButtons">
<item name="android:background">#drawable/button_background</item>
</style>
You have an error in your style. You are using an ImageButton not a Button
So, you should write
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton"> // ImageButton
<item name="android:background">#drawable/button_background</item>
</style>
you are making a mistake while assigning a style. you need to use ImageButton instead of using Button.
Use this:
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
Instead of this:
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
Coming from this thread: Android Material Design Button Styles
I couldn't understand how to individually change the colors of the buttons, so that not all buttons are with the same color.
<item name="android:colorButtonNormal">#color/blue</item>
This solution works nice, but it changes the color of all buttons.
In API 22, we can change the color of the different buttons by using the backgroundTint, like so:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />
How can we do it in API 21 ?
That's the styles.xml that I have:
<style name="AppTheme" parent="#android:style/Theme.Material.Light">
<item name="android:actionBarStyle">#style/actionBarCustomization</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerDropDownItemStyle</item>
<item name="android:spinnerItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:colorButtonNormal">#color/myDarkBlue</item>
</style>
<style name="actionBarCustomization" parent="#android:style/Widget.Material.Light.ActionBar">
<item name="android:background">#color/white</item>
<item name="android:titleTextStyle">#style/actionBarTextColor</item>
</style>
<style name="actionBarTextColor" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>
Okay, I figured it out. Here is the way I solved it, I hope it helps someone else too (I am not saying that it's perfect).
I created a drawable material_ripple_effect.xml that looks like that:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/black">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/myOrange" />
</shape>
</item>
</ripple>
And then in the layout, where I have the button, I just set the ripple drawable as a background. In activity_main.xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:background="#drawable/material_ripple_effect"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />
I've been trying to fix this issue for hours now but it looks like I'm the only one having it.
I shouldn't see the number above and below the blue line. Here is the XML
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:useDefaultMargins="true"
android:layout_margin="3dp"
app:columnCount="3"
app:rowCount="7">
........
<NumberPicker
app:layout_column="1"
app:layout_row="3"
android:id="#+id/n_of_dies"
style="#style/inputNumbers"
android:layout_width="wrap_content"
app:layout_gravity="fill_horizontal"
/>
<NumberPicker
app:layout_column="1"
app:layout_row="4"
app:layout_gravity="fill_horizontal"
android:id="#+id/carbon_content"
style="#style/inputNumbers"
android:layout_width="wrap_content"
app:layout_gravity="fill_horizontal"
/>
........
The content of Input numbers is
<style name="inputNumbers">
<item name="android:padding">10dp</item>
</style>
any ideas?
Given the problem is how you're using the paddings I'd recommend to take a look at the widget style (the Holo variation) if you want to change the default look:
...
<style name="Widget.NumberPicker">
<item name="android:internalLayout">#android:layout/number_picker</item>
<item name="android:orientation">vertical</item>
<item name="android:fadingEdge">vertical</item>
<item name="android:fadingEdgeLength">50dip</item>
</style>
...
<style name="Widget.Holo.NumberPicker" parent="Widget.NumberPicker">
<item name="android:internalLayout">#android:layout/number_picker_with_selector_wheel</item>
<item name="android:solidColor">#android:color/transparent</item>
<item name="android:selectionDivider">#android:drawable/numberpicker_selection_divider</item>
<item name="android:selectionDividerHeight">2dip</item>
<item name="android:selectionDividersDistance">48dip</item>
<item name="android:internalMinWidth">64dip</item>
<item name="android:internalMaxHeight">180dip</item>
<item name="virtualButtonPressedDrawable">?android:attr/selectableItemBackground</item>
</style>