norohind/vanilla
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Add background circle to play button

Browse Source
This commit is contained in:
Adrian Ulrich 2017-06-07 14:41:08 +02:00
parent aabd677a52
commit 57992bad25
12 changed files with 99 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
generate-themes.pl
View File

@ -114,9 +114,10 @@ my $DATA = << "EOF";
<item name="overlay_background_color">\@color/overlay_background_light</item> <item name="overlay_background_color">\@color/overlay_background_light</item>
<item name="overlay_foreground_color">\@color/overlay_foreground_light</item> <item name="overlay_foreground_color">\@color/overlay_foreground_light</item>
<item name="float_color">\@color/material_grey_400</item> <item name="float_color">\@color/material_grey_400</item>
<item name="background_circle_color">\@color/material_grey_400</item>
<item name="tabs_background">$this->{light}->{colorPrimary}</item> <item name="tabs_background">$this->{light}->{colorPrimary}</item>
<item name="now_playing_marker">$this->{light}->{colorAccent}</item> <item name="now_playing_marker">$this->{light}->{colorAccent}</item>
<item name="controls_normal">\@color/material_grey_600</item> <item name="controls_normal">\@color/material_grey_900</item>
<item name="controls_active">$this->{light}->{colorAccent}</item> <item name="controls_active">$this->{light}->{colorAccent}</item>
<item name="android:colorAccent">$this->{light}->{colorAccent}</item> <item name="android:colorAccent">$this->{light}->{colorAccent}</item>
<item name="android:colorPrimary">$this->{light}->{colorPrimary}</item> <item name="android:colorPrimary">$this->{light}->{colorPrimary}</item>
@ -146,9 +147,10 @@ my $DATA = << "EOF";
<item name="overlay_background_color">\@color/overlay_background_dark</item> <item name="overlay_background_color">\@color/overlay_background_dark</item>
<item name="overlay_foreground_color">\@color/overlay_foreground_dark</item> <item name="overlay_foreground_color">\@color/overlay_foreground_dark</item>
<item name="float_color">\@color/material_grey_900</item> <item name="float_color">\@color/material_grey_900</item>
<item name="background_circle_color">\@color/material_grey_700</item>
<item name="tabs_background">$this->{dark}->{colorPrimary}</item> <item name="tabs_background">$this->{dark}->{colorPrimary}</item>
<item name="now_playing_marker">$this->{dark}->{colorAccent}</item> <item name="now_playing_marker">$this->{dark}->{colorAccent}</item>
<item name="controls_normal">\@color/material_grey_600</item> <item name="controls_normal">\@color/material_grey_300</item>
<item name="controls_active">$this->{dark}->{colorAccent}</item> <item name="controls_active">$this->{dark}->{colorAccent}</item>
<item name="android:colorAccent">$this->{dark}->{colorAccent}</item> <item name="android:colorAccent">$this->{dark}->{colorAccent}</item>
<item name="android:colorPrimary">$this->{dark}->{colorPrimary}</item> <item name="android:colorPrimary">$this->{dark}->{colorPrimary}</item>

4
res/layout/controls.xml
View File

@ -20,7 +20,8 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
--> -->
<merge xmlns:android="http://schemas.android.com/apk/res/android"> <merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:vib="http://schemas.android.com/apk/res-auto">
<ch.blinkenlights.android.vanilla.VanillaImageButton <ch.blinkenlights.android.vanilla.VanillaImageButton
android:id="@+id/shuffle" android:id="@+id/shuffle"
android:layout_height="fill_parent" android:layout_height="fill_parent"
@ -47,6 +48,7 @@ THE SOFTWARE.
android:background="?android:attr/selectableItemBackground" android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter" android:scaleType="fitCenter"
android:src="@drawable/play" android:src="@drawable/play"
vib:backgroundCircleColor="?background_circle_color"
android:contentDescription="@string/play_pause" /> android:contentDescription="@string/play_pause" />
<ch.blinkenlights.android.vanilla.VanillaImageButton <ch.blinkenlights.android.vanilla.VanillaImageButton
android:id="@+id/next" android:id="@+id/next"

7
res/values-v21/colors.xml
View File

