From 012921f88636e767f6a4b0825771f33226c54d63 Mon Sep 17 00:00:00 2001
From: h4h13 <hemanths@live.com>
Date: Thu, 3 Oct 2019 00:24:39 +0530
Subject: [PATCH] Layout update with constraints and font correction

---
 .../monkey/retromusic/views/ListItemView.kt   |  54 +++
 .../layout-sw600dp-land/activity_settings.xml |   8 +-
 .../res/layout-xlarge/activity_user_info.xml  |   3 +-
 app/src/main/res/layout/activity_about.xml    |   1 +
 .../main/res/layout/activity_bug_report.xml   |   3 +-
 app/src/main/res/layout/activity_donation.xml |  27 +-
 .../main/res/layout/activity_equalizer.xml    |   3 +-
 .../res/layout/activity_error_handler.xml     |   2 +-
 app/src/main/res/layout/activity_license.xml  |   1 +
 .../res/layout/activity_playing_queue.xml     |   1 +
 .../main/res/layout/activity_pro_version.xml  |   1 +
 .../res/layout/activity_song_tag_editor.xml   |   1 +
 .../main/res/layout/activity_user_info.xml    |   3 +-
 .../main/res/layout/activity_whats_new.xml    |   3 +-
 app/src/main/res/layout/card_credit.xml       |  17 +-
 app/src/main/res/layout/card_other.xml        |  47 ++-
 app/src/main/res/layout/card_retro_info.xml   | 348 ++++--------------
 app/src/main/res/layout/card_social.xml       | 207 +++--------
 .../res/layout/fragment_main_settings.xml     |  29 +-
 app/src/main/res/layout/item_contributor.xml  |   5 +-
 .../res/layout/item_contributor_header.xml    |   1 +
 app/src/main/res/layout/list_item_view.xml    |  72 ++++
 app/src/main/res/values/list_item_view.xml    |  21 ++
 app/src/main/res/values/styles.xml            |  12 +-
 24 files changed, 384 insertions(+), 486 deletions(-)
 create mode 100644 app/src/main/java/code/name/monkey/retromusic/views/ListItemView.kt
 create mode 100644 app/src/main/res/layout/list_item_view.xml
 create mode 100644 app/src/main/res/values/list_item_view.xml

diff --git a/app/src/main/java/code/name/monkey/retromusic/views/ListItemView.kt b/app/src/main/java/code/name/monkey/retromusic/views/ListItemView.kt
new file mode 100644
index 00000000..19f97ae1
--- /dev/null
+++ b/app/src/main/java/code/name/monkey/retromusic/views/ListItemView.kt
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2019 Hemanth Savarala.
+ *
+ * Licensed under the GNU General Public License v3
+ *
+ * This is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License as published by
+ *  the Free Software Foundation either version 3 of the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU General Public License for more details.
+ */
+
+package code.name.monkey.retromusic.views
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.View
+import android.widget.FrameLayout
+import code.name.monkey.retromusic.R
+import code.name.monkey.retromusic.extensions.hide
+import kotlinx.android.synthetic.main.list_item_view.view.*
+
+/**
+ * Created by hemanths on 2019-10-02.
+ */
+class ListItemView : FrameLayout {
+    constructor(context: Context) : super(context) {
+        init(context, null)
+    }
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+        init(context, attrs)
+    }
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
+        init(context, attrs)
+    }
+
+    private fun init(context: Context, attrs: AttributeSet?) {
+        View.inflate(context, R.layout.list_item_view, this)
+
+        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ListItemView)
+        appCompatImageView.setImageDrawable(typedArray.getDrawable(R.styleable.ListItemView_listItemIcon))
+        title.text = typedArray.getText(R.styleable.ListItemView_listItemTitle)
+        if (typedArray.hasValue(R.styleable.ListItemView_listItemSummary)) {
+            summary.text = typedArray.getText(R.styleable.ListItemView_listItemSummary)
+        } else {
+            summary.hide()
+        }
+        typedArray.recycle()
+    }
+}
diff --git a/app/src/main/res/layout-sw600dp-land/activity_settings.xml b/app/src/main/res/layout-sw600dp-land/activity_settings.xml
index eba0ce0f..bb5a7e8e 100644
--- a/app/src/main/res/layout-sw600dp-land/activity_settings.xml
+++ b/app/src/main/res/layout-sw600dp-land/activity_settings.xml
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   ~ Copyright (c) 2019 Hemanth Savarala.
   ~
   ~ Licensed under the GNU General Public License v3
