mirrors/NewPipe
1
0
Fork 0
mirror of https://github.com/TeamNewPipe/NewPipe synced 2024-11-13 05:20:03 +00:00
Code Issues Releases Wiki Activity

Align and enable autosizing for the app name text view in drawer header

Browse Source 
- Use a proper drop up/down arrow icon.
- Move selected service views for better visibility.
- Show the selected service icon next to its name.
- Add a subtle fade background to the service name/icon for better
readability.
This commit is contained in:
Mauricio Colli 2020-03-22 16:26:53 -03:00
parent c6eaed76f3
commit 10faa45182
No known key found for this signature in database
GPG Key ID: F200BFD6F29DDD85
17 changed files with 159 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/src/main/java/org/schabi/newpipe/MainActivity.java
View File

@ -83,11 +83,12 @@ public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
public static final boolean DEBUG = !BuildConfig.BUILD_TYPE.equals("release");
private ActionBarDrawerToggle toggle = null;
private DrawerLayout drawer = null;
private NavigationView drawerItems = null;
private TextView headerServiceView = null;
private Button toggleServiceButton = null;
private ActionBarDrawerToggle toggle;
private DrawerLayout drawer;
private NavigationView drawerItems;
private ImageView headerServiceIcon;
private TextView headerServiceView;
private Button toggleServiceButton;
private boolean servicesShown = false;
private ImageView serviceArrow;
@ -285,11 +286,10 @@ public class MainActivity extends AppCompatActivity {
View hView = navigationView.getHeaderView(0);
serviceArrow = hView.findViewById(R.id.drawer_arrow);
headerServiceIcon = hView.findViewById(R.id.drawer_header_service_icon);
headerServiceView = hView.findViewById(R.id.drawer_header_service_view);
toggleServiceButton = hView.findViewById(R.id.drawer_header_action_button);
toggleServiceButton.setOnClickListener(view -> {
toggleServices();
});
toggleServiceButton.setOnClickListener(view -> toggleServices());
}
private void toggleServices() {
@ -299,7 +299,6 @@ public class MainActivity extends AppCompatActivity {
drawerItems.getMenu().removeGroup(R.id.menu_tabs_group);
drawerItems.getMenu().removeGroup(R.id.menu_options_about_group);
if(servicesShown) {
showServices();
} else {
@ -312,7 +311,7 @@ public class MainActivity extends AppCompatActivity {
}
private void showServices() {
serviceArrow.setImageResource(R.drawable.ic_arrow_up_white);
serviceArrow.setImageResource(R.drawable.ic_arrow_drop_up_white_24dp);
for(StreamingService s : NewPipe.getServices()) {
final String title = s.getServiceInfo().getName() +
@ -370,7 +369,7 @@ public class MainActivity extends AppCompatActivity {
}
private void showTabs() throws ExtractionException {
serviceArrow.setImageResource(R.drawable.ic_arrow_down_white);
serviceArrow.setImageResource(R.drawable.ic_arrow_drop_down_white_24dp);
//Tabs
int currentServiceId = ServiceHelper.getSelectedServiceId(this);
@ -428,9 +427,11 @@ public class MainActivity extends AppCompatActivity {
// when the user returns to MainActivity
drawer.closeDrawer(GravityCompat.START, false);
try {
String selectedServiceName = NewPipe.getService(
ServiceHelper.getSelectedServiceId(this)).getServiceInfo().getName();
final int selectedServiceId = ServiceHelper.getSelectedServiceId(this);
final String selectedServiceName = NewPipe.getService(selectedServiceId).getServiceInfo().getName();
headerServiceView.setText(selectedServiceName);
headerServiceIcon.setImageResource(ServiceHelper.getIcon(selectedServiceId));
headerServiceView.post(() -> headerServiceView.setSelected(true));
toggleServiceButton.setContentDescription(
getString(R.string.drawer_header_description) + selectedServiceName);

BIN
app/src/main/res/drawable-hdpi/ic_arrow_down_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 267 B

BIN
app/src/main/res/drawable-hdpi/ic_arrow_up_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 261 B

BIN
app/src/main/res/drawable-mdpi/ic_arrow_down_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 210 B

BIN
app/src/main/res/drawable-mdpi/ic_arrow_up_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 201 B

BIN
app/src/main/res/drawable-xhdpi/ic_arrow_down_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 425 B

BIN
app/src/main/res/drawable-xhdpi/ic_arrow_up_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 415 B

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 470 B

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 458 B

7
app/src/main/res/drawable/drawer_header_bottom_background.xml Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#00000000"
android:startColor="#4D000000"/>
</shape>

9
app/src/main/res/drawable/ic_arrow_drop_down_white_24dp.xml Normal file
View File

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M7,10l5,5 5,-5z" />
</vector>

9
app/src/main/res/drawable/ic_arrow_drop_up_white_24dp.xml Normal file
View File

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M7,14l5,-5 5,5z" />
</vector>

82
app/src/main/res/layout-v21/drawer_header.xml
View File

@ -1,82 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:clickable="true"
android:focusable="true">
<Button
android:id="@+id/drawer_header_action_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/drawer_header_description"
android:background="?android:attr/selectableItemBackground" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:scaleType="centerCrop"
android:src="@drawable/background_header"
android:contentDescription="TODO" />
<ImageView
android:id="@+id/drawer_header_np_nude_view"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:src="@drawable/np_logo_nude_shadow"
android:contentDescription="TODO" />
<TextView
android:id="@+id/drawer_header_np_text_view"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_alignBottom="@id/drawer_header_np_nude_view"
android:layout_alignTop="@id/drawer_header_np_nude_view"
android:layout_toEndOf="@id/drawer_header_np_nude_view"
android:layout_toRightOf="@id/drawer_header_np_nude_view"
android:gravity="center"
android:text="@string/app_name"
android:textSize="30sp"
android:textColor="@color/drawer_header_font_color"
android:textStyle="bold|italic" />
<TextView
android:id="@+id/drawer_header_service_view"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_alignLeft="@id/drawer_header_np_text_view"
android:layout_alignStart="@id/drawer_header_np_text_view"
android:layout_below="@id/drawer_header_np_text_view"
android:layout_toLeftOf="@id/drawer_arrow"
android:layout_marginRight="5dp"
android:text="YouTube"
android:textSize="18sp"
android:textColor="@color/drawer_header_font_color"
android:textStyle="italic"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true" />
<ImageView
android:id="@+id/drawer_arrow"
android:layout_width="30dp"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
android:paddingBottom="20dp"
android:paddingEnd="20dp"
android:paddingRight="20dp"
android:src="@drawable/ic_arrow_down_white"
android:contentDescription="TODO" />
</RelativeLayout>

176
app/src/main/res/layout/drawer_header.xml
View File

@ -1,81 +1,107 @@
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:clickable="true"
android:focusable="true">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="@dimen/drawer_header_height"
android:background="?colorPrimary"
android:nextFocusDown="@+id/drawer_header_action_button">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/background_header"
tools:ignore="ContentDescription" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="@dimen/drawer_header_padding_top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="72dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:gravity="center"
android:orientation="horizontal"
tools:ignore="UseCompoundDrawables">
<ImageView
android:id="@+id/drawer_header_newpipe_icon"
android:layout_width="@dimen/drawer_header_newpipe_icon_size"
android:layout_height="@dimen/drawer_header_newpipe_icon_size"
android:layout_marginEnd="@dimen/drawer_header_newpipe_icon_title_space"
app:srcCompat="@drawable/splash_forground"
tools:ignore="ContentDescription" />
<TextView
android:id="@+id/drawer_header_newpipe_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginEnd="@dimen/drawer_header_newpipe_icon_title_space"
android:ellipsize="end"
android:gravity="start|center_vertical"
android:hyphenationFrequency="full"
android:maxWidth="@dimen/drawer_header_newpipe_title_max_width"
android:maxLines="2"
android:minWidth="@dimen/drawer_header_newpipe_title_min_width"
android:text="@string/app_name"
android:textColor="@color/drawer_header_font_color"
android:textStyle="bold"
app:autoSizeMaxTextSize="@dimen/drawer_header_newpipe_title_max_text_size"
app:autoSizeMinTextSize="@dimen/drawer_header_newpipe_title_min_text_size"
app:autoSizeTextType="uniform" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/drawer_header_bottom_background"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="6dp"
android:paddingRight="6dp">
<ImageView
android:id="@+id/drawer_header_service_icon"
android:layout_width="@dimen/drawer_header_service_icon_size"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:scaleType="fitCenter"
app:tint="@color/drawer_header_font_color"
tools:ignore="ContentDescription"
tools:srcCompat="@drawable/youtube" />
<TextView
android:id="@+id/drawer_header_service_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/drawer_header_font_color"
android:textSize="@dimen/drawer_header_service_title_text_size"
android:textStyle="italic"
tools:text="YouTube" />
<ImageView
android:id="@+id/drawer_arrow"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="4dp"
app:srcCompat="@drawable/ic_arrow_drop_down_white_24dp"
tools:ignore="ContentDescription" />
</LinearLayout>
</LinearLayout>
<Button
android:id="@+id/drawer_header_action_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/selectableItemBackground"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:src="@drawable/background_header"
android:scaleType="centerCrop"
android:contentDescription="TODO" />
<ImageView
android:id="@+id/drawer_header_np_nude_view"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="20dp"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/np_logo_nude_shadow"
android:contentDescription="TODO" />
<TextView
android:id="@+id/drawer_header_np_text_view"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="@string/app_name"
android:layout_toRightOf="@id/drawer_header_np_nude_view"
android:layout_toEndOf="@id/drawer_header_np_nude_view"
android:layout_alignTop="@id/drawer_header_np_nude_view"
android:layout_alignBottom="@id/drawer_header_np_nude_view"
android:gravity="center"
android:textSize="30sp"
android:textColor="@color/drawer_header_font_color"
android:textStyle="bold|italic"/>
<TextView
android:id="@+id/drawer_header_service_view"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="YouTube"
android:layout_below="@id/drawer_header_np_text_view"
android:layout_alignLeft="@id/drawer_header_np_text_view"
android:layout_alignStart="@id/drawer_header_np_text_view"
android:layout_toLeftOf="@id/drawer_arrow"
android:layout_marginRight="5dp"
android:textSize="18sp"
android:textColor="@color/drawer_header_font_color"
android:textStyle="italic"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true" />
<ImageView
android:id="@+id/drawer_arrow"
android:layout_width="30dp"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
android:paddingBottom="20dp"
android:paddingRight="20dp"
android:src="@drawable/ic_arrow_down_white"
android:paddingEnd="20dp"
android:contentDescription="TODO" />
</RelativeLayout>
android:background="?selectableItemBackground"
android:focusable="true" />
</FrameLayout>

6
app/src/main/res/values-v21/dimens.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Menu Drawer Dimensions -->
<dimen name="drawer_header_height">150dp</dimen>
<dimen name="drawer_header_padding_top">36dp</dimen>
</resources>

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

@ -44,7 +44,7 @@
<color name="black_border_color">#25FFFFFF</color>
<!-- Miscellaneous -->
<color name="drawer_header_font_color">#ddffffff</color>
<color name="drawer_header_font_color">#F2FFFFFF</color>
<color name="duration_background_color">#aa000000</color>
<color name="live_duration_background_color">#c8E53935</color>
<color name="playlist_stream_count_background_color">#e6000000</color>

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

@ -1,5 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Menu Drawer Dimensions -->
<dimen name="drawer_header_height">130dp</dimen>
<dimen name="drawer_header_padding_top">16dp</dimen>
<dimen name="drawer_header_newpipe_icon_size">48dp</dimen>
<dimen name="drawer_header_newpipe_icon_title_space">12dp</dimen>
<dimen name="drawer_header_newpipe_title_min_width">120dp</dimen>
<dimen name="drawer_header_newpipe_title_max_width">220dp</dimen>
<dimen name="drawer_header_newpipe_title_min_text_size">18sp</dimen>
<dimen name="drawer_header_newpipe_title_max_text_size">32sp</dimen>
<dimen name="drawer_header_service_icon_size">16dp</dimen>
<dimen name="drawer_header_service_title_text_size">14sp</dimen>
<!-- Video Item Search View Dimensions-->
<!-- Text Size -->
<dimen name="channel_item_detail_title_text_size">16sp</dimen>