@ -5,15 +5,12 @@
<color name="material_grey_400">#bdbdbd</color> <color name="material_grey_400">#bdbdbd</color>
<color name="material_grey_500">#ffa3a3a3</color> <color name="material_grey_500">#ffa3a3a3</color>
<color name="material_grey_600">#ff757575</color> <color name="material_grey_600">#ff757575</color>
<color name="material_grey_700">#61616161</color>
<color name="material_grey_800">#42424242</color>
<color name="material_grey_900">#ff212121</color> <color name="material_grey_900">#ff212121</color>
<color name="button_material_light">#ffd6d7d7</color> <color name="button_material_light">#ffd6d7d7</color>
<color name="button_material_dark">#ff5a595b</color> <color name="button_material_dark">#ff5a595b</color>
<!-- Material design primary colors -->
<color name="vanillaPrimary">#ff37474f</color>
<color name="vanillaPrimaryDark">#ff263238</color>
<color name="vanillaAccent">#ff3e677a</color>
<!-- library tabs --> <!-- library tabs -->
<color name="tabs_active_indicator">@android:color/background_light</color> <color name="tabs_active_indicator">@android:color/background_light</color>

6
res/values-v21/theme-blue.xml
View File

@ -22,9 +22,10 @@
<item name="overlay_background_color">@color/overlay_background_light</item> <item name="overlay_background_color">@color/overlay_background_light</item>
<item name="overlay_foreground_color">@color/overlay_foreground_light</item> <item name="overlay_foreground_color">@color/overlay_foreground_light</item>
<item name="float_color">@color/material_grey_400</item> <item name="float_color">@color/material_grey_400</item>
<item name="background_circle_color">@color/material_grey_400</item>
<item name="tabs_background">#FF0277BD</item> <item name="tabs_background">#FF0277BD</item>
<item name="now_playing_marker">#FF03A9F4</item> <item name="now_playing_marker">#FF03A9F4</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_900</item>
<item name="controls_active">#FF03A9F4</item> <item name="controls_active">#FF03A9F4</item>
<item name="android:colorAccent">#FF03A9F4</item> <item name="android:colorAccent">#FF03A9F4</item>
<item name="android:colorPrimary">#FF0277BD</item> <item name="android:colorPrimary">#FF0277BD</item>
@ -54,9 +55,10 @@
<item name="overlay_background_color">@color/overlay_background_dark</item> <item name="overlay_background_color">@color/overlay_background_dark</item>
<item name="overlay_foreground_color">@color/overlay_foreground_dark</item> <item name="overlay_foreground_color">@color/overlay_foreground_dark</item>
<item name="float_color">@color/material_grey_900</item> <item name="float_color">@color/material_grey_900</item>
<item name="background_circle_color">@color/material_grey_700</item>
<item name="tabs_background">#FF0277BD</item> <item name="tabs_background">#FF0277BD</item>
<item name="now_playing_marker">#FF03A9F4</item> <item name="now_playing_marker">#FF03A9F4</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_300</item>
<item name="controls_active">#FF03A9F4</item> <item name="controls_active">#FF03A9F4</item>
<item name="android:colorAccent">#FF03A9F4</item> <item name="android:colorAccent">#FF03A9F4</item>
<item name="android:colorPrimary">#FF0277BD</item> <item name="android:colorPrimary">#FF0277BD</item>

6
res/values-v21/theme-greyish.xml
View File

@ -22,9 +22,10 @@
<item name="overlay_background_color">@color/overlay_background_light</item> <item name="overlay_background_color">@color/overlay_background_light</item>
<item name="overlay_foreground_color">@color/overlay_foreground_light</item> <item name="overlay_foreground_color">@color/overlay_foreground_light</item>
<item name="float_color">@color/material_grey_400</item> <item name="float_color">@color/material_grey_400</item>
<item name="background_circle_color">@color/material_grey_400</item>
<item name="tabs_background">#ff212121</item> <item name="tabs_background">#ff212121</item>
<item name="now_playing_marker">#ff212121</item> <item name="now_playing_marker">#ff212121</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_900</item>
<item name="controls_active">#ff212121</item> <item name="controls_active">#ff212121</item>
<item name="android:colorAccent">#ff212121</item> <item name="android:colorAccent">#ff212121</item>
<item name="android:colorPrimary">#ff212121</item> <item name="android:colorPrimary">#ff212121</item>
@ -54,9 +55,10 @@
<item name="overlay_background_color">@color/overlay_background_dark</item> <item name="overlay_background_color">@color/overlay_background_dark</item>
<item name="overlay_foreground_color">@color/overlay_foreground_dark</item> <item name="overlay_foreground_color">@color/overlay_foreground_dark</item>
<item name="float_color">@color/material_grey_900</item> <item name="float_color">@color/material_grey_900</item>
<item name="background_circle_color">@color/material_grey_700</item>
<item name="tabs_background">#ff212121</item> <item name="tabs_background">#ff212121</item>
<item name="now_playing_marker">#ffececec</item> <item name="now_playing_marker">#ffececec</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_300</item>
<item name="controls_active">#ffececec</item> <item name="controls_active">#ffececec</item>
<item name="android:colorAccent">#ffececec</item> <item name="android:colorAccent">#ffececec</item>
<item name="android:colorPrimary">#ff212121</item> <item name="android:colorPrimary">#ff212121</item>