@@ -15,6 +14,7 @@
 
 <androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent"
     android:layout_height="match_parent">
 
@@ -53,7 +53,9 @@
             android:id="@+id/toolbar"
             style="@style/Toolbar"
             app:layout_collapseMode="pin"
-            app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp" />
+            app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
+            tools:title="@string/action_settings" />
 
     </com.google.android.material.appbar.AppBarLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/layout-xlarge/activity_user_info.xml b/app/src/main/res/layout-xlarge/activity_user_info.xml
index ca3b01ae..3b0593cc 100644
--- a/app/src/main/res/layout-xlarge/activity_user_info.xml
+++ b/app/src/main/res/layout-xlarge/activity_user_info.xml
@@ -16,7 +16,8 @@
             android:id="@+id/toolbar"
             style="@style/Toolbar"
             app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
-            app:title="@string/profile" />
+            app:title="@string/profile"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/layout/activity_about.xml b/app/src/main/res/layout/activity_about.xml
index 045b6b89..696445cc 100644
--- a/app/src/main/res/layout/activity_about.xml
+++ b/app/src/main/res/layout/activity_about.xml
@@ -15,6 +15,7 @@
             android:id="@+id/toolbar"
             style="@style/Toolbar"
             app:layout_collapseMode="pin"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
             app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
             app:title="@string/action_about" />
 
diff --git a/app/src/main/res/layout/activity_bug_report.xml b/app/src/main/res/layout/activity_bug_report.xml
index ae4ec773..05eb8406 100644
--- a/app/src/main/res/layout/activity_bug_report.xml
+++ b/app/src/main/res/layout/activity_bug_report.xml
@@ -16,7 +16,8 @@
             android:id="@+id/toolbar"
             style="@style/Toolbar"
             app:layout_collapseMode="pin"
-            app:title="@string/report_bug" />
+            app:title="@string/report_bug"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/layout/activity_donation.xml b/app/src/main/res/layout/activity_donation.xml
index b33cf7a1..768ae337 100644
--- a/app/src/main/res/layout/activity_donation.xml
+++ b/app/src/main/res/layout/activity_donation.xml
@@ -10,27 +10,16 @@
         android:id="@+id/appBarLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:elevation="0dp"
-        app:elevation="0dp">
+        app:liftOnScroll="true">
 
-        <com.google.android.material.appbar.CollapsingToolbarLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            app:titleEnabled="false">
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/toolbar"
+            style="@style/Toolbar"
+            app:layout_collapseMode="pin"
+            app:title="@string/support_development"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
+            tools:ignore="UnusedAttribute" />
 
-            <com.google.android.material.appbar.MaterialToolbar
-                android:id="@+id/toolbar"
-                style="@style/Toolbar"
-                app:layout_collapseMode="pin"
-                app:title="@string/support_development"
-                tools:ignore="UnusedAttribute" />
-
-        </com.google.android.material.appbar.CollapsingToolbarLayout>
-
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:background="?dividerColor" />
     </com.google.android.material.appbar.AppBarLayout>
 
     <androidx.core.widget.NestedScrollView
diff --git a/app/src/main/res/layout/activity_equalizer.xml b/app/src/main/res/layout/activity_equalizer.xml
index 34a789d2..bec891ad 100644
--- a/app/src/main/res/layout/activity_equalizer.xml
+++ b/app/src/main/res/layout/activity_equalizer.xml
@@ -15,7 +15,8 @@
             style="@style/Toolbar"
             app:layout_collapseMode="pin"
             app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
-            app:title="@string/equalizer" />
+            app:title="@string/equalizer"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal" />
 
 
         <androidx.appcompat.widget.SwitchCompat
