Add setup styling

This commit is contained in:
Jarne Demeulemeester 2021-05-29 22:02:21 +02:00
parent 812a813e05
commit 805b9687f5
No known key found for this signature in database
GPG key ID: 60884A0C1EBA43E5
10 changed files with 126 additions and 31 deletions

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/neutral_800" />
<corners android:radius="10dp" />
</shape>

View file

@ -34,23 +34,23 @@
</path>
<path
android:pathData="M600.44,350.75a67,67 0,0 1,-22.87 -27.47,8.91 8.91,0 0,1 -1.49,-4.75 7.42,7.42 0,0 1,2.83 -5.94,9.25 9.25,0 0,1 6.09,-2.38c3.16,0 5.94,1.69 8.31,5.05a48.09,48.09 0,0 0,16.34 20.34,40.59 40.59,0 0,0 24,7.58q20.51,0 33.27,-12.62t12.77,-33.12L679.69,159a8.44,8.44 0,0 1,2.67 -6.39,9.56 9.56,0 0,1 6.83,-2.52 9,9 0,0 1,6.68 2.52,8.7 8.7,0 0,1 2.53,6.39v138.4a64.7,64.7 0,0 1,-8.32 32.67,59 59,0 0,1 -23,22.72Q652.42,361 633.7,361A57.21,57.21 0,0 1,600.44 350.75Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M875.46,279.47a8.77,8.77 0,0 1,-6.24 2.53L756.96,282q0,17.82 7.27,31.92a54.91,54.91 0,0 0,20.79 22.28q13.51,8.18 31.93,8.17a54,54 0,0 0,25.54 -5.94,52.7 52.7,0 0,0 18.12,-15.15 10,10 0,0 1,6.24 -2.67,8.14 8.14,0 0,1 7.72,7.72 8.81,8.81 0,0 1,-3 6.24,74.7 74.7,0 0,1 -23.91,19A65.56,65.56 0,0 1,817.25 361q-22.87,0 -40.4,-9.8a69.51,69.51 0,0 1,-27.32 -27.48q-9.79,-17.66 -9.8,-40.83 0,-24.36 9.65,-42.62t25.69,-27.92a65.2,65.2 0,0 1,34.16 -9.65A70,70 0,0 1,842.64 211a65.78,65.78 0,0 1,25.39 24.36q9.81,16 10.1,38A8.07,8.07 0,0 1,875.46 279.47ZM777.3,231.8Q762.6,243.68 758.44,266L859.72,266v-2.38A46.91,46.91 0,0 0,850.8 240.27a48.47,48.47 0,0 0,-18.56 -15.15,54 54,0 0,0 -23,-5.2Q792,219.92 777.3,231.8Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M932.04,355.5a8.92,8.92 0,0 1,-15.3 -6.38v-202a8.91,8.91 0,1 1,17.82 0v202A8.65,8.65 0,0 1,932.04 355.5Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M1000.35,355.5a8.92,8.92 0,0 1,-15.3 -6.38v-202a8.91,8.91 0,1 1,17.82 0v202A8.65,8.65 0,0 1,1000.35 355.5Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M1166.66,206.11a8.7,8.7 0,0 1,2.53 6.39v131q0,23.44 -9.21,40.09a61.58,61.58 0,0 1,-25.54 25.25q-16.34,8.61 -36.83,8.61a96.73,96.73 0,0 1,-23.31 -2.68,61.72 61.72,0 0,1 -18,-7.12q-6.24,-3.87 -6.24,-8.62a17.94,17.94 0,0 1,0.6 -3,8.06 8.06,0 0,1 3,-4.45 7.49,7.49 0,0 1,4.45 -1.49,7.91 7.91,0 0,1 3.56,0.89q19,10.39 36.24,10.4 24.65,0 39.06,-15.44t14.4,-42.18L1151.37,333.38a54.37,54.37 0,0 1,-21.38 20,62.55 62.55,0 0,1 -30.3,7.58q-25.83,0 -39.2,-15.45t-13.37,-41.87L1047.12,212.5a8.91,8.91 0,1 1,17.82 0L1064.94,301q0,21.39 9.36,32.38t29.25,11a48,48 0,0 0,23.32 -6.09,49.88 49.88,0 0,0 17.82,-16 37.44,37.44 0,0 0,6.68 -21.24L1151.37,212.5a9,9 0,0 1,15.29 -6.39Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M1253.98,161.41q-5.21,6.24 -5.2,17.23v30.59h33.27a8.19,8.19 0,0 1,5.79 2.38,8.26 8.26,0 0,1 0,11.88 8.22,8.22 0,0 1,-5.79 2.37L1248.8,225.86L1248.8,349.12a8.91,8.91 0,1 1,-17.82 0L1230.98,225.86h-21.68a7.83,7.83 0,0 1,-5.94 -2.52,8.21 8.21,0 0,1 -2.37,-5.79 8,8 0,0 1,2.37 -6.09,8.33 8.33,0 0,1 5.94,-2.23h21.68L1230.98,178.64q0,-18.7 10.84,-29t29,-10.24a46.1,46.1 0,0 1,15.45 2.52q7.13,2.53 7.12,8.17a8.07,8.07 0,0 1,-2.37 5.94,7.37 7.37,0 0,1 -5.35,2.37 18.81,18.81 0,0 1,-6.53 -1.48,42 42,0 0,0 -10.4,-1.78Q1259.17,155.18 1253.98,161.41ZM1319.8,180.87c-2.19,-1.88 -3.27,-4.61 -3.27,-8.17v-3q0,-5.34 3.41,-8.17t9.36,-2.82q11.88,0 11.88,11v3c0,3.56 -1,6.29 -3.12,8.17s-5.1,2.82 -9.06,2.82S1321.94,182.75 1319.8,180.87ZM1335.39,355.5a8.92,8.92 0,0 1,-15.3 -6.38L1320.09,212.5a8.91,8.91 0,1 1,17.82 0L1337.91,349.12A8.65,8.65 0,0 1,1335.36 355.5Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
<path
android:pathData="M1496.33,218.88q12.92,16.2 12.92,42.92v87.32a8.4,8.4 0,0 1,-2.67 6.38,8.8 8.8,0 0,1 -6.24,2.53 8.64,8.64 0,0 1,-8.91 -8.91L1491.43,262.69q0,-19.31 -9.65,-31.33t-29.85,-12a53.28,53.28 0,0 0,-42.77 21.83,36.24 36.24,0 0,0 -7.13,21.53v86.43a8.91,8.91 0,1 1,-17.82 0L1384.21,216.06a8.91,8.91 0,1 1,17.82 0L1402.03,232.4q8,-12.77 23,-21.24A61.84,61.84 0,0 1,1455.8 202.7Q1483.41,202.7 1496.33,218.88Z"
android:fillColor="#fff"/>
android:fillColor="@color/white"/>
</vector>

