Skip to content

Commit 0c55cd7

Browse files
AndyScherzingerAndyScherzinger
authored
Merge pull request #5348 from nextcloud/style/noid/linkPreivewVisuals
Improve link-preview visuals
2 parents 8b186f1 + 525a065 commit 0c55cd7

File tree

11 files changed

+261
-72
lines changed

11 files changed

+261
-72
lines changed

‎app/src/main/java/com/nextcloud/talk/adapters/messages/LinkPreview.kt‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import android.content.Context
1010
import android.content.Intent
1111
import android.util.Log
1212
import android.view.View
13+
import androidx.core.content.ContextCompat
1314
import androidx.core.net.toUri
1415
import coil.load
16+
import com.nextcloud.talk.R
1517
import com.nextcloud.talk.api.NcApi
1618
import com.nextcloud.talk.chat.data.model.ChatMessage
1719
import com.nextcloud.talk.databinding.ReferenceInsideMessageBinding
@@ -74,12 +76,18 @@ class LinkPreview {
7476
}
7577

7678
val referenceThumbUrl = reference.openGraphObject?.thumb
79+
var backgroundId = R.drawable.link_text_background
7780
if (!referenceThumbUrl.isNullOrEmpty()) {
7881
binding.referenceThumbImage.visibility = View.VISIBLE
7982
binding.referenceThumbImage.load(referenceThumbUrl)
8083
} else {
84+
backgroundId = R.drawable.link_text_no_preview_background
8185
binding.referenceThumbImage.visibility = View.GONE
8286
}
87+
binding.referenceMetadataContainer.background = ContextCompat.getDrawable(
88+
binding.referenceMetadataContainer.context,
89+
backgroundId
90+
)
8391

8492
binding.referenceWrapper.setOnClickListener {
8593
val browserIntent = Intent(Intent.ACTION_VIEW, referenceLink!!.toUri())
@@ -95,7 +103,6 @@ class LinkPreview {
95103
binding.referenceDescription.visibility = View.GONE
96104
binding.referenceLink.visibility = View.GONE
97105
binding.referenceThumbImage.visibility = View.GONE
98-
binding.referenceIndentedSideBar.visibility = View.GONE
99106
}
100107

101108
override fun onComplete() {

‎app/src/main/res/drawable-land/link_text_background.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Nextcloud Talk - Android Client
4+
~
5+
~ SPDX-FileCopyrightText: 2025 Andy Scherzinger <[email protected]>
6+
~ SPDX-License-Identifier: GPL-3.0-or-later
7+
-->
8+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
9+
<item android:id="@+id/linkTextBackground">
10+
<shape android:shape="rectangle">
11+
<corners
12+
android:bottomLeftRadius="0dp"
13+
android:bottomRightRadius="12dp"
14+
android:topLeftRadius="0dp"
15+
android:topRightRadius="12dp" />
16+
<solid android:color="@color/bg_default_semitransparent" />
17+
</shape>
18+
</item>
19+
</layer-list>

‎app/src/main/res/drawable/link_text_background.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Nextcloud Talk - Android Client
4+
~
5+
~ SPDX-FileCopyrightText: 2025 Andy Scherzinger <[email protected]>
6+
~ SPDX-License-Identifier: GPL-3.0-or-later
7+
-->
8+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
9+
<item android:id="@+id/linkTextBackground">
10+
<shape android:shape="rectangle">
11+
<corners
12+
android:bottomLeftRadius="12dp"
13+
android:bottomRightRadius="12dp"
14+
android:topLeftRadius="0dp"
15+
android:topRightRadius="0dp" />
16+
<solid android:color="@color/bg_default_semitransparent" />
17+
</shape>
18+
</item>
19+
</layer-list>

‎app/src/main/res/drawable/link_text_no_preview_background.xml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Nextcloud Talk - Android Client
4+
~
5+
~ SPDX-FileCopyrightText: 2025 Andy Scherzinger <[email protected]>
6+
~ SPDX-License-Identifier: GPL-3.0-or-later
7+
-->
8+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
9+
<item android:id="@+id/linkTextBackground">
10+
<shape android:shape="rectangle">
11+
<corners
12+
android:bottomLeftRadius="12dp"
13+
android:bottomRightRadius="12dp"
14+
android:topLeftRadius="12dp"
15+
android:topRightRadius="12dp" />
16+
<solid android:color="@color/bg_default_semitransparent" />
17+
</shape>
18+
</item>
19+
</layer-list>

‎app/src/main/res/layout-land/reference_inside_message.xml‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Nextcloud Talk - Android Client
4+
~
5+
~ SPDX-FileCopyrightText: 2025 Andy Scherzinger <[email protected]>
6+
~ SPDX-FileCopyrightText: 2022 Marcel Hibbe <[email protected]>
7+
~ SPDX-License-Identifier: GPL-3.0-or-later
8+
-->
9+
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
10+
xmlns:app="http://schemas.android.com/apk/res-auto"
11+
xmlns:tools="http://schemas.android.com/tools"
12+
android:id="@+id/referenceWrapper"
13+
android:layout_width="match_parent"
14+
android:layout_height="wrap_content"
15+
android:layout_marginTop="@dimen/standard_half_margin"
16+
android:layout_marginBottom="@dimen/standard_quarter_margin"
17+
android:gravity="end">
18+
19+
<com.google.android.material.imageview.ShapeableImageView
20+
android:id="@+id/referenceThumbImage"
21+
android:layout_width="wrap_content"
22+
android:layout_height="match_parent"
23+
android:adjustViewBounds="true"
24+
android:background="@color/reply_background"
25+
android:maxWidth="@dimen/link_preview_width"
26+
android:maxHeight="@dimen/link_preview_height"
27+
android:scaleType="fitCenter"
28+
android:visibility="gone"
29+
app:shapeAppearanceOverlay="@style/LinkPreviewStyleLand"
30+
tools:ignore="ContentDescription"
31+
tools:src="@drawable/ic_add_attachment"
32+
tools:visibility="visible" />
33+
34+
<LinearLayout
35+
android:id="@+id/referenceMetadataContainer"
36+
android:layout_width="wrap_content"
37+
android:layout_height="match_parent"
38+
android:layout_toEndOf="@id/referenceThumbImage"
39+
android:background="@drawable/link_text_background"
40+
android:orientation="vertical"
41+
android:paddingStart="@dimen/standard_half_margin"
42+
android:paddingTop="@dimen/standard_quarter_margin"
43+
android:paddingEnd="@dimen/standard_half_margin"
44+
android:paddingBottom="@dimen/standard_half_margin">
45+
46+
<androidx.emoji2.widget.EmojiTextView
47+
android:id="@+id/referenceName"
48+
android:layout_width="wrap_content"
49+
android:layout_height="wrap_content"
50+
android:ellipsize="end"
51+
android:lineSpacingMultiplier="1.2"
52+
android:maxLines="2"
53+
android:textAlignment="viewStart"
54+
android:textIsSelectable="false"
55+
android:textStyle="bold"
56+
android:visibility="gone"
57+
tools:text="Name of Website"
58+
tools:visibility="visible" />
59+
60+
<androidx.emoji2.widget.EmojiTextView
61+
android:id="@+id/referenceDescription"
62+
android:layout_width="wrap_content"
63+
android:layout_height="wrap_content"
64+
android:ellipsize="end"
65+
android:lineSpacingMultiplier="1.2"
66+
android:maxLines="2"
67+
android:textAlignment="viewStart"
68+
android:textIsSelectable="false"
69+
android:visibility="gone"
70+
tools:text="Description of Website"
71+
tools:visibility="visible" />
72+
73+
<androidx.emoji2.widget.EmojiTextView
74+
android:id="@+id/referenceLink"
75+
android:layout_width="wrap_content"
76+
android:layout_height="wrap_content"
77+
android:ellipsize="end"
78+
android:lineSpacingMultiplier="1.2"
79+
android:lines="1"
80+
android:singleLine="true"
81+
android:textAlignment="viewStart"
82+
android:textColor="@color/medium_emphasis_text"
83+
android:textIsSelectable="false"
84+
android:visibility="gone"
85+
tools:text="http://nextcloud.com"
86+
tools:visibility="visible" />
87+
88+
</LinearLayout>
89+
90+
</RelativeLayout>

‎app/src/main/res/layout/item_custom_incoming_link_preview_message.xml‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<!--
33
~ Nextcloud Talk - Android Client
44
~
5+
~ SPDX-FileCopyrightText: 2021-2025 Andy Scherzinger <[email protected]>
56
~ SPDX-FileCopyrightText: 2022 Marcel Hibbe <[email protected]>
6-
~ SPDX-FileCopyrightText: 2021 Andy Scherzinger <[email protected]>
77
~ SPDX-FileCopyrightText: 2017-2018 Mario Danic <[email protected]>
88
~ SPDX-License-Identifier: GPL-3.0-or-later
99
-->
@@ -65,9 +65,14 @@
6565
app:layout_wrapBefore="true"
6666
tools:text="Talk to you later!" />
6767

68-
<include
69-
android:id="@+id/referenceInclude"
70-
layout="@layout/reference_inside_message" />
68+
<LinearLayout
69+
android:layout_width="match_parent"
70+
android:layout_height="wrap_content"
71+
android:gravity="start">
72+
<include
73+
android:id="@+id/referenceInclude"
74+
layout="@layout/reference_inside_message" />
75+
</LinearLayout>
7176

7277
<TextView
7378
android:id="@id/messageTime"

‎app/src/main/res/layout/item_custom_outcoming_link_preview_message.xml‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<!--
33
~ Nextcloud Talk - Android Client
44
~
5+
~ SPDX-FileCopyrightText: 2021-2025 Andy Scherzinger <[email protected]>
56
~ SPDX-FileCopyrightText: 2022 Marcel Hibbe <[email protected]>
6-
~ SPDX-FileCopyrightText: 2021 Andy Scherzinger <[email protected]>
77
~ SPDX-FileCopyrightText: 2017-2018 Mario Danic <[email protected]>
88
~ SPDX-License-Identifier: GPL-3.0-or-later
99
-->
@@ -44,9 +44,14 @@
4444
android:textIsSelectable="false"
4545
tools:text="Talk to you later!" />
4646

47-
<include
48-
android:id="@+id/referenceInclude"
49-
layout="@layout/reference_inside_message" />
47+
<LinearLayout
48+
android:layout_width="match_parent"
49+
android:layout_height="wrap_content"
50+
android:gravity="end">
51+
<include
52+
android:id="@+id/referenceInclude"
53+
layout="@layout/reference_inside_message" />
54+
</LinearLayout>
5055

5156
<TextView
5257
android:id="@id/messageTime"

‎app/src/main/res/layout/reference_inside_message.xml‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,86 @@
22
<!--
33
~ Nextcloud Talk - Android Client
44
~
5+
~ SPDX-FileCopyrightText: 2025 Andy Scherzinger <[email protected]>
56
~ SPDX-FileCopyrightText: 2022 Marcel Hibbe <[email protected]>
67
~ SPDX-License-Identifier: GPL-3.0-or-later
78
-->
89
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
10+
xmlns:app="http://schemas.android.com/apk/res-auto"
911
xmlns:tools="http://schemas.android.com/tools"
1012
android:id="@+id/referenceWrapper"
11-
android:layout_width="match_parent"
13+
android:layout_width="wrap_content"
1214
android:layout_height="wrap_content"
13-
android:layout_marginTop="5dp">
15+
android:layout_marginTop="@dimen/standard_half_margin"
16+
android:layout_marginBottom="@dimen/standard_quarter_margin">
1417

15-
<View
16-
android:id="@+id/referenceIndentedSideBar"
17-
android:layout_width="2dp"
18-
android:layout_height="wrap_content"
19-
android:layout_marginEnd="8dp"
20-
android:background="@color/low_emphasis_text"
21-
tools:layout_height="100dp" />
22-
23-
<androidx.emoji2.widget.EmojiTextView
24-
android:id="@+id/referenceName"
25-
android:layout_width="wrap_content"
18+
<com.google.android.material.imageview.ShapeableImageView
19+
android:id="@+id/referenceThumbImage"
20+
android:layout_width="@dimen/link_preview_width"
2621
android:layout_height="wrap_content"
27-
android:layout_marginStart="10dp"
28-
android:ellipsize="end"
29-
android:lineSpacingMultiplier="1.2"
30-
android:maxLines="2"
31-
android:textAlignment="viewStart"
32-
android:textIsSelectable="false"
33-
android:textStyle="bold"
22+
android:adjustViewBounds="true"
23+
android:background="@color/reply_background"
3424
android:visibility="gone"
35-
tools:text="Name of Website"
25+
android:maxHeight="@dimen/link_preview_height"
26+
app:shapeAppearanceOverlay="@style/LinkPreviewStyle"
27+
tools:ignore="ContentDescription"
28+
tools:src="@drawable/ic_add_attachment"
3629
tools:visibility="visible" />
3730

38-
<androidx.emoji2.widget.EmojiTextView
39-
android:id="@+id/referenceDescription"
40-
android:layout_width="wrap_content"
31+
<LinearLayout
32+
android:id="@+id/referenceMetadataContainer"
33+
android:layout_width="@dimen/link_preview_width"
4134
android:layout_height="wrap_content"
42-
android:layout_below="@id/referenceName"
43-
android:layout_marginStart="10dp"
44-
android:ellipsize="end"
45-
android:lineSpacingMultiplier="1.2"
46-
android:maxLines="2"
47-
android:textAlignment="viewStart"
48-
android:textIsSelectable="false"
49-
android:visibility="gone"
50-
tools:text="Description of Website"
51-
tools:visibility="visible" />
35+
android:layout_below="@id/referenceThumbImage"
36+
android:background="@drawable/link_text_background"
37+
android:orientation="vertical"
38+
android:paddingStart="@dimen/standard_half_margin"
39+
android:paddingTop="@dimen/standard_quarter_margin"
40+
android:paddingEnd="@dimen/standard_half_margin"
41+
android:paddingBottom="@dimen/standard_half_margin">
5242

53-
<androidx.emoji2.widget.EmojiTextView
54-
android:id="@+id/referenceLink"
55-
android:layout_width="wrap_content"
56-
android:layout_height="wrap_content"
57-
android:layout_below="@id/referenceDescription"
58-
android:layout_marginStart="10dp"
59-
android:ellipsize="end"
60-
android:lineSpacingMultiplier="1.2"
61-
android:lines="1"
62-
android:singleLine="true"
63-
android:textAlignment="viewStart"
64-
android:textColor="@color/medium_emphasis_text"
65-
android:textIsSelectable="false"
66-
android:visibility="gone"
67-
tools:text="http://nextcloud.com"
68-
tools:visibility="visible" />
43+
<androidx.emoji2.widget.EmojiTextView
44+
android:id="@+id/referenceName"
45+
android:layout_width="wrap_content"
46+
android:layout_height="wrap_content"
47+
android:ellipsize="end"
48+
android:lineSpacingMultiplier="1.2"
49+
android:maxLines="2"
50+
android:textAlignment="viewStart"
51+
android:textIsSelectable="false"
52+
android:textStyle="bold"
53+
android:visibility="gone"
54+
tools:text="Name of Website"
55+
tools:visibility="visible" />
6956

70-
<ImageView
71-
android:id="@+id/referenceThumbImage"
72-
android:layout_width="match_parent"
73-
android:layout_height="120dp"
74-
android:layout_below="@id/referenceLink"
75-
android:layout_marginStart="10dp"
76-
android:layout_marginTop="5dp"
77-
android:scaleType="fitEnd"
78-
android:visibility="gone"
79-
tools:visibility="visible"
80-
tools:ignore="ContentDescription" />
81-
</RelativeLayout>
57+
<androidx.emoji2.widget.EmojiTextView
58+
android:id="@+id/referenceDescription"
59+
android:layout_width="wrap_content"
60+
android:layout_height="wrap_content"
61+
android:ellipsize="end"
62+
android:lineSpacingMultiplier="1.2"
63+
android:maxLines="2"
64+
android:textAlignment="viewStart"
65+
android:textIsSelectable="false"
66+
android:visibility="gone"
67+
tools:text="Description of Website"
68+
tools:visibility="visible" />
69+
70+
<androidx.emoji2.widget.EmojiTextView
71+
android:id="@+id/referenceLink"
72+
android:layout_width="wrap_content"
73+
android:layout_height="wrap_content"
74+
android:ellipsize="end"
75+
android:lineSpacingMultiplier="1.2"
76+
android:lines="1"
77+
android:singleLine="true"
78+
android:textAlignment="viewStart"
79+
android:textColor="@color/medium_emphasis_text"
80+
android:textIsSelectable="false"
81+
android:visibility="gone"
82+
tools:text="http://nextcloud.com"
83+
tools:visibility="visible" />
84+
85+
</LinearLayout>
86+
87+
</RelativeLayout>

0 commit comments

Comments
 (0)