diff --git a/app/src/main/res/layout/activity_error_handler.xml b/app/src/main/res/layout/activity_error_handler.xml
index 33b97494..ffc3a1b3 100644
--- a/app/src/main/res/layout/activity_error_handler.xml
+++ b/app/src/main/res/layout/activity_error_handler.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="0dp"
        app:elevation="0dp">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            style="@style/Toolbar"
            app:layout_collapseMode="pin">


            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/title"
                style="@style/BigTitleTextAppearanceToolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/error"
                android:textStyle="bold"
                tools:ignore="MissingPrefix" />


        </com.google.android.material.appbar.MaterialToolbar>


    </com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            app:srcCompat="@drawable/ic_bug_report_white_24dp"
            app:tint="@color/md_grey_800" />

        <com.google.android.material.textview.MaterialTextView
            app:lineHeight="24sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bug_report_summary" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="1">

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/showCrashError"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/md_grey_400"
                android:padding="16dp"
                android:text="@string/error" />
        </ScrollView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_weight="0"
            android:gravity="center">

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/sendCrashLog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:cardBackgroundColor="@color/md_blue_A200"
                app:cardCornerRadius="6dp"
                app:cardUseCompatPadding="true">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingStart="20dp"
                    android:paddingTop="12dp"
                    android:paddingEnd="20dp"
                    android:paddingBottom="12dp"
                    android:text="@string/send_crash_log"
                    android:textColor="@color/md_white_1000" />
            </com.google.android.material.card.MaterialCardView>

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/clearAppData"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:cardBackgroundColor="@color/md_blue_A200"
                app:cardCornerRadius="6dp"
                app:cardUseCompatPadding="true">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingStart="20dp"
                    android:paddingTop="12dp"
                    android:paddingEnd="20dp"
                    android:paddingBottom="12dp"
                    android:text="@string/clear_app_data"
                    android:textColor="@color/md_white_1000" />
            </com.google.android.material.card.MaterialCardView>
        </LinearLayout>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="0dp"
        app:elevation="0dp">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            style="@style/Toolbar"
            app:layout_collapseMode="pin"
            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal">


            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/title"
                style="@style/BigTitleTextAppearanceToolbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/error"
                android:textStyle="bold"
                tools:ignore="MissingPrefix" />


        </com.google.android.material.appbar.MaterialToolbar>


    </com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            app:srcCompat="@drawable/ic_bug_report_white_24dp"
            app:tint="@color/md_grey_800" />

        <com.google.android.material.textview.MaterialTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bug_report_summary"
            app:lineHeight="24sp" />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="1">

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/showCrashError"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/md_grey_400"
                android:padding="16dp"
                android:text="@string/error" />
        </ScrollView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_weight="0"
            android:gravity="center">

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/sendCrashLog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:cardBackgroundColor="@color/md_blue_A200"
                app:cardCornerRadius="6dp"
                app:cardUseCompatPadding="true">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingStart="20dp"
                    android:paddingTop="12dp"
                    android:paddingEnd="20dp"
                    android:paddingBottom="12dp"
                    android:text="@string/send_crash_log"
                    android:textColor="@color/md_white_1000" />
            </com.google.android.material.card.MaterialCardView>

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/clearAppData"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                app:cardBackgroundColor="@color/md_blue_A200"
                app:cardCornerRadius="6dp"
                app:cardUseCompatPadding="true">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingStart="20dp"
                    android:paddingTop="12dp"
                    android:paddingEnd="20dp"
                    android:paddingBottom="12dp"
                    android:text="@string/clear_app_data"
                    android:textColor="@color/md_white_1000" />
            </com.google.android.material.card.MaterialCardView>
        </LinearLayout>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/activity_license.xml b/app/src/main/res/layout/activity_license.xml
index 9d95c23a..2e1bfd05 100644
--- a/app/src/main/res/layout/activity_license.xml
+++ b/app/src/main/res/layout/activity_license.xml
@@ -19,6 +19,7 @@
             app:layout_collapseMode="pin"
             app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
             app:title="@string/licenses"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
             tools:ignore="UnusedAttribute" />
 
     </com.google.android.material.appbar.AppBarLayout>