View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_variant">
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<solid android:color="@color/primary" />
<corners
android:radius="10dp" />
</shape>
</item>
</ripple>

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/neutral_200" />
<corners android:radius="10dp" />
</shape>

View file

@ -0,0 +1,56 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="1536dp"
android:height="512dp"
android:viewportWidth="1536"
android:viewportHeight="512">
<path
android:pathData="M261.42,201.62c-20.44,0 -86.24,119.29 -76.2,139.43s142.48,19.92 152.4,0S281.86,201.63 261.42,201.62Z">
<aapt:attr name="android:fillColor">
<gradient
android:startY="213.3"
android:startX="110.25"
android:endY="436.09"
android:endX="496.14"
android:type="linear">
<item android:offset="0" android:color="#FFAA5CC3"/>
<item android:offset="1" android:color="#FF00A4DC"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M261.42,23.3C199.83,23.3 1.57,382.73 31.8,443.43s429.34,60 459.24,0S323,23.3 261.42,23.3ZM411.9,390.76c-19.59,39.33 -281.08,39.77 -300.9,0S221.1,115.48 261.45,115.48 431.49,351.42 411.9,390.76Z">
<aapt:attr name="android:fillColor">
<gradient
android:startY="213.3"
android:startX="110.25"
android:endY="436.09"
android:endX="496.14"
android:type="linear">
<item android:offset="0" android:color="#FFAA5CC3"/>
<item android:offset="1" android:color="#FF00A4DC"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M600.44,350.75a67,67 0,0 1,-22.87 -27.47,8.91 8.91,0 0,1 -1.49,-4.75 7.42,7.42 0,0 1,2.83 -5.94,9.25 9.25,0 0,1 6.09,-2.38c3.16,0 5.94,1.69 8.31,5.05a48.09,48.09 0,0 0,16.34 20.34,40.59 40.59,0 0,0 24,7.58q20.51,0 33.27,-12.62t12.77,-33.12L679.69,159a8.44,8.44 0,0 1,2.67 -6.39,9.56 9.56,0 0,1 6.83,-2.52 9,9 0,0 1,6.68 2.52,8.7 8.7,0 0,1 2.53,6.39v138.4a64.7,64.7 0,0 1,-8.32 32.67,59 59,0 0,1 -23,22.72Q652.42,361 633.7,361A57.21,57.21 0,0 1,600.44 350.75Z"
android:fillColor="@color/black"/>
<path
android:pathData="M875.46,279.47a8.77,8.77 0,0 1,-6.24 2.53L756.96,282q0,17.82 7.27,31.92a54.91,54.91 0,0 0,20.79 22.28q13.51,8.18 31.93,8.17a54,54 0,0 0,25.54 -5.94,52.7 52.7,0 0,0 18.12,-15.15 10,10 0,0 1,6.24 -2.67,8.14 8.14,0 0,1 7.72,7.72 8.81,8.81 0,0 1,-3 6.24,74.7 74.7,0 0,1 -23.91,19A65.56,65.56 0,0 1,817.25 361q-22.87,0 -40.4,-9.8a69.51,69.51 0,0 1,-27.32 -27.48q-9.79,-17.66 -9.8,-40.83 0,-24.36 9.65,-42.62t25.69,-27.92a65.2,65.2 0,0 1,34.16 -9.65A70,70 0,0 1,842.64 211a65.78,65.78 0,0 1,25.39 24.36q9.81,16 10.1,38A8.07,8.07 0,0 1,875.46 279.47ZM777.3,231.8Q762.6,243.68 758.44,266L859.72,266v-2.38A46.91,46.91 0,0 0,850.8 240.27a48.47,48.47 0,0 0,-18.56 -15.15,54 54,0 0,0 -23,-5.2Q792,219.92 777.3,231.8Z"
android:fillColor="@color/black"/>
<path
android:pathData="M932.04,355.5a8.92,8.92 0,0 1,-15.3 -6.38v-202a8.91,8.91 0,1 1,17.82 0v202A8.65,8.65 0,0 1,932.04 355.5Z"
android:fillColor="@color/black"/>
<path
android:pathData="M1000.35,355.5a8.92,8.92 0,0 1,-15.3 -6.38v-202a8.91,8.91 0,1 1,17.82 0v202A8.65,8.65 0,0 1,1000.35 355.5Z"
android:fillColor="@color/black"/>
<path
android:pathData="M1166.66,206.11a8.7,8.7 0,0 1,2.53 6.39v131q0,23.44 -9.21,40.09a61.58,61.58 0,0 1,-25.54 25.25q-16.34,8.61 -36.83,8.61a96.73,96.73 0,0 1,-23.31 -2.68,61.72 61.72,0 0,1 -18,-7.12q-6.24,-3.87 -6.24,-8.62a17.94,17.94 0,0 1,0.6 -3,8.06 8.06,0 0,1 3,-4.45 7.49,7.49 0,0 1,4.45 -1.49,7.91 7.91,0 0,1 3.56,0.89q19,10.39 36.24,10.4 24.65,0 39.06,-15.44t14.4,-42.18L1151.37,333.38a54.37,54.37 0,0 1,-21.38 20,62.55 62.55,0 0,1 -30.3,7.58q-25.83,0 -39.2,-15.45t-13.37,-41.87L1047.12,212.5a8.91,8.91 0,1 1,17.82 0L1064.94,301q0,21.39 9.36,32.38t29.25,11a48,48 0,0 0,23.32 -6.09,49.88 49.88,0 0,0 17.82,-16 37.44,37.44 0,0 0,6.68 -21.24L1151.37,212.5a9,9 0,0 1,15.29 -6.39Z"
android:fillColor="@color/black"/>
<path
android:pathData="M1253.98,161.41q-5.21,6.24 -5.2,17.23v30.59h33.27a8.19,8.19 0,0 1,5.79 2.38,8.26 8.26,0 0,1 0,11.88 8.22,8.22 0,0 1,-5.79 2.37L1248.8,225.86L1248.8,349.12a8.91,8.91 0,1 1,-17.82 0L1230.98,225.86h-21.68a7.83,7.83 0,0 1,-5.94 -2.52,8.21 8.21,0 0,1 -2.37,-5.79 8,8 0,0 1,2.37 -6.09,8.33 8.33,0 0,1 5.94,-2.23h21.68L1230.98,178.64q0,-18.7 10.84,-29t29,-10.24a46.1,46.1 0,0 1,15.45 2.52q7.13,2.53 7.12,8.17a8.07,8.07 0,0 1,-2.37 5.94,7.37 7.37,0 0,1 -5.35,2.37 18.81,18.81 0,0 1,-6.53 -1.48,42 42,0 0,0 -10.4,-1.78Q1259.17,155.18 1253.98,161.41ZM1319.8,180.87c-2.19,-1.88 -3.27,-4.61 -3.27,-8.17v-3q0,-5.34 3.41,-8.17t9.36,-2.82q11.88,0 11.88,11v3c0,3.56 -1,6.29 -3.12,8.17s-5.1,2.82 -9.06,2.82S1321.94,182.75 1319.8,180.87ZM1335.39,355.5a8.92,8.92 0,0 1,-15.3 -6.38L1320.09,212.5a8.91,8.91 0,1 1,17.82 0L1337.91,349.12A8.65,8.65 0,0 1,1335.36 355.5Z"
android:fillColor="@color/black"/>
<path
android:pathData="M1496.33,218.88q12.92,16.2 12.92,42.92v87.32a8.4,8.4 0,0 1,-2.67 6.38,8.8 8.8,0 0,1 -6.24,2.53 8.64,8.64 0,0 1,-8.91 -8.91L1491.43,262.69q0,-19.31 -9.65,-31.33t-29.85,-12a53.28,53.28 0,0 0,-42.77 21.83,36.24 36.24,0 0,0 -7.13,21.53v86.43a8.91,8.91 0,1 1,-17.82 0L1384.21,216.06a8.91,8.91 0,1 1,17.82 0L1402.03,232.4q8,-12.77 23,-21.24A61.84,61.84 0,0 1,1455.8 202.7Q1483.41,202.7 1496.33,218.88Z"
android:fillColor="@color/black"/>
</vector>

