Facebook - android app no internet notification ui element

Question

I was wondering what is the UI element that facebook uses when you don't have internet connection - here is a picture of it - the one with the exclamation mark and the text No internet connection.

Any idea how can that be achieved programmatically?

Thank you

Answer 1

It's pretty similar what Crouton library does - https://github.com/keyboardsurfer/Crouton. Check the example application here - https://play.google.com/store/apps/details?id=de.keyboardsurfer.app.demo.crouton

Answer 2

This should do it for you.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="32dp"
    android:layout_gravity="top|fill_horizontal"
    android:background="#333333"
    >
    <TextView
        android:id="@+id/no_internet_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="#FFFFFF"
        android:textStyle="bold"
        android:text="No Internet Connection"
        android:drawableLeft="@android:drawable/stat_notify_error"
        android:drawablePadding="4dp"
        android:gravity="center"
        />  
</FrameLayout>

Answer 3

Run a connection check just before you do something network related, if there is a connection, let the network method start. If there is no internet connection show an alertdialog or message. That's all they have done.

When you pull down to refresh, or start the app it is trying to get your facebook feed, that's a network process so they can simply check for a connection before doing it.

The message that shows up can be designed however you like. It can be an animated View, a Toast, or AlertDialog if you want.

EDIT: That icon is a default icon. I can't quite remember the name but that's one thing you can have from that image. The rest was created by Facebook devs.