diff --git a/app/src/main/res/layout/activity_playing_queue.xml b/app/src/main/res/layout/activity_playing_queue.xml
index f5f35c21..21b8862e 100755
--- a/app/src/main/res/layout/activity_playing_queue.xml
+++ b/app/src/main/res/layout/activity_playing_queue.xml
@@ -26,6 +26,7 @@
                 style="@style/Toolbar"
                 app:layout_collapseMode="pin"
                 app:title="@string/queue"
+                app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
                 tools:ignore="UnusedAttribute" />
         </com.google.android.material.appbar.CollapsingToolbarLayout>
 
diff --git a/app/src/main/res/layout/activity_pro_version.xml b/app/src/main/res/layout/activity_pro_version.xml
index 652d7de4..0506d903 100644
--- a/app/src/main/res/layout/activity_pro_version.xml
+++ b/app/src/main/res/layout/activity_pro_version.xml
@@ -40,6 +40,7 @@
                     style="@style/Toolbar"
                     app:layout_collapseMode="pin"
                     app:title="@string/buy_retro_music_pro"
+                    app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
                     tools:ignore="UnusedAttribute" />
 
             </com.google.android.material.appbar.CollapsingToolbarLayout>
diff --git a/app/src/main/res/layout/activity_song_tag_editor.xml b/app/src/main/res/layout/activity_song_tag_editor.xml
index 25335f75..d8cf8239 100755
--- a/app/src/main/res/layout/activity_song_tag_editor.xml
+++ b/app/src/main/res/layout/activity_song_tag_editor.xml
@@ -37,6 +37,7 @@
                 style="@style/Toolbar"
                 app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
                 app:title="@string/action_tag_editor"
+                app:titleTextAppearance="@style/ToolbarTextAppearanceNormal"
                 tools:ignore="UnusedAttribute" />
         </com.google.android.material.appbar.CollapsingToolbarLayout>
     </com.google.android.material.appbar.AppBarLayout>
diff --git a/app/src/main/res/layout/activity_user_info.xml b/app/src/main/res/layout/activity_user_info.xml
index e6071edb..cb82dd39 100644
--- a/app/src/main/res/layout/activity_user_info.xml
+++ b/app/src/main/res/layout/activity_user_info.xml
@@ -15,7 +15,8 @@
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar"
             style="@style/Toolbar"
-            app:title="@string/profile" />
+            app:title="@string/profile"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/layout/activity_whats_new.xml b/app/src/main/res/layout/activity_whats_new.xml
index 3fb12f6c..fb61c77d 100644
--- a/app/src/main/res/layout/activity_whats_new.xml
+++ b/app/src/main/res/layout/activity_whats_new.xml
@@ -17,7 +17,8 @@
             style="@style/Toolbar"
             app:layout_collapseMode="pin"
             app:navigationIcon="@drawable/ic_keyboard_backspace_black_24dp"
-            app:title="@string/whats_new" />
+            app:title="@string/whats_new"
+            app:titleTextAppearance="@style/ToolbarTextAppearanceNormal" />
 
     </com.google.android.material.appbar.AppBarLayout>
 
diff --git a/app/src/main/res/layout/card_credit.xml b/app/src/main/res/layout/card_credit.xml
index 34e0aa59..dcee47ea 100644
--- a/app/src/main/res/layout/card_credit.xml
+++ b/app/src/main/res/layout/card_credit.xml
@@ -6,21 +6,30 @@
     app:cardCornerRadius="8dp"
     app:cardUseCompatPadding="true">
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
 
         <code.name.monkey.appthemehelper.common.views.ATEAccentTextView
+            android:id="@+id/sb1"
             style="@style/SubTitleTextAppearance"
             android:text="@string/credit_title"
             android:textAppearance="@style/TextViewOverline"
-            android:textColor="?colorAccent" />
+            android:textColor="?colorAccent"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/recyclerView"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+            android:layout_height="wrap_content"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/sb1" />
 
