SecT0uch
/
Kore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Redesign remote buttons (by samfischer)

This commit is contained in:
Synced Synapse 2015-03-30 23:03:54 +01:00
parent c6dfce29a4
commit 37a6b3376b
20 changed files with 110 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/src/main/java/org/xbmc/kore/ui/RemoteFragment.java
View File

@ -15,6 +15,15 @@
*/
package org.xbmc.kore.ui;
import android.annotation.TargetApi;
import android.content.res.ColorStateList;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.BitmapFactory;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
@ -165,6 +174,8 @@ public class RemoteFragment extends Fragment
setupNoRepeatButton(osdButton, new Input.ExecuteAction(Input.ExecuteAction.OSD), null);
setupNoRepeatButton(contextButton, new Input.ExecuteAction(Input.ExecuteAction.CONTEXTMENU), null);
adjustRemoteButtons();
// // Padd main content view to account for bottom system bar
// UIUtils.setPaddingForSystemBars(getActivity(), root, false, false, true);
@ -185,6 +196,44 @@ public class RemoteFragment extends Fragment
// action.execute(hostManager.getConnection(), defaultActionCallback, callbackHandler);
// }
@TargetApi(21)
private void adjustRemoteButtons() {
Resources.Theme theme = getActivity().getTheme();
TypedArray styledAttributes = theme.obtainStyledAttributes(new int[] {
R.attr.remoteButtonColorFilter,
R.attr.contentBackgroundColor});
// R.attr.remoteBackgroundColorFilter});
int remoteButtonsColor = styledAttributes.getColor(0, R.color.white),
remoteBackgroundColor = styledAttributes.getColor(1, R.color.dark_content_background_dim_70pct);
styledAttributes.recycle();
leftButton.setColorFilter(remoteButtonsColor);
rightButton.setColorFilter(remoteButtonsColor);
upButton.setColorFilter(remoteButtonsColor);
downButton.setColorFilter(remoteButtonsColor);
selectButton.setColorFilter(remoteButtonsColor);
backButton.setColorFilter(remoteButtonsColor);
infoButton.setColorFilter(remoteButtonsColor);
osdButton.setColorFilter(remoteButtonsColor);
contextButton.setColorFilter(remoteButtonsColor);
// On ICS the remote background isn't shown as the tinting isn't supported
//int backgroundResourceId = R.drawable.remote_background_square_black_alpha;
int backgroundResourceId = R.drawable.remote_background_square_black;
if (Utils.isLollipopOrLater()) {
remotePanel.setBackgroundTintList(ColorStateList.valueOf(remoteBackgroundColor));
remotePanel.setBackgroundResource(backgroundResourceId);
} else if (Utils.isJellybeanOrLater()) {
BitmapDrawable background = new BitmapDrawable(getResources(),
BitmapFactory.decodeResource(getResources(), backgroundResourceId));
background.setColorFilter(new PorterDuffColorFilter(remoteBackgroundColor, PorterDuff.Mode.SRC_IN));
remotePanel.setBackground(background);
}
}
@Override
public void onActivityCreated (Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

BIN
app/src/main/res/drawable-xxhdpi/remote_back_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_background_square_black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_background_square_black_alpha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_codec_black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_codec_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_context_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_down_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 995 B

BIN
app/src/main/res/drawable-xxhdpi/remote_info_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 972 B

BIN
app/src/main/res/drawable-xxhdpi/remote_left_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_menu_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1010 B

BIN
app/src/main/res/drawable-xxhdpi/remote_right_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_select_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
app/src/main/res/drawable-xxhdpi/remote_up_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

15
app/src/main/res/layout-land/fragment_remote.xml
View File

@ -19,7 +19,8 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
android:orientation="horizontal"
android:baselineAligned="false">
<!-- For when nothing is playing or something not recognized is playing -->
<RelativeLayout
@ -69,6 +70,7 @@
android:layout_height="wrap_content"
android:layout_below="@id/art"
android:layout_alignLeft="@id/art"
android:layout_alignStart="@id/art"
style="@style/TextAppearance.Media.Remote.Title"
android:background="?attr/contentBackgroundColor"/>
<TextView
@ -77,6 +79,7 @@
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_alignLeft="@id/title"
android:layout_alignStart="@id/title"
style="@style/TextAppearance.Media.Remote.Details"
android:background="?attr/contentBackgroundColor"/>
<LinearLayout
@ -85,6 +88,7 @@
android:layout_height="@dimen/default_icon_size"
android:layout_below="@id/details"
android:layout_alignLeft="@id/details"
android:layout_alignStart="@id/details"
android:orientation="horizontal"
style="@style/ButtonBar"
android:background="?attr/contentBackgroundColor">
@ -120,7 +124,8 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/remote_content_hmargin"
android:paddingTop="@dimen/remote_page_indicator_height"
android:layout_marginEnd="@dimen/remote_content_hmargin"
android:layout_marginTop="@dimen/remote_page_indicator_height"
android:gravity="center_horizontal">
<ImageView
@ -136,6 +141,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/context"
android:layout_toEndOf="@id/context"
android:layout_alignTop="@id/context"
android:src="?attr/iconUp"
android:contentDescription="@string/up"/>
@ -144,6 +150,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/up"
android:layout_toEndOf="@id/up"
android:layout_alignTop="@id/context"
android:src="?attr/iconInfo"
android:contentDescription="@string/info"/>
@ -160,6 +167,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/left"
android:layout_toEndOf="@id/left"
android:layout_alignTop="@id/left"
android:src="?attr/iconSelect"
android:contentDescription="@string/select"/>
@ -168,6 +176,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/select"
android:layout_toEndOf="@id/select"
android:layout_alignTop="@id/left"
android:src="?attr/iconRight"
android:contentDescription="@string/right"/>
@ -184,6 +193,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/back"
android:layout_toEndOf="@id/back"
android:layout_alignTop="@id/back"
android:src="?attr/iconDown"
android:contentDescription="@string/down"/>
@ -192,6 +202,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/down"
android:layout_toEndOf="@id/down"
android:layout_alignTop="@id/back"
android:src="?attr/iconMenu"
android:contentDescription="@string/osd"/>

18
app/src/main/res/layout/fragment_remote.xml
View File

@ -38,13 +38,15 @@
android:layout_height="@dimen/remote_poster_height"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:scaleType="centerCrop"/>
android:scaleType="centerCrop"
android:contentDescription="@string/poster"/>
<LinearLayout
android:id="@+id/media_button_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/default_icon_size"
android:layout_toRightOf="@id/art"
android:layout_toEndOf="@id/art"
android:layout_alignBottom="@id/art"
android:orientation="horizontal"
style="@style/ButtonBar"
@ -80,6 +82,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/art"
android:layout_toEndOf="@id/art"
android:layout_alignTop="@id/art"
style="@style/TextAppearance.Media.Remote.Title"
android:background="?attr/contentBackgroundColor"/>
@ -88,6 +91,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/art"
android:layout_toEndOf="@id/art"
android:layout_below="@id/title"
android:layout_above="@id/media_button_bar"
style="@style/TextAppearance.Media.Remote.Details"
@ -146,11 +150,12 @@
<RelativeLayout
android:id="@+id/remote"
android:layout_width="match_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_bar"
android:layout_marginBottom="@dimen/small_padding"
android:gravity="center_horizontal">
android:layout_marginBottom="@dimen/default_padding"
android:layout_centerHorizontal="true">
<!--android:background="?attr/contentBackgroundColor"-->
<ImageView
android:id="@+id/context"
@ -165,6 +170,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/context"
android:layout_toEndOf="@id/context"
android:layout_alignTop="@id/context"
android:src="?attr/iconUp"
android:contentDescription="@string/up"/>
@ -173,6 +179,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/up"
android:layout_toEndOf="@id/up"
android:layout_alignTop="@id/context"
android:src="?attr/iconInfo"
android:contentDescription="@string/info"/>
@ -189,6 +196,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/left"
android:layout_toEndOf="@id/left"
android:layout_alignTop="@id/left"
android:src="?attr/iconSelect"
android:contentDescription="@string/select"/>
@ -197,6 +205,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/select"
android:layout_toEndOf="@id/select"
android:layout_alignTop="@id/left"
android:src="?attr/iconRight"
android:contentDescription="@string/right"/>
@ -213,6 +222,7 @@
android:layout_width="@dimen/remote_icon_size"
android:layout_height="@dimen/remote_icon_size"
android:layout_toRightOf="@id/back"
android:layout_toEndOf="@id/back"
android:layout_alignTop="@id/back"
android:src="?attr/iconDown"
android:contentDescription="@string/down"/>

4
app/src/main/res/values-sw600dp/dimens.xml
View File

@ -17,9 +17,9 @@
<resources>
<dimen name="wizard_title">216dp</dimen>
<dimen name="remote_icon_size">144dp</dimen>
<dimen name="remote_icon_size">126dp</dimen>
<dimen name="remote_poster_width">110dp</dimen>
<dimen name="remote_poster_width">96dp</dimen>
<dimen name="remote_poster_height">162dp</dimen>
<dimen name="now_playing_poster_width">140dp</dimen>

3
app/src/main/res/values/attr.xml
View File

@ -33,6 +33,9 @@
<attr name="drawerBackgroundColor" format="reference|color" />
<attr name="remoteButtonColorFilter" format="reference|color" />
<!--<attr name="remoteBackgroundColorFilter" format="reference|color" />-->
<!-- Icons -->
<attr name="iconHosts" format="reference" />
<attr name="iconRemote" format="reference" />

2
app/src/main/res/values/dimens.xml
View File

@ -37,7 +37,7 @@
<dimen name="card_corner_radius">2dp</dimen>
<dimen name="default_card_elevation">2dp</dimen>
<dimen name="remote_icon_size">96dp</dimen>
<dimen name="remote_icon_size">84dp</dimen>
<dimen name="remote_small_icon_paddding">48dp</dimen>
<dimen name="text_size_small">12sp</dimen>

38
app/src/main/res/values/themes.xml
View File

@ -65,6 +65,9 @@
<item name="separatorColor">@color/dark_separator</item>
<item name="remoteButtonColorFilter">@color/white</item>
<!--<item name="remoteBackgroundColorFilter">@color/dark_content_background</item>-->
<!-- Icons -->
<item name="iconInfo">@drawable/remote_info_white</item>
<item name="iconBack">@drawable/remote_back_white</item>
@ -170,17 +173,30 @@
<item name="separatorColor">@color/light_separator</item>
<!-- Icons -->
<item name="iconInfo">@drawable/remote_info_black</item>
<item name="iconBack">@drawable/remote_back_black</item>
<item name="iconMenu">@drawable/remote_menu_black</item>
<item name="iconContext">@drawable/remote_context_black</item>
<item name="remoteButtonColorFilter">@color/black_dim_54pct</item>
<!--<item name="remoteBackgroundColorFilter">@color/light_content_background</item>-->
<item name="iconLeft">@drawable/remote_left_black</item>
<item name="iconRight">@drawable/remote_right_black</item>
<item name="iconUp">@drawable/remote_up_black</item>
<item name="iconDown">@drawable/remote_down_black</item>
<item name="iconSelect">@drawable/remote_select_black</item>
<!-- Icons, same for all themes, will be colored dynamically -->
<item name="iconInfo">@drawable/remote_info_white</item>
<item name="iconBack">@drawable/remote_back_white</item>
<item name="iconMenu">@drawable/remote_menu_white</item>
<item name="iconContext">@drawable/remote_context_white</item>
<item name="iconLeft">@drawable/remote_left_white</item>
<item name="iconRight">@drawable/remote_right_white</item>
<item name="iconUp">@drawable/remote_up_white</item>
<item name="iconDown">@drawable/remote_down_white</item>
<item name="iconSelect">@drawable/remote_select_white</item>
<!--<item name="iconInfo">@drawable/remote_info_black</item>-->
<!--<item name="iconBack">@drawable/remote_back_black</item>-->
<!--<item name="iconMenu">@drawable/remote_menu_black</item>-->
<!--<item name="iconContext">@drawable/remote_context_black</item>-->
<!--<item name="iconLeft">@drawable/remote_left_black</item>-->
<!--<item name="iconRight">@drawable/remote_right_black</item>-->
<!--<item name="iconUp">@drawable/remote_up_black</item>-->
<!--<item name="iconDown">@drawable/remote_down_black</item>-->
<!--<item name="iconSelect">@drawable/remote_select_black</item>-->
<item name="iconHosts">@drawable/ic_phonelink_black_24dp</item>
<item name="iconRemote">@drawable/ic_games_black_24dp</item>
@ -255,6 +271,7 @@
<!-- Color for the Navigation Drawer -->
<item name="drawerBackgroundColor">@color/blue_grey_drawer_background</item>
<!--<item name="remoteBackgroundColorFilter">@color/blue_grey_content_background</item>-->
<!--<item name="separatorColor">@color/dark_separator</item>-->
</style>
@ -278,6 +295,7 @@
<item name="appTextColorPrimary">@color/solarized_base01</item>
<item name="appTextColorSecondary">@color/solarized_base0</item>
<!--<item name="remoteBackgroundColorFilter">@color/solarized_base3</item>-->
<!--<item name="separatorColor">@color/dark_separator</item>-->
</style>