6
res/values-v21/theme-orange.xml
View File

@ -22,9 +22,10 @@
<item name="overlay_background_color">@color/overlay_background_light</item> <item name="overlay_background_color">@color/overlay_background_light</item>
<item name="overlay_foreground_color">@color/overlay_foreground_light</item> <item name="overlay_foreground_color">@color/overlay_foreground_light</item>
<item name="float_color">@color/material_grey_400</item> <item name="float_color">@color/material_grey_400</item>
<item name="background_circle_color">@color/material_grey_400</item>
<item name="tabs_background">#FFE65100</item> <item name="tabs_background">#FFE65100</item>
<item name="now_playing_marker">#FFF57F17</item> <item name="now_playing_marker">#FFF57F17</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_900</item>
<item name="controls_active">#FFF57F17</item> <item name="controls_active">#FFF57F17</item>
<item name="android:colorAccent">#FFF57F17</item> <item name="android:colorAccent">#FFF57F17</item>
<item name="android:colorPrimary">#FFE65100</item> <item name="android:colorPrimary">#FFE65100</item>
@ -54,9 +55,10 @@
<item name="overlay_background_color">@color/overlay_background_dark</item> <item name="overlay_background_color">@color/overlay_background_dark</item>
<item name="overlay_foreground_color">@color/overlay_foreground_dark</item> <item name="overlay_foreground_color">@color/overlay_foreground_dark</item>
<item name="float_color">@color/material_grey_900</item> <item name="float_color">@color/material_grey_900</item>
<item name="background_circle_color">@color/material_grey_700</item>
<item name="tabs_background">#FFE65100</item> <item name="tabs_background">#FFE65100</item>
<item name="now_playing_marker">#FFF57F17</item> <item name="now_playing_marker">#FFF57F17</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_300</item>
<item name="controls_active">#FFF57F17</item> <item name="controls_active">#FFF57F17</item>
<item name="android:colorAccent">#FFF57F17</item> <item name="android:colorAccent">#FFF57F17</item>
<item name="android:colorPrimary">#FFE65100</item> <item name="android:colorPrimary">#FFE65100</item>

6
res/values-v21/theme-standard.xml
View File

@ -22,9 +22,10 @@
<item name="overlay_background_color">@color/overlay_background_light</item> <item name="overlay_background_color">@color/overlay_background_light</item>
<item name="overlay_foreground_color">@color/overlay_foreground_light</item> <item name="overlay_foreground_color">@color/overlay_foreground_light</item>
<item name="float_color">@color/material_grey_400</item> <item name="float_color">@color/material_grey_400</item>
<item name="background_circle_color">@color/material_grey_400</item>
<item name="tabs_background">#ff37474f</item> <item name="tabs_background">#ff37474f</item>
<item name="now_playing_marker">#ff3e677a</item> <item name="now_playing_marker">#ff3e677a</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_900</item>
<item name="controls_active">#ff3e677a</item> <item name="controls_active">#ff3e677a</item>
<item name="android:colorAccent">#ff3e677a</item> <item name="android:colorAccent">#ff3e677a</item>
<item name="android:colorPrimary">#ff37474f</item> <item name="android:colorPrimary">#ff37474f</item>
@ -54,9 +55,10 @@
<item name="overlay_background_color">@color/overlay_background_dark</item> <item name="overlay_background_color">@color/overlay_background_dark</item>
<item name="overlay_foreground_color">@color/overlay_foreground_dark</item> <item name="overlay_foreground_color">@color/overlay_foreground_dark</item>
<item name="float_color">@color/material_grey_900</item> <item name="float_color">@color/material_grey_900</item>
<item name="background_circle_color">@color/material_grey_700</item>
<item name="tabs_background">#ff37474f</item> <item name="tabs_background">#ff37474f</item>
<item name="now_playing_marker">#ff3e677a</item> <item name="now_playing_marker">#ff3e677a</item>
<item name="controls_normal">@color/material_grey_600</item> <item name="controls_normal">@color/material_grey_300</item>
<item name="controls_active">#ff3e677a</item> <item name="controls_active">#ff3e677a</item>
<item name="android:colorAccent">#ff3e677a</item> <item name="android:colorAccent">#ff3e677a</item>
<item name="android:colorPrimary">#ff37474f</item> <item name="android:colorPrimary">#ff37474f</item>