-    </LinearLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </com.google.android.material.card.MaterialCardView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/card_other.xml b/app/src/main/res/layout/card_other.xml
index 8cfdc730..e4187fa3 100644
--- a/app/src/main/res/layout/card_other.xml
+++ b/app/src/main/res/layout/card_other.xml
@@ -7,15 +7,22 @@
     app:cardCornerRadius="8dp"
     app:cardUseCompatPadding="true">
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
 
         <code.name.monkey.appthemehelper.common.views.ATEAccentTextView
+            android:id="@+id/sb4"
             style="@style/SubTitleTextAppearance"
             android:text="@string/others"
-            android:textAppearance="@style/TextViewOverline" />
+            android:textAppearance="@style/TextViewOverline"
+            android:textColor="?colorAccent"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
         <LinearLayout
             android:id="@+id/changelog"
@@ -29,6 +36,11 @@
             android:paddingTop="8dp"
             android:paddingEnd="12dp"
             android:paddingBottom="8dp"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/sb4"
             tools:ignore="PrivateResource">
 
 
@@ -36,7 +48,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/changelog"
-                android:textAppearance="@style/TextViewSubtitle1" />
+                android:textAppearance="@style/TextViewSubtitle1"
+                android:textStyle="bold" />
 
             <code.name.monkey.retromusic.views.BaselineGridTextView
                 android:layout_width="match_parent"
@@ -57,13 +70,19 @@
             android:paddingTop="8dp"
             android:paddingEnd="12dp"
             android:paddingBottom="8dp"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/changelog"
             tools:ignore="PrivateResource">
 
             <com.google.android.material.textview.MaterialTextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/pref_title_open_source_licences"
-                android:textAppearance="@style/TextViewSubtitle1" />
+                android:textAppearance="@style/TextViewSubtitle1"
+                android:textStyle="bold" />
 
             <code.name.monkey.retromusic.views.BaselineGridTextView
                 android:layout_width="match_parent"
@@ -73,6 +92,7 @@
         </LinearLayout>
 
         <LinearLayout
+            android:id="@+id/version"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="?attr/rectSelector"
@@ -83,13 +103,19 @@
             android:paddingTop="8dp"
             android:paddingEnd="12dp"
             android:paddingBottom="8dp"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/openSource"
             tools:ignore="PrivateResource">
 
             <com.google.android.material.textview.MaterialTextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/version"
-                android:textAppearance="@style/TextViewSubtitle1" />
+                android:textAppearance="@style/TextViewSubtitle1"
+                android:textStyle="bold" />
 
             <code.name.monkey.retromusic.views.BaselineGridTextView
                 android:id="@+id/appVersion"
@@ -101,12 +127,17 @@
 
         <com.google.android.material.textview.MaterialTextView
             android:id="@+id/madeText"
-            android:layout_width="wrap_content"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:gravity="center"
             android:padding="16dp"
             android:text="@string/made_with_love"
-            android:textAppearance="@style/TextViewBody1" />
-    </LinearLayout>
+            android:textAppearance="@style/TextViewBody1"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/version" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </com.google.android.material.card.MaterialCardView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/card_retro_info.xml b/app/src/main/res/layout/card_retro_info.xml
index 10781226..76e02f98 100644
--- a/app/src/main/res/layout/card_retro_info.xml
+++ b/app/src/main/res/layout/card_retro_info.xml
@@ -1,312 +1,120 @@
 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.card.MaterialCardView 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="match_parent"
     android:layout_height="wrap_content"
     app:cardBackgroundColor="?colorSurface"
     app:cardCornerRadius="8dp"
     app:cardUseCompatPadding="true">
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
 
         <code.name.monkey.appthemehelper.common.views.ATEAccentTextView
+            android:id="@+id/sb2"
             style="@style/SubTitleTextAppearance"
             android:text="@string/support_development"