View file

@ -13,41 +13,51 @@
android:layout_height="75dp"
android:layout_marginTop="64dp"
android:contentDescription="@string/jellyfin_banner"
android:src="@drawable/ic_banner_dark"
android:src="@drawable/ic_banner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image_banner">
app:layout_constraintTop_toBottomOf="@+id/image_banner"
app:layout_constraintVertical_bias="0.36">
<TextView
android:id="@+id/text_add_server"
style="@style/text_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/add_server" />
android:layout_marginBottom="32dp"
android:text="@string/add_server"
android:textColor="?android:textColorPrimary" />
<EditText
android:id="@+id/edit_text_server_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_marginBottom="24dp"
android:autofillHints="serverAddress"
android:background="@drawable/edit_text_background"
android:hint="@string/edit_text_server_address_hint"
android:autofillHints="" />
android:inputType="text"
android:padding="10dp"
android:textAppearance="@style/text_subtitle"
android:textColorHint="@color/neutral_400" />
<Button
android:id="@+id/button_add_server"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="48dp"
android:background="@drawable/button_setup_background"
android:text="@string/button_connect" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -2,15 +2,16 @@
<!-- Base application theme. -->
<style name="Theme.Jellyfin" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_200</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/black</item>
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryVariant">@color/primary_variant</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_200</item>
<item name="colorSecondary">@color/secondary</item>
<item name="colorSecondaryVariant">@color/secondary_variant</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:windowBackground">@color/neutral_900</item>
</style>
</resources>

View file

@ -1,10 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="primary">#2B82D9</color>
<color name="primary_variant">#1B5692</color>
<color name="secondary">#AA5CC3</color>
<color name="secondary_variant">#5F2970</color>
<color name="neutral_900">#121A21</color>
<color name="neutral_800">#243342</color>
<color name="neutral_700">#374F67</color>
<color name="neutral_400">#5D82A7</color>
<color name="neutral_300">#A9BDD1</color>
<color name="neutral_200">#D7E0E9</color>
<color name="neutral_100">#EEF2F6</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>

View file

@ -1,7 +1,5 @@
<resources>
<string name="app_name">Jellyfin</string>
<!-- TODO: Remove or change this placeholder text -->
<string name="hello_blank_fragment">Hello blank fragment</string>
<string name="jellyfin_banner">Jellyfin banner</string>
<string name="add_server">Add server</string>
<string name="edit_text_server_address_hint">Server address</string>

View file

@ -2,15 +2,16 @@
<!-- Base application theme. -->
<style name="Theme.Jellyfin" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryVariant">@color/primary_variant</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorSecondary">@color/secondary</item>
<item name="colorSecondaryVariant">@color/secondary_variant</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:windowBackground">@color/neutral_100</item>
</style>
</resources>