80
res/values-v21/themes-list.xml
View File

@ -1,27 +1,27 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- THIS FILE IS AUTOGENERATED BY generate-themes.pl - DO NOT TOUCH! --> <!-- THIS FILE IS AUTOGENERATED BY generate-themes.pl - DO NOT TOUCH! -->
<resources> <resources>
<string-array name="theme_values"> <integer-array name="theme_category_vanillabase">
<item>0,#ff263238,#fff0f0f0,#ff37474f</item> <item>@style/VanillaBase</item>
<item>1,#ff263238,#ff2a2a2a,#ff37474f</item> <item>@style/Dark.VanillaBase</item>
<item>2,#ff090909,#fff0f0f0,#ff212121</item> <item>@style/Greyish.VanillaBase</item>
<item>3,#ff090909,#ff2a2a2a,#ff212121</item> <item>@style/Greyish.Dark.VanillaBase</item>
<item>4,#FFBF360C,#fff0f0f0,#FFE65100</item> <item>@style/Orange.VanillaBase</item>
<item>5,#FFBF360C,#ff2a2a2a,#FFE65100</item> <item>@style/Orange.Dark.VanillaBase</item>
<item>6,#FF01579B,#fff0f0f0,#FF0277BD</item> <item>@style/Blue.VanillaBase</item>
<item>7,#FF01579B,#ff2a2a2a,#FF0277BD</item> <item>@style/Blue.Dark.VanillaBase</item>
</string-array> </integer-array>
<string-array name="theme_entries"> <integer-array name="theme_category_library">
<item>Standard</item> <item>@style/Library</item>
<item>Dark.Standard</item> <item>@style/Dark.Library</item>
<item>Greyish</item> <item>@style/Greyish.Library</item>
<item>Dark.Greyish</item> <item>@style/Greyish.Dark.Library</item>
<item>Orange</item> <item>@style/Orange.Library</item>
<item>Dark.Orange</item> <item>@style/Orange.Dark.Library</item>
<item>Blue</item> <item>@style/Blue.Library</item>
<item>Dark.Blue</item> <item>@style/Blue.Dark.Library</item>
</string-array> </integer-array>
<integer-array name="theme_category_popupdialog"> <integer-array name="theme_category_popupdialog">
<item>@style/PopupDialog</item> <item>@style/PopupDialog</item>
@ -56,26 +56,26 @@
<item>@style/Blue.Dark.Playback</item> <item>@style/Blue.Dark.Playback</item>
</integer-array> </integer-array>
<integer-array name="theme_category_library"> <string-array name="theme_entries">
<item>@style/Library</item> <item>Standard</item>
<item>@style/Dark.Library</item> <item>Dark.Standard</item>
<item>@style/Greyish.Library</item> <item>Greyish</item>
<item>@style/Greyish.Dark.Library</item> <item>Dark.Greyish</item>
<item>@style/Orange.Library</item> <item>Orange</item>
<item>@style/Orange.Dark.Library</item> <item>Dark.Orange</item>
<item>@style/Blue.Library</item> <item>Blue</item>
<item>@style/Blue.Dark.Library</item> <item>Dark.Blue</item>
</integer-array> </string-array>
<integer-array name="theme_category_vanillabase"> <string-array name="theme_values">
<item>@style/VanillaBase</item> <item>0,#ff263238,#fff0f0f0,#ff37474f</item>
<item>@style/Dark.VanillaBase</item> <item>1,#ff263238,#ff2a2a2a,#ff37474f</item>
<item>@style/Greyish.VanillaBase</item> <item>2,#ff090909,#fff0f0f0,#ff212121</item>
<item>@style/Greyish.Dark.VanillaBase</item> <item>3,#ff090909,#ff2a2a2a,#ff212121</item>
<item>@style/Orange.VanillaBase</item> <item>4,#FFBF360C,#fff0f0f0,#FFE65100</item>
<item>@style/Orange.Dark.VanillaBase</item> <item>5,#FFBF360C,#ff2a2a2a,#FFE65100</item>
<item>@style/Blue.VanillaBase</item> <item>6,#FF01579B,#fff0f0f0,#FF0277BD</item>
<item>@style/Blue.Dark.VanillaBase</item> <item>7,#FF01579B,#ff2a2a2a,#FF0277BD</item>
</integer-array> </string-array>
</resources> </resources>