-            android:textAppearance="@style/TextViewOverline" />
+            android:textAppearance="@style/TextViewOverline"
+            android:textColor="?colorAccent"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/appGithub"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/sb2"
+            app:listItemIcon="@drawable/ic_github_circle_white_24dp"
+            app:listItemSummary="@string/git_hub_summary"
+            app:listItemTitle="@string/git_hub" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_github_circle_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:fontFamily="@font/circular"
-                    android:text="@string/git_hub"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/git_hub_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/appTranslation"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/appGithub"
+            app:listItemIcon="@drawable/ic_flag_white_24dp"
+            app:listItemSummary="@string/translate_community"
+            app:listItemTitle="@string/translate" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_flag_white_24dp"
-                app:tint="?colorOnSurface" />
 
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/translate"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/translate_community"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/appRate"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/appTranslation"
+            app:listItemIcon="@drawable/ic_star_white_24dp"
+            app:listItemSummary="@string/rate_on_google_play_summary"
+            app:listItemTitle="@string/rate_app" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_star_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/rate_app"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/rate_on_google_play_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/donateLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_card_giftcard_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/appRate"
+            app:listItemIcon="@drawable/ic_card_giftcard_white_24dp"
+            app:listItemSummary="@string/donate_summary"
+            app:listItemTitle="@string/donate" />
 
 
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/donate"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/donate_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/bugReportLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/donateLink"
+            app:listItemIcon="@drawable/ic_bug_report_white_24dp"
+            app:listItemSummary="@string/bug_report_summary"
+            app:listItemTitle="@string/report_bug" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_bug_report_white_24dp"
-                app:tint="?colorOnSurface" />
 
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/report_bug"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/bug_report_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/appShare"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:gravity="center_vertical"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/bugReportLink"
+            app:listItemIcon="@drawable/ic_share_white_24dp"
+            app:listItemTitle="@string/action_share" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_share_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:gravity="center_vertical"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/action_share"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/faqLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:gravity="center_vertical"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/appShare"
+            app:listItemIcon="@drawable/ic_help_white_24dp"
+            app:listItemTitle="@string/faq" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:contentDescription="@string/social_buttons"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_help_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:gravity="center_vertical"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/faq"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-            </LinearLayout>
-        </LinearLayout>
-
-    </LinearLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </com.google.android.material.card.MaterialCardView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/card_social.xml b/app/src/main/res/layout/card_social.xml
index 938839d0..9ccb0881 100644
--- a/app/src/main/res/layout/card_social.xml
+++ b/app/src/main/res/layout/card_social.xml
@@ -1,187 +1,80 @@
 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.card.MaterialCardView 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="match_parent"
     android:layout_height="wrap_content"
     app:cardCornerRadius="8dp"
     app:cardUseCompatPadding="true">
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
 
         <code.name.monkey.appthemehelper.common.views.ATEAccentTextView
+            android:id="@+id/sb3"
             style="@style/SubTitleTextAppearance"
             android:text="@string/social"
-            android:textAppearance="@style/TextViewOverline" />
+            android:textAppearance="@style/TextViewOverline"
+            android:textColor="?colorAccent"
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/pinterestLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/sb3"
+            app:listItemIcon="@drawable/ic_pinterest_white_24dp"
+            app:listItemSummary="@string/pinterest_page_summary"
+            app:listItemTitle="@string/pinterest_page" />
 
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_pinterest_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/pinterest_page"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/pinterest_page_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/instagramLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_instagram_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/pinterestLink"
+            app:listItemIcon="@drawable/ic_instagram_white_24dp"
+            app:listItemSummary="@string/instagram_page_summary"
+            app:listItemTitle="@string/instagram_page" />
 
 
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/instagram_page"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/instagram_page_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/twitterLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/instagramLink"
+            app:listItemIcon="@drawable/ic_twitter_white_24dp"
+            app:listItemSummary="@string/twitter_page_summary"
+            app:listItemTitle="@string/twitter_page" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_twitter_white_24dp"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/twitter_page"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/twitter_page_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-        <LinearLayout
+        <code.name.monkey.retromusic.views.ListItemView
             android:id="@+id/telegramLink"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?attr/rectSelector"
