Improve notification layouts

This commit is contained in:
Mauricio Colli 2017-04-17 01:20:14 -03:00
parent 2ac71c75c0
commit 18b038d8e4
4 changed files with 250 additions and 43 deletions

View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<solid android:color="@color/gray"/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<solid android:color="@color/middle_gray"/>
</shape>
</clip>
</item>
</layer-list>

View file

@ -1,16 +1,17 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/notificationContent" android:layout_width="match_parent"
android:layout_width="fill_parent" android:layout_height="64dp"
android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools">
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="@color/background_notification_color">
<LinearLayout <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/notificationContent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="64dp" android:layout_height="64dp"
android:background="@color/background_notification_color"
android:clickable="true"
android:gravity="center_vertical" android:gravity="center_vertical"
android:orientation="horizontal"> android:orientation="horizontal">
@ -18,65 +19,102 @@
android:id="@+id/notificationCover" android:id="@+id/notificationCover"
android:layout_width="64dp" android:layout_width="64dp"
android:layout_height="64dp" android:layout_height="64dp"
android:scaleType="centerCrop"
android:src="@drawable/dummy_thumbnail" android:src="@drawable/dummy_thumbnail"
android:scaleType="centerCrop"/> tools:ignore="ContentDescription"/>
<LinearLayout <LinearLayout
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="8dp" android:layout_marginLeft="8dp"
android:layout_weight="1" android:layout_weight="1"
android:orientation="vertical" > android:orientation="vertical"
tools:ignore="RtlHardcoded">
<TextView <TextView
android:id="@+id/notificationSongName" android:id="@+id/notificationSongName"
style="@android:style/TextAppearance.StatusBar.EventContent.Title" style="@android:style/TextAppearance.StatusBar.EventContent.Title"
android:layout_width="wrap_content" android:layout_width="match_parent"
android:ellipsize="end"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:ellipsize="marquee" android:maxLines="1"
android:singleLine="true" android:textSize="14sp"
android:text="title" /> tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
<TextView <TextView
android:id="@+id/notificationArtist" android:id="@+id/notificationArtist"
android:layout_width="match_parent"
style="@android:style/TextAppearance.StatusBar.EventContent" style="@android:style/TextAppearance.StatusBar.EventContent"
android:layout_width="wrap_content" android:ellipsize="end"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:ellipsize="marquee" android:maxLines="1"
android:singleLine="true" android:textSize="12sp"
android:text="artist" /> tools:text="Duis posuere arcu condimentum lobortis mattis."/>
</LinearLayout> </LinearLayout>
<ImageButton <ImageButton
android:id="@+id/notificationRewind" android:id="@+id/notificationRepeat"
android:layout_width="40dp" android:layout_width="40dp"
android:layout_height="40dp" android:layout_height="match_parent"
android:layout_margin="5dp" android:background="#00000000"
android:background="#00ffffff"
android:clickable="true" android:clickable="true"
android:scaleType="fitXY" android:padding="5dp"
android:src="@drawable/ic_action_av_fast_rewind" /> android:scaleType="fitCenter"
android:src="@drawable/ic_repeat_white"
tools:ignore="ContentDescription"/>
<ImageButton
android:id="@+id/notificationFRewind"
android:layout_width="45dp"
android:layout_height="match_parent"
android:background="#00000000"
android:clickable="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_action_av_fast_rewind"
tools:ignore="ContentDescription"/>
<ImageButton <ImageButton
android:id="@+id/notificationPlayPause" android:id="@+id/notificationPlayPause"
android:layout_width="40dp" android:layout_width="45dp"
android:layout_height="40dp" android:layout_height="match_parent"
android:layout_margin="5dp" android:background="#00000000"
android:background="#00ffffff"
android:clickable="true" android:clickable="true"
android:scaleType="fitXY" android:src="@drawable/ic_pause_white"
android:src="@drawable/ic_pause_white" /> tools:ignore="ContentDescription"/>
<ImageButton
android:id="@+id/notificationFForward"
android:layout_width="45dp"
android:layout_height="match_parent"
android:background="#00000000"
android:clickable="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_action_av_fast_forward"
tools:ignore="ContentDescription"/>
<ImageButton <ImageButton
android:id="@+id/notificationStop" android:id="@+id/notificationStop"
android:layout_width="40dp" android:layout_width="40dp"
android:layout_height="40dp" android:layout_height="40dp"
android:layout_margin="5dp" android:layout_marginLeft="5dp"
android:background="#00ffffff" android:background="#00000000"
android:clickable="true" android:clickable="true"
android:scaleType="fitXY" android:padding="5dp"
android:src="@drawable/ic_close_white" /> android:scaleType="fitCenter"
android:src="@drawable/ic_close_white"
tools:ignore="ContentDescription,RtlHardcoded"/>
</LinearLayout> </LinearLayout>
<ProgressBar
</RelativeLayout> android:id="@+id/notificationProgressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_gravity="bottom"
android:layout_marginLeft="64dp"
android:progressDrawable="@drawable/custom_progress_bar"
tools:ignore="RtlHardcoded"
tools:progress="52"/>
</FrameLayout>