1
res/values/attrs.xml
View File

@ -6,4 +6,5 @@
<attr name="now_playing_marker" format="color" /> <attr name="now_playing_marker" format="color" />
<attr name="controls_normal" format="color" /> <attr name="controls_normal" format="color" />
<attr name="controls_active" format="color" /> <attr name="controls_active" format="color" />
<attr name="background_circle_color" format="color" />
</resources> </resources>

1
res/values/theme-standard.xml
View File

@ -26,6 +26,7 @@ THE SOFTWARE.
<!-- color to use in full_playback text, set to bright_foreground_disabled_holo_light //--> <!-- color to use in full_playback text, set to bright_foreground_disabled_holo_light //-->
<item name="overlay_foreground_color">#ffb2b2b2</item> <item name="overlay_foreground_color">#ffb2b2b2</item>
<item name="float_color">#f222</item> <item name="float_color">#f222</item>
<item name="background_circle_color">#f222</item>
<item name="tabs_background">#ff1e1e1e</item> <item name="tabs_background">#ff1e1e1e</item>
<item name="now_playing_marker">@android:color/holo_blue_dark</item> <item name="now_playing_marker">@android:color/holo_blue_dark</item>
<item name="controls_normal">#fff5f5f5</item> <item name="controls_normal">#fff5f5f5</item>

6
res/values/vib_attrs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<declare-styleable name="VanillaImageButton">
<attr name="backgroundCircleColor" format="color" />
</declare-styleable>
</resources>

26
src/ch/blinkenlights/android/vanilla/VanillaImageButton.java
View File

@ -23,14 +23,17 @@ import android.content.res.TypedArray;
import android.util.AttributeSet; import android.util.AttributeSet;
import android.util.TypedValue; import android.util.TypedValue;
import android.widget.ImageButton; import android.widget.ImageButton;
import android.graphics.Canvas;
import android.graphics.Color; import android.graphics.Color;
import android.graphics.ColorFilter; import android.graphics.ColorFilter;
import android.graphics.Paint;
public class VanillaImageButton extends ImageButton { public class VanillaImageButton extends ImageButton {
private Context mContext; private Context mContext;
private static int mNormalTint; private static int mNormalTint;
private static int mActiveTint; private static int mActiveTint;
private int mCircleColor;
public VanillaImageButton(Context context) { public VanillaImageButton(Context context) {
this(context, null); this(context, null);
@ -45,6 +48,13 @@ public class VanillaImageButton extends ImageButton {
mContext = context; mContext = context;
mNormalTint = fetchAttrColor(R.attr.controls_normal); mNormalTint = fetchAttrColor(R.attr.controls_normal);
mActiveTint = fetchAttrColor(R.attr.controls_active); mActiveTint = fetchAttrColor(R.attr.controls_active);
if (attrs != null) {
TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.VanillaImageButton, 0, 0);
mCircleColor = a.getColor(R.styleable.VanillaImageButton_backgroundCircleColor, 0);
a.recycle();
}
updateImageTint(-1); updateImageTint(-1);
} }
@ -54,6 +64,22 @@ public class VanillaImageButton extends ImageButton {
this.updateImageTint(resId); this.updateImageTint(resId);
} }
@Override
public void onDraw(Canvas canvas) {
if (mCircleColor != 0) {
// Draw a circle on the background, but only
// if the color is set.
final int x = getWidth() / 2;
final int y = getHeight() / 2;
final float r = (x > y ? y : x);
Paint paint = new Paint();
paint.setColor(mCircleColor);
paint.setAntiAlias(true);
canvas.drawCircle(x, y, r*0.90f, paint);
}
super.onDraw(canvas);
}
private void updateImageTint(int resHint) { private void updateImageTint(int resHint) {
int filterColor = mNormalTint; int filterColor = mNormalTint;