-            android:clickable="true"
-            android:focusable="true"
-            android:minHeight="@dimen/md_listitem_height"
-            android:orientation="horizontal"
-            tools:ignore="PrivateResource">
+            app:layout_constrainedWidth="true"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/twitterLink"
+            app:listItemIcon="@drawable/ic_telegram_white"
+            app:listItemSummary="@string/telegram_group_summary"
+            app:listItemTitle="@string/telegram_group" />
 
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:padding="16dp"
-                app:srcCompat="@drawable/ic_telegram_white"
-                app:tint="?colorOnSurface" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="vertical"
-                android:paddingStart="12dp"
-                android:paddingTop="8dp"
-                android:paddingEnd="12dp"
-                android:paddingBottom="8dp">
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/telegram_group"
-                    android:textAppearance="@style/TextViewSubtitle1" />
-
-                <code.name.monkey.retromusic.views.BaselineGridTextView
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:text="@string/telegram_group_summary"
-                    app:lineHeightHint="24sp" />
-            </LinearLayout>
-        </LinearLayout>
-
-    </LinearLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </com.google.android.material.card.MaterialCardView>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_main_settings.xml b/app/src/main/res/layout/fragment_main_settings.xml
index 97d791af..37fc8ecc 100644
--- a/app/src/main/res/layout/fragment_main_settings.xml
+++ b/app/src/main/res/layout/fragment_main_settings.xml
@@ -57,7 +57,8 @@
                         android:paddingBottom="8dp"
                         android:text="@string/buy_pro"
                         android:textAppearance="@style/TextViewHeadline6"
-                        android:textColor="?colorOnSurface" />
+                        android:textColor="?colorOnSurface"
+                        android:textStyle="bold" />
 
                     <com.google.android.material.textview.MaterialTextView
                         android:id="@+id/text2"
@@ -129,7 +130,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/general_settings_title"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -173,7 +175,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/now_playing"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -216,7 +219,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/pref_header_audio"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -257,9 +261,10 @@
                     android:layout_height="wrap_content"
                     android:ellipsize="marquee"
                     android:fadingEdge="horizontal"
-                    android:singleLine="true"
                     android:text="@string/personalize"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:singleLine="true"
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -301,7 +306,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/pref_header_images"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -343,7 +349,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/notification"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -387,7 +394,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/others"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
@@ -431,7 +439,8 @@
                     android:fadingEdge="horizontal"
                     android:singleLine="true"
                     android:text="@string/action_about"
-                    android:textAppearance="@style/TextViewSubtitle1" />
+                    android:textAppearance="@style/TextViewSubtitle1"
+                    android:textStyle="bold" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:layout_width="wrap_content"
diff --git a/app/src/main/res/layout/item_contributor.xml b/app/src/main/res/layout/item_contributor.xml
index 988f0237..eaf4a3fc 100644
--- a/app/src/main/res/layout/item_contributor.xml
+++ b/app/src/main/res/layout/item_contributor.xml
@@ -30,9 +30,9 @@
         android:layout_width="40dp"
         android:layout_height="40dp"
         app:civ_border="false"
-        tools:srcCompat="@tools:sample/backgrounds/scenic[20]"
         app:civ_shadow="false"
-        app:srcCompat="@drawable/ic_person_flat" />
+        app:srcCompat="@drawable/ic_person_flat"
+        tools:srcCompat="@tools:sample/backgrounds/scenic[20]" />
 
     <LinearLayout
         android:layout_width="match_parent"
@@ -48,6 +48,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:textAppearance="@style/TextViewSubtitle1"
+            android:textStyle="bold"
             tools:text="Name" />
 
         <code.name.monkey.retromusic.views.BaselineGridTextView
diff --git a/app/src/main/res/layout/item_contributor_header.xml b/app/src/main/res/layout/item_contributor_header.xml
index 1888cfd1..40964742 100644
--- a/app/src/main/res/layout/item_contributor_header.xml
+++ b/app/src/main/res/layout/item_contributor_header.xml
@@ -48,6 +48,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:gravity="center"
+            android:textStyle="bold"
             android:textAppearance="@style/TextViewHeadline5"
             tools:text="Name" />
 
