Google Glass GDK: Progress Indicator?

Question

Using the GDK (or in some other way), is there a way to display a progress indicator similar to the one displayed when connecting to a WiFi network on Glass? (the "spinning" lines on the bottom of the display, kind of like at the end of this video: https://www.youtube.com/watch?v=g3ncmeGaKN0)

Thanks!

Vestment

Excellent question. I was looking for the same thing. I added a standard horizontal progress bar in my project, and it works fine, but I'd like to match the style with the Glass style I'm seeing in the rest of the UI. Wondering if this is just a parm in the layout – Drench

Answer 1

This issue is resolved by google with Slider (global UX Components) https://developers.google.com/glass/develop/gdk/slider

Exhilaration

Answer 2

UPD 04.11.2014: Google released Slider -- UX component suitable for this. You should better use it instead of the extracted project.

---

I've extracted Google Glass Progress Bar from GlassHome.apk and created a library project based on that: https://github.com/pif/glass-progress-bar

• supports indeterminate
• supports default progress

Usage is described in README in the repository.

And yes, everyone is still waiting for a full-featured set of Glass Views.

Update: I extracted MessageDialog as well. You can find it in the same library.

Peking

Awesome! Just what I need right now. I will add it to Glasquare (4sq for Glass) – Dobla

Send pull requests, if you have any issues integrating it! PS. Glasquare is nice! – Peking

Exactly what I was looking for! For my case I needed to be notified when the animation finished so I forked your repo and created a listener for it. github.com/Viddi/Glass-SliderView Thanks again! – Strohl

Sweet! Can you think of any way to do this directly on a Live Card Remote View? – Trahan

@Trahan I'm not sure, if you can do it using RemoteViews. Probably, you can try using that on LiveCard via frequent updates. – Peking

Answer 3

This comes pretty close, but the color is off (blue/teal/whatever instead of white).

style="?android:attr/progressBarStyleHorizontal"

Sample (via OkGlassFindACat):

<ProgressBar
    android:id="@+id/someProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminate="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" />

I definitely haven't figured out how to override that color, though.

Apperception

Answer 4

I know I'm late but here's my version :)

https://github.com/prt2121/glass-gdk-progressbar

adding to your project in the gradle file

compile 'com.github.prt2121:ProgressBar:1.0@aar'

screenshot:

changing color

app:progress_color="@android:color/holo_blue_bright"

Vicariate

Answer 5

The GDK overrides themes for some widgets automatically to provide a proper Glass-like appearance, such as TextView. For widgets that don't yet have that theming, please file an issue here so that we can track it.

Wayne

Answer 6

I put together the answer above to create a general layout for my card-list loader activities. Here's the layout file card_scroll_with_progress_layout.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <com.google.android.glass.widget.CardScrollView
        android:id="@+id/card_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:indeterminate="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

</FrameLayout>

Then in the onCreate I get the progress bar and set it rolling:

View rootLayout = getLayoutInflater()
                      .inflate(R.layout.card_scroll_with_progress_layout, null);
mProgressBar = (ProgressBar)rootLayout.findViewById(R.id.progress_bar);
mProgressBar.setVisibility(View.VISIBLE);
mCardScrollView = (CardScrollView)rootLayout
                      .findViewById(R.id.card_scroll_view);
mCardScrollView.setAdapter(mAdapter);
setContentView(rootLayout);

Later on in my loader callback I hide the progress bar and activate the card scroll view:

public void onLoadFinished(Loader<Cursor> loader, Cursor data) {
    if (loader.getId() == mLoaderId) {
        mAdapter.swapCursor(data);
        mProgressBar.setVisibility(View.GONE);
        mCardScrollView.activate();
    }
}

This seems to be working well as a paradigm for handling various json loading into a list of cards in the GDK.

Dyslexia

Answer 7

We have been having a similar issue and found a hybrid approach that works for us. We use the standard progress bar @patridge mentioned in a previous post and applied generated Holo styles provided by Android Holo Colors.

We were able to generate a white progress bar images, animation, layer and style that looks very similar to the built in GDK version. You can increase the height of the bar to match the GDK by editing the size of Holo Color's generated png images.

You will need the generated files included in your project, but here is what our theme looks like afterwards:

<style name="OurGlassTheme" parent="@android:style/Theme.DeviceDefault.NoActionBar.Fullscreen">
    <item name="android:progressBarStyleHorizontal">@style/ProgressBarGlass</item>
</style>
<style name="ProgressBarGlass" parent="android:Widget.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/glass_progress_horizontal_holo_light</item>
    <item name="android:indeterminateDrawable">@drawable/glass_progress_indeterminate_horizontal_holo_light</item>
    <item name="android:minHeight">16dip</item>
    <item name="android:maxHeight">16dip</item>
</style>

I know it's super tedious, but it gets us there while @giladgo 's accepted submission to the Glass developers to provide a GDK Progress Bar is finished.

Inverness

Answer 8

Try to use ProgressBar from zoom-in project.

Whitefly