19

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!

giladgo
  • 393
  • 3
  • 12
  • 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 – Darren Nov 27 '13 at 14:42

8 Answers8

25

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.

Here's a demo of what was achieved

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

Here's a demo of MessageDialog

Ostap Andrusiv
  • 4,488
  • 1
  • 33
  • 36
  • 2
    Awesome! Just what I need right now. I will add it to Glasquare (4sq for Glass) – David Vávra Jan 26 '14 at 21:43
  • Send pull requests, if you have any issues integrating it! PS. Glasquare is nice! – Ostap Andrusiv Jan 26 '14 at 21:55
  • 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. https://github.com/Viddi/Glass-SliderView Thanks again! – user990230 Feb 16 '14 at 04:33
  • Sweet! Can you think of any way to do this directly on a Live Card Remote View? – swooby Apr 10 '14 at 02:59
  • @swooby I'm not sure, if you can do it using RemoteViews. Probably, you can try using that on LiveCard via frequent updates. – Ostap Andrusiv Apr 10 '14 at 11:58
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" />

Glass progress bar using progressBarStyleHorizontal

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

patridge
  • 25,457
  • 16
  • 86
  • 129
3

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:

white

changing color

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

enter image description here

pt2121
  • 11,060
  • 7
  • 50
  • 68
3

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

rslk
  • 46
  • 1
2

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.

Tony Allevato
  • 6,369
  • 1
  • 27
  • 33
1

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.

johnarleyburns
  • 1,482
  • 12
  • 13
0

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.

Dayel Ostraco
  • 1,673
  • 1
  • 13
  • 15
0

Try to use ProgressBar from zoom-in project.

e.shishkin
  • 1,155
  • 12
  • 9