diff --git a/app/src/main/res/layout/list_item_view.xml b/app/src/main/res/layout/list_item_view.xml
new file mode 100644
index 00000000..3119ef5d
--- /dev/null
+++ b/app/src/main/res/layout/list_item_view.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) 2019 Hemanth Savarala.
+  ~
+  ~ Licensed under the GNU General Public License v3
+  ~
+  ~ This is free software: you can redistribute it and/or modify it under
+  ~ the terms of the GNU General Public License as published by
+  ~  the Free Software Foundation either version 3 of the License, or (at your option) any later version.
+  ~
+  ~ This software is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+  ~ without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  ~ See the GNU General Public License for more details.
+  -->
+
+<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
+    android:layout_height="wrap_content"
+    android:background="?attr/rectSelector"
+    android:minHeight="@dimen/md_listitem_height"
+    android:orientation="horizontal"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    tools:ignore="PrivateResource">
+
+
+    <androidx.appcompat.widget.AppCompatImageView
+        android:id="@+id/appCompatImageView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:padding="16dp"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_telegram_white"
+        app:tint="?colorOnSurface" />
+
+
+    <com.google.android.material.textview.MaterialTextView
+        android:id="@+id/title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:textStyle="bold"
+        android:layout_marginEnd="16dp"
+        android:text="@string/telegram_group"
+        android:textAppearance="@style/TextViewSubtitle1"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toTopOf="@+id/summary"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0"
+        app:layout_constraintStart_toEndOf="@+id/appCompatImageView"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <code.name.monkey.retromusic.views.BaselineGridTextView
+        android:id="@+id/summary"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="4dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginBottom="8dp"
+        android:text="@string/telegram_group_summary"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0"
+        app:layout_constraintStart_toEndOf="@+id/appCompatImageView"
+        app:layout_constraintTop_toBottomOf="@+id/title" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/list_item_view.xml b/app/src/main/res/values/list_item_view.xml
new file mode 100644
index 00000000..1d49c011
--- /dev/null
+++ b/app/src/main/res/values/list_item_view.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) 2019 Hemanth Savarala.
+  ~
+  ~ Licensed under the GNU General Public License v3
+  ~
+  ~ This is free software: you can redistribute it and/or modify it under
+  ~ the terms of the GNU General Public License as published by
+  ~  the Free Software Foundation either version 3 of the License, or (at your option) any later version.
+  ~
+  ~ This software is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+  ~ without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  ~ See the GNU General Public License for more details.
+  -->
+
+<resources>
+    <declare-styleable name="ListItemView">
+        <attr name="listItemIcon" format="reference" />
+        <attr name="listItemTitle" format="string" />
+        <attr name="listItemSummary" format="string" />
+    </declare-styleable>
+</resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 6a10d75e..2ddf296e 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -39,12 +39,13 @@
 
     <style name="ToolbarTextAppearanceSearch" parent="ThemeOverlay.MaterialComponents.Toolbar.Surface">
         <item name="android:textSize">16sp</item>
-        <item name="android:fontFamily">@font/circular_std_book</item>
     </style>
 
-    <style name="ToolbarTextAppearanceNormal">
+    <style name="ToolbarTextAppearanceNormal" >
         <item name="android:textSize">20sp</item>
-        <item name="android:fontFamily">@font/circular_std_book</item>
+        <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Headline6
+        </item>
+        <item name="android:textStyle">bold</item>
     </style>
 
     <style name="ToolbarSubTitleTextAppearance">
@@ -208,11 +209,8 @@
         <item name="android:fontFamily">@font/circular</item>
     </style>
 
-    <style name="ToolbarTitleFont">
-        <item name="android:fontFamily">@font/circular_std_black</item>
-    </style>
 
     <style name="ChipFont" parent="TextAppearance.MaterialComponents.Chip">
-        <item name="android:fontFamily">@font/circular_std_book</item>
+        <item name="android:fontFamily">@font/circular</item>
     </style>
 </resources>