View file

@ -1,4 +1,153 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/notificationContent"
android:layout_width="match_parent"
android:layout_height="128dp"
android:background="@color/background_notification_color"
android:clickable="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/notificationCover"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_alignParentLeft="true"
android:scaleType="centerCrop"
android:src="@drawable/dummy_thumbnail"
tools:ignore="ContentDescription,RtlHardcoded"/>
<ImageButton
android:id="@+id/notificationStop"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:background="#00000000"
android:clickable="true"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_close_white"
tools:ignore="ContentDescription,RtlHardcoded"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="@+id/notificationStop"
android:layout_toRightOf="@+id/notificationCover"
android:orientation="vertical"
android:padding="8dp"
tools:ignore="RtlHardcoded,RtlSymmetry">
<TextView
android:id="@+id/notificationSongName"
style="@android:style/TextAppearance.StatusBar.EventContent.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textSize="14sp"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
<TextView
android:id="@+id/notificationArtist"
style="@android:style/TextAppearance.StatusBar.EventContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textSize="12sp"
tools:text="Duis posuere arcu condimentum lobortis mattis."/>
</LinearLayout>
<ProgressBar
android:id="@+id/notificationProgressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_alignTop="@+id/notificationControls"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_toRightOf="@+id/notificationCover"
android:progressDrawable="@drawable/custom_progress_bar"
tools:ignore="RtlHardcoded"
tools:progress="52"/>
<RelativeLayout
android:id="@+id/notificationControls"
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingTop="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@+id/notificationCover"
android:orientation="horizontal"
tools:ignore="RtlHardcoded">
<ImageButton
android:id="@+id/notificationRepeat"
android:layout_width="45dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#00000000"
android:clickable="true"
android:paddingBottom="4dp"
android:paddingLeft="11dp"
android:paddingRight="11dp"
android:paddingTop="4dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_repeat_white"
tools:ignore="ContentDescription"/>
<ImageButton
android:id="@+id/notificationFRewind"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@+id/notificationPlayPause"
android:background="#00000000"
android:clickable="true"
android:padding="2dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_action_av_fast_rewind"
tools:ignore="ContentDescription"/>
<ImageButton
android:id="@+id/notificationPlayPause"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@+id/notificationFForward"
android:background="#00000000"
android:padding="2dp"
android:clickable="true"
android:scaleType="fitCenter"
android:src="@drawable/ic_pause_white"
tools:ignore="ContentDescription"/>
<ImageButton
android:id="@+id/notificationFForward"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:background="#00000000"
android:clickable="true"
android:padding="2dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_action_av_fast_forward"
tools:ignore="ContentDescription"/>
</RelativeLayout>
</RelativeLayout>
<!--
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/notificationContent" android:id="@+id/notificationContent"
android:layout_width="fill_parent" android:layout_width="fill_parent"
@ -93,4 +242,4 @@
android:layout_alignParentLeft="true" /> android:layout_alignParentLeft="true" />
</RelativeLayout> </RelativeLayout>
</RelativeLayout> </RelativeLayout>-->

View file

@ -29,20 +29,23 @@
<TextView <TextView
android:id="@+id/notificationSongName" android:id="@+id/notificationSongName"
style="@android:style/TextAppearance.StatusBar.EventContent.Title" style="@android:style/TextAppearance.StatusBar.EventContent.Title"
android:layout_width="wrap_content" android:layout_width="match_parent"
android:ellipsize="end"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:ellipsize="marquee"
android:maxLines="1" android:maxLines="1"
tools:text="a long, long, long, long, long title"/> android:textSize="14sp"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec aliquam augue, eget cursus est. Ut id tristique enim, ut scelerisque tellus. Sed ultricies ipsum non mauris ultricies, commodo malesuada velit porta."/>
<TextView <TextView
android:id="@+id/notificationArtist" android:id="@+id/notificationArtist"
android:layout_width="match_parent"
style="@android:style/TextAppearance.StatusBar.EventContent" style="@android:style/TextAppearance.StatusBar.EventContent"
android:layout_width="wrap_content" android:ellipsize="end"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:ellipsize="marquee"
android:maxLines="1" android:maxLines="1"
tools:text="a long, long artist"/> android:textSize="12sp"
tools:text="Duis posuere arcu condimentum lobortis mattis."/>
</LinearLayout> </LinearLayout>
<ImageButton <ImageButton