Improve notification layouts
This commit is contained in:
parent
2ac71c75c0
commit
18b038d8e4
4 changed files with 250 additions and 43 deletions
17
app/src/main/res/drawable/custom_progress_bar.xml
Normal file
17
app/src/main/res/drawable/custom_progress_bar.xml
Normal 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>
|
|
@ -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>
|
|
@ -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>-->
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue