mirror of
https://github.com/gabehf/tempus.git
synced 2026-03-14 17:56:01 -07:00
fix(widget): refine layouts and progress UX across sizes
Compact (4×1)
- Reduce root vertical padding so the 4×1 cell yields ~56dp of content height.
- Make album art a true square (50×50dp) and center vertically; keeps edges
clear of rounded corners.
- Tighten timing block: 2dp progress bar; 10sp labels with no extra font
padding; prevents elapsed/total text from slipping below the background.
- Wrap album art in a 50×50dp FrameLayout with a new 6dp-radius background
drawable; soft corners while remaining visually smaller than the widget body.
- Mirror the same structure in the preview layout so Studio preview matches
on-device rendering.
(app/src/main/res/layout/widget_layout_compact.xml,
app/src/main/res/drawable/widget_album_art_bg.xml)
Large Short (4×2)
- Wrap album art in a fixed 90dp square container and enforce a true square
crop via centerCrop.
- Tighten vertical spacing: thinner progress bar, closer timing row, controls
shifted down for better balance.
- Keep album/timing text to the left of the controls but retune spacing so the
stack stays fully inside the widget bounds.
Large (4×3 and up)
- Restructure to a vertical stack: header row (album art + text), full-width
progress bar, timing row, primary controls, then secondary controls.
- Lock album art to a 150dp square; progress bar spans the widget beneath the
header to match the new visual hierarchy.
Based-on: cd28ee0764
Co-authored-by: The Firehawk <firehawk@opayq.net>
Co-Authored-By: Mücahit Kaya <kaya-mucahit@outlook.com>
Co-Authored-By: Firehawk <firehawk@opayq.net>
This commit is contained in:
mucahit-kaya
parent
b79cfa4af0
commit
35af1f9038
17 changed files with 964 additions and 149 deletions
|
|
@ -1,117 +1,189 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:id="@+id/root"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="112dp"
|
||||
android:padding="12dp"
|
||||
android:layout_height="match_parent"
|
||||
android:minHeight="200dp"
|
||||
android:orientation="vertical"
|
||||
android:padding="16dp"
|
||||
android:background="@drawable/widget_bg">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/album_art"
|
||||
android:layout_width="96dp"
|
||||
android:layout_height="match_parent"
|
||||
android:scaleType="centerCrop"
|
||||
android:contentDescription="@string/widget_content_desc_album_art"/>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/texts"
|
||||
android:orientation="vertical"
|
||||
android:layout_toRightOf="@id/album_art"
|
||||
android:layout_toEndOf="@id/album_art"
|
||||
android:layout_toLeftOf="@id/controls"
|
||||
android:layout_toStartOf="@id/controls"
|
||||
android:id="@+id/header"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_centerVertical="true"
|
||||
android:layout_marginStart="12dp">
|
||||
android:orientation="horizontal"
|
||||
android:baselineAligned="false">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/title"
|
||||
android:maxLines="2"
|
||||
android:ellipsize="end"
|
||||
android:textStyle="bold"
|
||||
android:textSize="16sp"
|
||||
android:textColor="@color/widget_title"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"/>
|
||||
|
||||
<TextView
|
||||
android:id="@+id/subtitle"
|
||||
android:maxLines="1"
|
||||
android:ellipsize="end"
|
||||
android:textSize="13sp"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"/>
|
||||
|
||||
<ProgressBar
|
||||
android:id="@+id/progress"
|
||||
style="?android:attr/progressBarStyleHorizontal"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="4dp"
|
||||
android:layout_marginTop="6dp"
|
||||
android:indeterminate="false"
|
||||
android:max="1000"
|
||||
android:progress="0"
|
||||
android:progressBackgroundTint="@color/widget_subtitle"
|
||||
android:progressTint="@color/widget_icon_tint"/>
|
||||
<ImageView
|
||||
android:id="@+id/album_art"
|
||||
android:layout_width="150dp"
|
||||
android:layout_height="150dp"
|
||||
android:scaleType="centerCrop"
|
||||
android:contentDescription="@string/widget_content_desc_album_art" />
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/timing"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="4dp"
|
||||
android:orientation="horizontal">
|
||||
android:id="@+id/text_container"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="match_parent"
|
||||
android:layout_marginStart="16dp"
|
||||
android:layout_weight="1"
|
||||
android:orientation="vertical"
|
||||
android:gravity="center_vertical">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/time_elapsed"
|
||||
android:layout_width="0dp"
|
||||
android:id="@+id/title"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_weight="1"
|
||||
android:text="@string/widget_time_elapsed_placeholder"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:textSize="12sp"/>
|
||||
android:singleLine="true"
|
||||
android:ellipsize="marquee"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:scrollHorizontally="true"
|
||||
android:textStyle="bold"
|
||||
android:textSize="18sp"
|
||||
android:textColor="@color/widget_title"
|
||||
android:includeFontPadding="false"
|
||||
android:freezesText="true" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/time_total"
|
||||
android:layout_width="0dp"
|
||||
android:id="@+id/subtitle"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_weight="1"
|
||||
android:gravity="end"
|
||||
android:text="@string/widget_time_duration_placeholder"
|
||||
android:layout_marginTop="6dp"
|
||||
android:singleLine="true"
|
||||
android:ellipsize="marquee"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:scrollHorizontally="true"
|
||||
android:textSize="14sp"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:textSize="12sp"/>
|
||||
android:includeFontPadding="false"
|
||||
android:freezesText="true" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/album"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="2dp"
|
||||
android:singleLine="true"
|
||||
android:ellipsize="marquee"
|
||||
android:marqueeRepeatLimit="marquee_forever"
|
||||
android:scrollHorizontally="true"
|
||||
android:textSize="13sp"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:includeFontPadding="false"
|
||||
android:freezesText="true"
|
||||
android:visibility="invisible" />
|
||||
</LinearLayout>
|
||||
</LinearLayout>
|
||||
|
||||
<ProgressBar
|
||||
android:id="@+id/progress"
|
||||
style="?android:attr/progressBarStyleHorizontal"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="6dp"
|
||||
android:layout_marginTop="16dp"
|
||||
android:indeterminate="false"
|
||||
android:max="1000"
|
||||
android:progress="0"
|
||||
android:progressBackgroundTint="@color/widget_subtitle"
|
||||
android:progressTint="@color/widget_icon_tint" />
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/timing"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="6dp"
|
||||
android:orientation="horizontal">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/time_elapsed"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_weight="1"
|
||||
android:text="@string/widget_time_elapsed_placeholder"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:textSize="12sp" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/time_total"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_weight="1"
|
||||
android:gravity="end"
|
||||
android:text="@string/widget_time_duration_placeholder"
|
||||
android:textColor="@color/widget_subtitle"
|
||||
android:textSize="12sp" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/controls"
|
||||
android:layout_alignParentRight="true"
|
||||
android:layout_alignParentEnd="true"
|
||||
android:orientation="horizontal"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="12dp"
|
||||
android:layout_marginBottom="4dp"
|
||||
android:gravity="center"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="match_parent">
|
||||
android:orientation="horizontal">
|
||||
|
||||
<ImageButton android:id="@+id/btn_prev"
|
||||
android:layout_width="44dp" android:layout_height="44dp"
|
||||
<ImageButton
|
||||
android:id="@+id/btn_prev"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="52dp"
|
||||
android:layout_weight="1"
|
||||
android:background="@android:color/transparent"
|
||||
android:src="@drawable/ic_skip_previous"
|
||||
android:contentDescription="@string/widget_content_desc_prev"
|
||||
android:tint="@color/widget_icon_tint"/>
|
||||
android:src="@drawable/ic_skip_previous"
|
||||
android:tint="@color/widget_icon_tint" />
|
||||
|
||||
<ImageButton android:id="@+id/btn_play_pause"
|
||||
android:layout_width="48dp" android:layout_height="48dp"
|
||||
<ImageButton
|
||||
android:id="@+id/btn_play_pause"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="56dp"
|
||||
android:layout_marginStart="6dp"
|
||||
android:layout_marginEnd="6dp"
|
||||
android:layout_weight="1"
|
||||
android:background="@android:color/transparent"
|
||||
android:src="@drawable/ic_play"
|
||||
android:contentDescription="@string/widget_content_desc_play_pause"
|
||||
android:tint="@color/widget_icon_tint"/>
|
||||
android:src="@drawable/ic_play"
|
||||
android:tint="@color/widget_icon_tint" />
|
||||
|
||||
<ImageButton android:id="@+id/btn_next"
|
||||
android:layout_width="44dp" android:layout_height="44dp"
|
||||
<ImageButton
|
||||
android:id="@+id/btn_next"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="52dp"
|
||||
android:layout_weight="1"
|
||||
android:background="@android:color/transparent"
|
||||
android:src="@drawable/ic_skip_next"
|
||||
android:contentDescription="@string/widget_content_desc_next"
|
||||
android:tint="@color/widget_icon_tint"/>
|
||||
android:src="@drawable/ic_skip_next"
|
||||
android:tint="@color/widget_icon_tint" />
|
||||
</LinearLayout>
|
||||
</RelativeLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/controls_secondary"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="horizontal"
|
||||
android:gravity="center">
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/btn_shuffle"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="44dp"
|
||||
android:layout_weight="1"
|
||||
android:background="@android:color/transparent"
|
||||
android:contentDescription="@string/widget_content_desc_shuffle"
|
||||
android:src="@drawable/ic_shuffle"
|
||||
android:tint="@color/widget_icon_tint" />
|
||||
|
||||
<ImageButton
|
||||
android:id="@+id/btn_repeat"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="44dp"
|
||||
android:layout_marginStart="6dp"
|
||||
android:layout_weight="1"
|
||||
android:background="@android:color/transparent"
|
||||
android:contentDescription="@string/widget_content_desc_repeat"
|
||||
android:src="@drawable/ic_repeat"
|
||||
android:tint="@color/widget_icon_tint" />
|
||||
</LinearLayout>
|
||||
|
||||
</LinearLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue