Quran_android: Toast color is white in dark mode

[ahmedre]

[ahmedre]

This depends on the device but there's a way to manually set the toast color so perhaps we should.

[ataulm]

How do you display a toast in the app? (i.e. as a user.)

[ahmedre]

it happens by default when you scroll past a page where there's a rub3 or hizb - so every few pages unless you turn off this option in settings

[ataulm]

I had a quick peek and it looks like Toast uses an internal layout with a hardcoded text color and theme attribute for the background:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="?android:attr/toastFrameBackground">

    <TextView
        android:id="@android:id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginHorizontal="24dp"
        android:layout_marginVertical="15dp"
        android:layout_gravity="center_horizontal"
        android:textAppearance="@style/TextAppearance.Toast"
        android:textColor="@color/primary_text_default_material_light"
        />

</LinearLayout>

Without getting a reference to the toast's view (toast.getView()), so that we can modify it, we would have to set a custom toast view (toast.setView(view)).

Toast.getView/setView is deprecated in R so I'm not sure how it'll work. Would it be sufficient for the dark mode toast on devices up to Q?

[ahmedre]

sounds good - maybe not even Q? whenever phones support proper dark mode (which i guess is Q and on?) we can ignore this since the OS probably should do it.

[ataulm]

The OS doesn't do it by default either on 10 in dark mode.

Happy to pick this up if you want to proceed.

On Sun, 24 May 2020, 11:04 Ahmed El-Helw, [e-mail] wrote:

sounds good - maybe not even Q? whenever phones support proper dark mode
(which i guess is Q and on?) we can ignore this since the OS probably
should do it.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/quran/quran_android/issues/1365#issuecomment-633207543,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAUN6GYFN3CPNWEHV2U4DFDRTDWJLANCNFSM4NIMJTVQ
.

[ahmedre]

oh man :(
ok please feel free! jazakumAllah khairan.

[vipafattal]

@ahmedre
Inflating custom view in a toast object will solve the issue:

layout_toast.xml

<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"
        app:cardCornerRadius="14dp"
        app:cardBackgroundColor="?transparentItem"
        android:id="@+id/toast_layout_root"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="10dp">
    <TextView
            android:layout_margin="12dp"
            tools:text="@string/no_result"
            android:id="@+id/toast_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
    />
</com.google.android.material.card.MaterialCardView>

QuranAndroidToast.kt (there are other overloads you could grab them from here)

    @JvmStatic
    fun make(context: Context, message: String, @ToastDuration showingDuration: Int) {
        Toast(context).apply {
            view = View.inflate(context, R.layout.layout_toast, null)
                .apply { toast_text.text = message }
            duration = showingDuration
        }.show()
    }

for Toast background color I have created attribute with these values (you can change them to meet your colors need just be maintain the same color transparency):

//the attribute:
<attr name="transparentItem" format="color"/>

//in light theme attribute value is set to:
<item name="transparentItem">#DEFFFFFF</item>
//in dark theme attribute value is set to:
<item name="transparentItem">#DE121314</item>

I hope that helpful

[ataulm]

Thanks Abed! I started using theme attributes but it looks like this application manages nightmode with its own setting; it doesn't use a distinct theme in values-night.

https://github.com/quran/quran_android/pull/1371

@ahmedre I'm sure you got this, but if you want to chat about Android 10+ night mode while retaining support for explicit night mode in app for older devices, ping me on Slack!

[ahmedre]

jazakumAllah khair for the PR, will take a look - yes definitely have proper night mode on my todo list for a while now, still haven't gotten to it (partially because a night mode would mean I have to implement a light mode for non-dark mode people 😂)

[vipafattal]

@ataulm I read the provided details in the PR, and I'm sorry I didn't know that getView() or setView() is deprecated in android R.

[ahmedre]

closed by #1371