Have you seen those apps with the really cool hand drawn arrows that show the users how the app works the first time they run it? Yeah I have too and I wanted to figure out how to do that. So I did. Now I'm going to show you also.
This is going to be pretty easy and we'll do it for Activities and Fragments so all your apps will be covered.
The first thing you'll need to do is draw the pictures that we'll place over the Activity/Fragment. I draw mine on Gimp but you can use whatever drawing tool you want. I recommend you draw them 480 X 760 px. You'll want to set your background as Transparent. Here is a sample of what I've done.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
That's easy enough. I recommend you draw these as you go, I've found that I needed to edit the images to make sure they are pointing to the exact right place on the screen.
Next up we'll create an XML layout for each image that you want to use in your app. We'll create a LinearLayout with an embedded ImageView. The ImageView will display our beautiful art from above. Make sure to give the LinearLayout an ID, set the background to @null. As for the ImageView you'll need to give it an ID also and set the source to the image file you drew previously. Be sure to put the image in the res/drawable folder, make sure the image file name is all lower case and it is a .png file type. Again you will need to create as many of these XML layouts as you did images above.
overlay_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/llOverlay_activity"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background= @null"
androidrientation="vertical" >
<ImageView
android:id="@+id/ivOverlayEntertask"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/activity_overlay" />
</LinearLayout>
We are going to control when this is displayed to the user with SharedPreferences. Utilizing SharePreferences gives us the ability to show the tutorial on the first run of the app and also allows the user to see it again by selecting it in the apps Settings menu.
We'll need to create a folder under /res/ named /xml, so you'll end up with /res/xml. Now let's create a new XML layout for our preferences. In Eclipse you'll choose File New > Android XML file. Change the Resource Type to Preference, then name the file exactly this prefs.xml and click Finish.
Next we'll add a CheckBoxPreference with the following attributes:
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial"
So your final prefs.xml file will look exactly like this:
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >
<CheckBoxPreference
android:defaultValue="true"
android:key="tutorial"
android:summary="Enable tutorial on device"
android:title="Tutorial" />
</PreferenceScreen>
Now let's look at how to show this to the user from our Activity or Fragment. First we'll determine if our tutorial CheckBoxPreferene is set to true and if so we'll display the drawing on top of the current Activity/Fragment.
Create and instance of SharedPreferences and a boolean to store the value:
SharedPreferences setNoti;
boolean showTut;
Then in our OnCreate we'll get the value for our tutorial CheckBoxPreference and if ti's true we'll overlay the image onto our Activity/Fragment:
setNoti = PreferenceManager.getDefaultSharedPreferences(this);
// SharedPref tutorial
showTut = setNoti.getBoolean("tutorial", true);
if (showTut == true) {
showActivityOverlay();
}
Now for the last part we'll create the method to display the overlay. We will create a Dialog and apply a translucent theme with no title bar, this provides a dialog that covers our activity but doesn't hide our notification bar.
private void showActivityOverlay() {
final Dialog dialog = new Dialog(this,
android.R.style.Theme_Translucent_NoTitleBar);
dialog.setContentView(R.layout.overlay_activity);
LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {
@override
public void onClick(View arg0) {
dialog.dismiss();
}
});
dialog.show();
}
We'll use a method like this whereever we want to display the overlay to our users. When we get to the last overlay it is best to change the value in our SharedPreferences so we don't continue showing the overlays to the user. We do that with this variation on our above method where in the onClick we update the SharePreferences to set our tutorial to false.
private void showActivityOverlay() {
final Dialog dialog = new Dialog(getActivity(), android.R.style.Theme_Translucent_NoTitleBar);
dialog.setContentView(R.layout.overlay_activity);
LinearLayout layout = (LinearLayout) dialog
.findViewById(R.id.llOverlay_activity);
layout.setBackgroundColor(Color.TRANSPARENT);
layout.setOnClickListener(new OnClickListener() {
@override
public void onClick(View arg0) {
// Get SharedPrefs
PreferenceManager.setDefaultValues(getActivity(), R.xml.prefs, true);
SharedPreferences setNoti = PreferenceManager
.getDefaultSharedPreferences(getActivity());
setNoti.edit().putBoolean("tutorial", false).commit();
showTut = false;
dialog.dismiss();
}
});
dialog.show();
}
And there you have it! As I mentioned at the begging of this post, this can be applied to an Activity or a Fragment. You'll notice in the last method instead of using the context of "this" I'm using the context of "getActivity()", that is the only change you have to make for this to work with a Fragment.
I am publishing the full code on my GitHub. Please feel free to leave comments, questions or your own pointers below.
https://github.com/marty331/overlaytutorial
Thanks for reading!
Cool guide.
I suggest adding [GUIDE] or [HOW-TO] to the thread title to make it easier to find. I thought it was a question when I clicked on it.
marty331 said:
I recommend you draw them 480 X 760 px.
[...]
overlay_activity.xml
Code:
[/QUOTE]
Where's your code? :(
Personally, I'd use Inkscape to create them as a *.svg and convert them to a *.png file later. That way they will not look pixelated.
Click to expand...
Click to collapse
nikwen said:
Where's your code?
Personally, I'd use Inkscape to create them as a *.svg and convert them to a *.png file later. That way they will not look pixelated.
Click to expand...
Click to collapse
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.
marty331 said:
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.
Click to expand...
Click to collapse
Great. Thank you.
The only thing which would be even better now would be using
Code:
tags. ;)
I didn't do much with it. However, scaling SVGs looks much better because they consist of single lines and shapes which can be rendered for all densities.
The disadvantage is that it is more difficult to create good-looking graphic effects in SVG.
I just found the Showcaseview library. It looks very promising.
Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView
nikwen said:
I just found the Showcaseview library. It looks very promising.
Homepage: http://espiandev.github.io/ShowcaseView/
Github code: https://github.com/Espiandev/ShowcaseView
Click to expand...
Click to collapse
nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!
marty331 said:
nikwen,
ShowcaseView is really awesome, I agree. However, it does not work with Fragments yet. Super bummer!
Click to expand...
Click to collapse
Why do you think so?
Shouldn't this work? Correct me if I am wrong.
Code:
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
sv = ShowcaseView.insertShowcaseView(R.id.buttonBlocked, getActivity(), R.string.showcase_main_title, R.string.showcase_main_message, co);
(Code based on this: https://github.com/Espiandev/Showca...andev/showcaseview/sample/SampleActivity.java)
I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.
marty331 said:
I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.
Click to expand...
Click to collapse
Ok, that's strange.
Thanks exactly what I was looking for!
Sent from my Galaxy Nexus using Tapatalk 4 Beta
marty331 said:
I agree that it should, however it does not. I've emailed the developer and he said he will work on it. If you want to use ShowcaseView in an activity it works very well.
Click to expand...
Click to collapse
I got it to work.
I will push my code to Github later, but I will improve it before.
Then I will write a tutorial for that.
Here is my pull request: https://github.com/Espiandev/ShowcaseView/pull/68
Guide for doing it using the ShowcaseView library: http://forum.xda-developers.com/showthread.php?t=2419939
This guide is great. Thanks again. Please understand that by posting this I don't want to criticise, offend or denigrate you.
You got mentioned in my guide.
marty331 said:
Somehow my post was corrupted, I edited it and re-pasted everything.
I haven't tried Inkscape, but am up for giving that a go.
Click to expand...
Click to collapse
I think you should also disable smiles in the OP!
androidrientation=„blahblahblah” is android(smile)rientation!
great tut.
thanks
cascio97 said:
I think you should also disable smiles in the OP!
androidrientation=„blahblahblah” is android(smile)rientation!
Click to expand...
Click to collapse
I always use another trick:
Code:
android:[B[I][/I]][/B[I][/I]]orientation
The result:
Code:
android:[B][/B]orientation
That allows you to use smileys in other parts of the post.
nikwen said:
I always use another trick:
Code:
android:[B[I][/I]][/B[I][/I]]orientation
The result:
Code:
android:[B][/B]orientation
That allows you to use smileys in other parts of the post.
Click to expand...
Click to collapse
Thank you! didn't know about this one!
Sent from my Galaxy Nexus using XDA Premium 4 mobile app
Related
[GUIDE] Holo-themed transparent demo overlays
Lately I found a great tutorial by @marty331 explaining how to create transparent demo pages on Android.
I really liked his guide. Thanks again. :good:
However, I am no graphics designer. So the pages wouldn't look very good for me.
I did a little research on the internet and found the ShowcaseView library by Alex Curran. It is licensed under an Apache 2.0 License. You can find its source code here.
It is very easy to get stunning, holo-themed results with the library:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
(Source: https://raw.github.com/amlcurran/ShowcaseView/master/example.png)
Demo app
The developer put a demo app on Google Play to showcase what you can do with the library:
Set-up
For the set-up I'll quote the developer:
For people who use Maven, ShowcaseView should work immediately without any issues. If you aren't, you'll need to download the NineOldAndroids library and add it as a dependency library to the ShowcaseView library. Then add ShowcaseView as a library dependency to your project, and you're done!
WARNING: Sometimes Eclipse/IDEA will automatically import the non-NineOldAndroid versions of the animation classes, which will cause crashes on versions of Android below 3.0. Check that your imports start with com.nineoldandroids.animation and not android.animation.
Click to expand...
Click to collapse
(Source: https://github.com/amlcurran/ShowcaseView#set-up)
Showcasing views
Showcasing views is really easy:
Code:
public class MyActivity extends Activity {
ShowcaseView sv;
[user=439709]@override[/user]
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);
}
}
That's it.
Showcasing views in Fragments
It is a bit different for Fragments though:
Code:
public class ShowcaseFragment extends Fragment {
ShowcaseView sv;
[user=439709]@override[/user]
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_layout, container);
}
[user=439709]@override[/user]
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, getActivity(), R.string.showcase_title, R.string.showcase_message, co);
}
}
To show the ShowcastView setContentView() needs to be called in the Activity first.
So you have to put the code into the onActivityCreated() method.
Setting listerners
You can also add listeners to the ShowcastView:
Code:
sv.setOnShowcaseEventListener(new ShowcaseView.OnShowcaseEventListener() {
[user=439709]@override[/user]
public void onShowcaseViewHide(ShowcaseView showcaseView) {
//The view is hidden/dismissed
}
[user=439709]@override[/user]
public void onShowcaseViewShow(ShowcaseView showcaseView) {
//The view is shown
}
});
Animations
You can also add animations to your app, i.e. a virtual finger performing a gesture.
First you need to showcase the view as above. Then use this method of ShowcaseView:
Code:
public void animateGesture(float offsetStartX,
float offsetStartY,
float offsetEndX,
float offsetEndY)
All values are relative to the center of the view.
For example this is a swipe upwards, beginning at the center of the view:
Code:
sv.animateGesture(0, 0, 0, -400);
Showcasing parts of the ActionBar
Another possiblity is to showcase ActionItems:
(Source: https://lh6.ggpht.com/C7upo-Cx63WFidih9txS-FXpprPd4YtmBim3yLd1YtYIm5m5fLytz-8EQg4qo0QAnw=h900)
This is how to do it:
Code:
[user=439709]@override[/user]
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
sv = ShowcaseView.insertShowcaseViewWithType(ShowcaseView.ITEM_ACTION_ITEM, R.id.menu_item1, this,
R.string.showcase_title, R.string.showcase_message, new ShowcaseView.ConfigOptions());
return super.onCreateOptionsMenu(menu);
}
(Replace "this" by "getActivity()" in a Fragment.)
There are also other things in the ActionBar which can be highlighted. Just replace ITEM_ACTION_ITEM in the example above with the proper constant:
ITEM_ACTION_ITEM: An ActionItem
ITEM_ACTION_OVERFLOW: The action overflow (The three dots at the right side of the ActionBar which appears if not all items can be shown as icons.)
ITEM_TITLE: The title
ITEM_ACTION_HOME: HOME arrow in the ActionBar
ITEM_SPINNER: A spinner in the ActionBar
Click to expand...
Click to collapse
Customization options
The ShowcaseView can be customized using the ShowcaseView.ConfigOptions object you pass to the ShowcaseView.insertShowcaseView() method.
For some strange reason, there are no getter/setter methods for that class. So you can access the fields of that class directly.
This is the basic code for the following code snippets:
Code:
ShowcaseView.ConfigOptions co = new ShowcaseView.ConfigOptions();
co.hideOnClickOutside = true;
ShowcaseView sv = ShowcaseView.insertShowcaseView(R.id.showcasedView, this, R.string.showcase_title, R.string.showcase_message, co);
Don't respond to touches outside the showcased area
Code:
co.hideOnClickOutside = false;
co.block = true;
The field "block" determines whether the app will respond to touches outside the showcased area.
Don't hide the ShowcaseView on touches outside the showcased area
Code:
co.hideOnClickOutside = false;
The field "hideOnClickOutside" determines whether the view will be hidden when the screen is touched outside the highlighted area.
Set a fade-in or fade-out duration
The proper fields:
Code:
co.fadeInDuration = 1000;
co.fadeOutDuration = 1000;
Using these fields, you can set the time it will take the ShowcaseView to fade in or out.
Don't overlay the ActionBar
Code:
co.insert = ShowcaseView.INSERT_TO_VIEW;
This field allows you to determine whether the ShowcaseView will overlay the ActionBar.
Possible values:
ShowcaseView.INSERT_TO_DECOR: Will overlay the ActionBar
ShowcaseView.INSERT_TO_VIEW: Will just overlay the content, but not the ActionBar
Click to expand...
Click to collapse
Hide the button
Code:
co.noButton = true;
This field allows you to hide the button of the ShowcaseView.
Show the overlay only once
Code:
co.shotType = ShowcaseView.TYPE_ONE_SHOT;
This field determines how often the overlay should be shown.
Possible values:
ShowcaseView.TYPE_NO_LIMIT: Every time the Activity is opened
ShowcaseView.TYPE_ONE_SHOT: Only once
Click to expand...
Click to collapse
Change the circle radius
Use the method setShowcaseIndicatorScale(float scaleMultiplier) of ShowcaseView for that:
Code:
sv.setShowcaseIndicatorScale(1.5f);
Theming
The ShowcaseView library offers plenty of options to adjust the appearance of the ShowcaseView.
Fortunately, the library allows you to theme the ShowcaseView as a whole.
To theme the appearance of the ShowcaseView you need to create a style derived from either the ShowcaseView or ShowcaseView.Light style:
Code:
<style name="CustomShowcaseTheme" parent="ShowcaseView.Light">
<item name="sv_backgroundColor">#33ffbb33</item>
<item name="sv_buttonBackgroundColor">#CF3119</item>
<item name="sv_buttonText">Close</item>
<item name="sv_titleTextAppearance">@style/CustomTitle</item>
<item name="sv_detailTextAppearance">@style/CustomDetailText</item>
</style>
(Add this to your /res/values/styles.xml file.)
The different options allow you to change the colors of the View and the text of the button.
The text styling is done using TextAppearance styles like this:
Code:
<style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title">
<item name="android:textColor">#00801A</item>
</style>
<style name="CustomDetailText" parent="TextAppearance.ShowcaseView.Detail">
<item name="android:textColor">#00801A</item>
</style>
(Add this to your /res/values/styles.xml file.)
For a lighter theme, use "TextAppearance.ShowcaseView.Title.Light" and "TextAppearance.ShowcaseView.Detail.Light" as parent themes instead.
Then add this to the /res/values/styles.xml file as well:
Code:
<style name="CustomAppTheme" parent="android:Theme.Light">
<item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>
(You might want to replace Theme.Light by another one.)
Furthermore, add this to the /res/values-v14/styles.xml file:
Code:
<style name="CustomAppTheme" parent="android:Theme.Holo.Light">
<item name="showcaseViewStyle">@style/CustomShowcaseTheme</item>
</style>
(You might want to replace Theme.Holo.Light by another one.)
The last step is adding this to the <application> tag in your AndroidManifest.xml:
Code:
<application
android:theme="@style/CustomAppTheme"
... />
You're done. You successfully themed your ShowcaseView.
Attributions
Big thanks to Alex Curran for the library.
I wouldn't have got the idea to write this guide without @marty331's guide. Thank you, Marty.
Moreover, I got inspired by the sample folder of the ShowcaseView project.
This was featured on the XDA portal on August 31, 2013.
cool guide, thanks. Nice work on the pull request too.
Question.
does this allow for showcasing an expanded action item(overflow for example), or do you have to showcase the overflow, have the user select it and keep the showcase highlight?
Good Tutorial, many thanks!
Inviato dal mio Galaxy Nexus
Good job figuring this out, looks like it just needed to be called from onActivityCreated. I'm going to use this in my app instead of the Overlay View I came up with.
CrotaNexus said:
Good Tutorial, many thanks!
Inviato dal mio Galaxy Nexus
Click to expand...
Click to collapse
marty331 said:
Good job figuring this out, looks like it just needed to be called from onActivityCreated. I'm going to use this in my app instead of the Overlay View I came up with.
Click to expand...
Click to collapse
Thanks.
out of ideas said:
cool guide, thanks. Nice work on the pull request too.
Question.
does this allow for showcasing an expanded action item(overflow for example), or do you have to showcase the overflow, have the user select it and keep the showcase highlight?
Click to expand...
Click to collapse
Thanks.
Well, I haven't tried that yet. Try it yourself and tell us.
If it does not work, create an issue on Github.
Added the first customization options.
Just finished the theming section and therefore the whole guide.
So, it does not matter where the view belongs to? Can I use it to showcase a button of a View which was attached to the window by service?
Dr.Alexander_Breen said:
So, it does not matter where the view belongs to? Can I use it to showcase a button of a View which was attached to the window by service?
Click to expand...
Click to collapse
With the current sources you can't. Just have a look at the ShowcaseView class:
Code:
public static ShowcaseView insertShowcaseView(View viewToShowcase, Activity activity, int title,
int detailText, ConfigOptions options) {
ShowcaseView sv = new ShowcaseView(activity);
if (options != null)
sv.setConfigOptions(options);
if (sv.getConfigOptions().insert == INSERT_TO_DECOR) {
((ViewGroup) activity.getWindow().getDecorView()).addView(sv);
} else {
((ViewGroup) activity.findViewById(android.R.id.content)).addView(sv);
}
sv.setShowcaseView(viewToShowcase);
sv.setText(title, detailText);
return sv;
}
But you might be able to change the library with not too much effort to make that possible, too.
Did someone mention? You are on the portal, sir! Congratulations! I like this demo overlays, good way to explain apps, like a mini tutorial.
But to be mentioned on the portal is nothing new to you
benkxda said:
Did someone mention? You are on the portal, sir! Congratulations! I like this demo overlays, good way to explain apps, like a mini tutorial.
But to be mentioned on the portal is nothing new to you
Click to expand...
Click to collapse
Nobody mentioned that yet but I saw it this morning.
Thanks.
Due to a new update to the library I'll have to rewrite the styling section.
Hmmm....I feel time to apply for RC
Sent from my GT-N7000 using xda app-developers app
vijai2011 said:
Hmmm....I feel time to apply for RC
Sent from my GT-N7000 using xda app-developers app
Click to expand...
Click to collapse
Thanks.
However, you have to be a member for 9 months to apply for RC. So I'll have to wait two months.
Great tutorial.
Helped a lot.
I had one question, is there any way to use Showcase View in Preferences or Preferences Fragments??
Sent from my GT-I9300 using XDA Premium 4 mobile app
Akshay (Aky) said:
Great tutorial.
Helped a lot.
I had one question, is there any way to use Showcase View in Preferences or Preferences Fragments??
Sent from my GT-I9300 using XDA Premium 4 mobile app
Click to expand...
Click to collapse
Thanks.
Well, there is a insertShowcaseView() method you can pass a View to. Try that one. And please report whether it works for you.
If you cannot get it to work, I'll try it at the weekend.
setTextColors() seems to be gone is there a new way to change them or is it only possible via Theme now?
nikwen said:
Thanks.
Well, there is a insertShowcaseView() method you can pass a View to. Try that one. And please report whether it works for you.
If you cannot get it to work, I'll try it at the weekend.
Click to expand...
Click to collapse
Thanks, I will try it out.
Will report it.
Sent from my GT-I9300 using XDA Premium 4 mobile app
This is a project that I whipped together to show developers how to implement a floating window type popup for their apps. An example usage would be quick reply to a sms message, email, or any other times quick reply would come in handy. It isn't limited to just that though, using this method, you will be able to completely recreate any activity in windowed form with very little code edits.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
My brother an I have used this to create a quick reply for our app, Sliding Messaging Pro. The idea is basically the exact same as Halo, with almost the exact same implementation. We do it by extending the MainActivity in a pop up class, then using an overrode setUpWindow() function to set up your MainActivity in the window.
The full source is availible on my GitHub, found here: Floating Window GitHub
Play Store Link: Floating Window Demo
So now to the actual steps to creating your own "floating window popup" out of your apps MainActivity:
1.) First, we should add the styles that we are going to use to the styles.xml sheet.
These are the styles for the animation, of course you can define your own animation if you choose, these will bring the window up from the bottom of the screen and the close it to the bottom of the screen.
Code:
<style name="PopupAnimation" parent="@android:style/Animation">
<item name="android:windowEnterAnimation">@anim/activity_slide_up</item>
<item name="android:windowExitAnimation">@anim/activity_slide_down</item>
</style>
Now, this style is for the actual popup dialog box. You can play with the different values here all you want. We end up overriding some of these when we set up the window anyways, such as the dimming.
Code:
<style name="Theme.FloatingWindow.Popup" parent="@android:style/Theme.Holo.Light" >
<item name="android:windowIsFloating">false</item>
<item name="android:windowSoftInputMode">stateUnchanged</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowAnimationStyle">@style/PopupAnimation</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
2.) Now that your styles are set up, lets go ahead and add the new Popup activity to the manifest. You can see that we used the Theme.FloatingWindow.Popup style that we just defined in the last step. You will also have to add
Code:
xmlns:tools="http://schemas.android.com/tools"
to the xmlns declarations at the top of the manifest.
Code:
<activity
android:name="PopupMainActivity"
android:label="@string/app_name"
android:theme="@style/Theme.FloatingWindow.Popup"
android:configChanges="orientation|screenSize"
android:windowSoftInputMode="adjustResize|stateAlwaysHidden"
android:clearTaskOnLaunch="true"
android:exported="true"
tools:ignore="ExportedActivity" />
3.) One more thing that we have to put in before you have resolved all the errors here, the animations. Just copy and paste these two animations in separate files under the res/anim folder. Name one activity_slide_down.xml and the other activity_slide_up.xml
activity_slide_down.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="100%"
android:duration="300"/>
</set>
activity_slide_up.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="100%" android:toYDelta="0%"
android:duration="300"/>
</set>
4.) Now that everything should be set up, we will make the actual popup activity! You can view my full code for this from the GitHub link, but basically, we are going to make a PopupMainActivity.java class and extend the MainActivity class. If you understand inheritance at all with java, you will know what this is doing. It is going to allow this PopupMainActivity class, when started, to override methods from the MainActivity to produce different outcomes.
The method that actually makes the windowed pop up I have named setUpWindow(). This means that whenever this activity is called instead of the main activity, it will use this method instead of the main activities setUpWindow() method. This is very convieniet since we don't want to do any extra work than we need to in this class. So here is the code for that class:
Code:
/**
* This method overrides the MainActivity method to set up the actual window for the popup.
* This is really the only method needed to turn the app into popup form. Any other methods would change the behavior of the UI.
* Call this method at the beginning of the main activity.
* You can't call setContentView(...) before calling the window service because it will throw an error every time.
*/
@Override
public void setUpWindow() {
// Creates the layout for the window and the look of it
requestWindowFeature(Window.FEATURE_ACTION_BAR);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND,
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
// Params for the window.
// You can easily set the alpha and the dim behind the window from here
WindowManager.LayoutParams params = getWindow().getAttributes();
params.alpha = 1.0f; // lower than one makes it more transparent
params.dimAmount = 0f; // set it higher if you want to dim behind the window
getWindow().setAttributes(params);
// Gets the display size so that you can set the window to a percent of that
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
// You could also easily used an integer value from the shared preferences to set the percent
if (height > width) {
getWindow().setLayout((int) (width * .9), (int) (height * .7));
} else {
getWindow().setLayout((int) (width * .7), (int) (height * .8));
}
}
You can see what it does from the comments, but basically, it just initializes your main activity in a windowed for, exactly what we are trying to do!
5.) Now to actually have this method override something in the MainActivity, you must add the same method there. In my example, The method is just blank and has no implementation because i don't want it to do anything extra for the full app. So add this activity and the error that "your method doesn't override anything in the super class" will go away. Then you actually have to call this method from your MainActivity's onCreate() method so that it will set up the windowed app when it is suppose to.
Code:
/**
* Called when the activity is first created to set up all of the features.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
context = this;
// If the user is in the PopupMainActivity function, the setUpWindow function would be called from that class
// otherwise it would call the function from this class that has no implementation.
setUpWindow();
// Make sure to set your content view AFTER you have set up the window or it will crash.
setContentView(R.layout.main);
// Again, this will call either the function from this class or the PopupMainActivity one,
// depending on where the user is
setUpButton();
}
As you can see from the code, I called this method before i set the content view for the activity. This is very important, otherwise you will get a runtime exception and the app will crash every time.
After you are done with that, you have successfully set up a program that will change from a windowed state to a full app state depending on which class is called. For example, if you set up an intent to open the floating window app, it would look something like this:
Code:
Intent window = new Intent(context, com.klinker.android.floating_window.PopupMainActivity.class);
window.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(window);
You are still able to call the MainActivity class like you normally would then. with an intent like this:
Code:
Intent fullApp = new Intent(context, MainActivity.class);
fullApp.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(fullApp);
That is just about it, obviously my solution and demo are very simple implementations of what it can do. You can see from the demo app that I simply go back and forth between the activities with a button, then i have an edittext at the bottom to demonstrate how the window resizes.
You can literally do anything with this though. It will work with any layouts you have set up and is a very cool way for your users to experience your app in a different light. If you want to change how something works in the popup part of the app, all you have to do is function that portion of code out, then override that method from the popup activity, so the possibilities are endless with what can be done here.
Credit for this goes to the Paranoid Android team of course for inspiring the idea, then Jacob Klinker (klinkdawg) and myself (Luke Klinker) for the implementation without framework tweaks or custom roms. This should work for any users, no matter the phone, android version, or custom rom.
I honestly have no clue if it will work on anything below 4.0, but if you test and find out, sound off in the comments!
Thanks and enjoy! I hope to see lots of dynamic and awesome popups in the future because it really is just that simple, it won't take you more than a half hour to get this working!
I love your Sliding Messaging app. Really awesome work. The BEST messaging app out there. I'm in the beta group. Thank you for this information!
Sent from my XT875 using Tapatalk
I assume that this tutorial works with gingerbread..?
aniket.lamba said:
I assume that this tutorial works with gingerbread..?
Click to expand...
Click to collapse
It says at the bottom of the article that I don't know if it will work on anything below ICS. It relies on a dialog theme, which obviously existed pre ICS, but I have no way of checking if it works the same or not. Try it and let me know I guess!
Thank you for your sharing.
I used your example to add this amazing feature into Telepatch, an Open Source project, fork of Telegram
Thanks again!
[Idea] Create FloatingActivity type
This is an extremely awesome project, easy to implement, and very light weight, however, the only problem is that when i call the floating activity for example from a notification or whatever, the background activity closes, and i haven't been able to get around it
However, just an idea, which is what i did, create a separate Activity and put the setUpWindow() method in it, and override the onCreate() method and setUpWindow() in it, and after that, you can just create any activity and extends the FloatingActivity class and you're done, just make sure that you call super.onCreate() if you (probably) overrided the onCreate() method:laugh:
Hi, I've tried your solution. It works perfectly!
But when we touch homescreen button, the app is minimized. How can we make it persistent?
How to make truecaller like floating window..for incoming calls
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
coolbud012 said:
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
Click to expand...
Click to collapse
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
SimplicityApks said:
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
Click to expand...
Click to collapse
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
coolbud012 said:
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
Click to expand...
Click to collapse
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
SimplicityApks said:
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
Click to expand...
Click to collapse
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
coolbud012 said:
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
Click to expand...
Click to collapse
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
SimplicityApks said:
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
Click to expand...
Click to collapse
seems to be a great idea but...I had dropped out the idea of header and instead simplified the app header a bit...
Have a look at https://play.google.com/store/apps/details?id=com.droidacid.apticalc
U can create one Base Activity which extends "FragmentActivity" or "SherlockFragmentActivity"(if u use it) and then put that header on the top...below it create a fragment and in the whole app just replace that fragment and stay in one activity only..then u just need to have only one layout for the header and you can do the rest very easily....
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Download
https://github.com/FaizMalkani/FloatingActionButton
Instructions:
Place the FAB in a FrameLayout and add your layouts above the FAB view. For best results, keep the FAB height and width at 72dp and in the bottom right of the FrameLayout
Code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
Your layouts here. Do not put anything below the FAB layout
-->
<com.faizmalkani.floatingactionbutton.sample.Fab
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
</FrameLayout>
Initialize your FAB in your activity's onCreate()
Code:
Fab mFab = (Fab)findViewById(R.id.fabbutton);
Initialize your FAB in your activity's onCreate()
Fab mFab = (Fab)findViewById(R.id.fabbutton);
If needed, call the other methods of the FAB
Code:
mFab.hideFab();
mFab.showFab();
mFab.setAlpha();
mFab.setOnClickListener();
Nice one, what's holding this back from being used on pre jb devices?
Can Sherlock be used to solve some of the comparability dependencies?
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Jeeko said:
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Click to expand...
Click to collapse
You can do something like this, with a scrollview or a list view if you like:
http://android-ed.blogspot.co.uk/2013/09/hiding-bottom-actionbar-during-scrolling.html
Replace the setVisibility calls with show and hide though
This app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Laur3nt1u said:
I don't know how Google came with this button but this app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Click to expand...
Click to collapse
tho that button looks bad XD, google does copy a lot of stuff from different sources so dont worry bout it
this is probably a dumb question, but could somebody give me a easier tutorial on how to do this? i would really like to try it but i dont really understand how it should be done. im all new to android again after som years with crapple.
thanks in advanced
Thanks for the library, the sample apk looks great.
Importing in Android Studio (I tried many ways) I always have this error, looks like corrupted .png's
Someone else?
h**p://i.gyazo.com/2d17ddabae4e5502bd6fed109e788d68.png
Try copying the FAB Class to your projects src.
Alternatively, if you can wait a few days, I'll be merging a pull request that adds Gradle support
Quinny899 said:
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
Click to expand...
Click to collapse
great work
looks FABULOUS :laugh: using it in my next app .. thanks :good:
Idea
Hey, thank you for your effort. The FAB looks really good.
To further follow the new design guideline I would suggest that you extend your
Code:
setFabDrawable(Drawable fabDrawable)
method by one line.
Code:
public void setFabDrawable(Drawable fabDrawable)
{
Drawable myDrawable = fabDrawable;
mBitmap = ((BitmapDrawable) myDrawable).getBitmap();
[COLOR="Red"]mBitmap = Bitmap.createScaledBitmap(mBitmap, dpToPx(24), dpToPx(24), true);[/COLOR]
invalidate();
}
This makes the fabIcon as big as it should be regardless the source.
Thanks anyways.
Thanks
For some reason I keep getting this error, although I think all files are in the right place..
"Rendering Problems The following classes could not be found:
-*com.faizmalkani.floatingactionbutton.Fab (Fix Build Path, Create Class)
Tip: Try to build the project. "
What could I do to fix this?
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
I can test an apk if its ready. drop me a load don't be shy
ywwynm said:
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
Click to expand...
Click to collapse
It's working, it just doesn't render in the XML builder
Sent from my Nexus 7 using Tapatalk
Faiz Malkani said:
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Click to expand...
Click to collapse
It seems you completely miss to recycle the typed array with a try finally block in the constructor of your custom view.
Problem with Android Studio
Hey, thank you very much for this library, on eclipse all works fine, but in android studio, the little image in the floating action button doesn't display, this is a part of my xml layout file:
Code:
<com.faizmalkani.floatingactionbutton.FloatingActionButton
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:onClick="fabClicked"
android:drawable="@drawable/ic_action_new"/>
All this is at the end of a framelayout, where is the error? Thank you in advance
Sorry for my bad english
Programming for Wearable Products of Sony (SmartEye-Glass)
The newest wearable project of Sony is the SmartEye-Glass. As we know Sony was one of the first company that seriously worked on smart wearable tech, actually Smart-Watch word is for Sony from the first generation of Smart-Watch.
Because There is lots of & Tutorial for SmartWatch I decided to start with SmartEye-Glass. However this is still preview of this SDK & I will update this tutorial as soon as final sdk release.
Imagine that you walk into an airport and instantly get directions to your check-in desk, or that you get scores and names of players displayed while watching a football game in real life. These are just some of the potential use cases of the new SmartEyeglass concept from Sony... read more
Click to expand...
Click to collapse
### Let Start ###
To use this tutorial & test the apps
you don't need to know anything
But if you interest to work more
you should know at least basic of Android/Java Programming
Click to expand...
Click to collapse
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1. Install SmartEyeGlass SDK (Preview)
* Android SDK Manager:
- Open SDK-Manager go to > Tools > Manager Add-on Sites > User Defined (tab) > New > Add this URL
HTML:
http://dl.developer.sony.com/wearables/sdks/Sony-SmartEyeglass-SDK.xml
- Close & Relaunch the SDK-Manager
- In API-18 section you should have Sony
HTML:
SmartEyeGlass SDK Developer Preview
- Select & Install
* Manually:
- I attached the Compiled Library of SmartEyeGlass.
Download, unzip & Import to your WorkSpace
- To Develop Or Compile Sample code you should Add this library to your project
Code:
Right Click on Project > Properties > Android > in Library section > Add & Select All three package.[/CODE
[CENTER]***
[B]Ready To Coding for SmartEyeGlass[/B]
[B]^-^-^[/B]
[LEFT][SIZE=5][COLOR=DimGray]2. [B]Starting...
[/B][/COLOR][/SIZE]As Sony recommends, It s better to [B]Import Samples & Modify [/B]It. But will explain little bit about each part.
[FONT=Century Gothic][SIZE=4][FONT=Comic Sans MS]
#First For those who just want to test[/FONT][/SIZE][/FONT][B][FONT=Century Gothic][SIZE=4]
[/SIZE][/FONT][/B][FONT=Century Gothic][SIZE=3][FONT=Comic Sans MS]1. Download & Install [URL="http://forum.xda-developers.com/attachment.php?attachmentid=2957949&stc=1&d=1412279989"][COLOR=DeepSkyBlue][B]SmartEyeglassEmulator.apk[/B][/COLOR][/URL] + [/FONT][/SIZE][/FONT][FONT=Century Gothic][SIZE=3][FONT=Comic Sans MS][URL="http://forum.xda-developers.com/attachment.php?attachmentid=2957948&stc=1&d=1412279989"][COLOR=DeepSkyBlue][B][FONT=Century Gothic][FONT=Comic Sans MS]SmartEyeglass.apk[/FONT][/FONT][/B][/COLOR][/URL]
2. Then Install One of the Application from [URL="http://forum.xda-developers.com/attachment.php?attachmentid=2957870&stc=1&d=1412275816"][COLOR=DeepSkyBlue][B]samplesAPK.rar [/B][/COLOR][/URL]
3. Now Open the [/FONT][/SIZE][/FONT][FONT=Century Gothic][SIZE=3][FONT=Comic Sans MS][FONT=Century Gothic][FONT=Comic Sans MS][B]SmartEyeglassEmulator[/B][/FONT][/FONT] app
4. [B]Swipe Left/Right[/B] on [COLOR=SeaGreen][B]green[/B] [/COLOR]area to find Installed App & Click on [B]Touch Sensor[/B] button to Select.
5. For Example, Select Sample Voice Text Input + Turn ON [B]PTT [/B]switch & Speak [SIZE=2](Internet Connection Required)[/SIZE]
6. That s it... Just Install other App & play with them ;)
check out the SceenShot;[/FONT][/SIZE][/FONT][B][FONT=Century Gothic][SIZE=4]
[/SIZE][/FONT][/B][CENTER][HIDE][IMG]http://forum.xda-developers.com/attachment.php?attachmentid=2957871&stc=1&d=1412275818[/IMG][/HIDE]
[/CENTER]
[B][FONT=Century Gothic][SIZE=4]
# SampleVoiceTextInput [/SIZE][/FONT][/B][FONT=Lucida Console][SIZE=2]Codes Descriptions[/SIZE][/FONT][B]
I.[/B] First you should add required [B]permissions[/B] in [B]Manifest.xml[/B].
[CODE] <uses-permission android:name="com.sonyericsson.extras.liveware.aef.EXTENSION_PERMISSION" />
<uses-permission android:name="com.sony.smarteyeglass.permission.SMARTEYEGLASS" />
<!-- This is permission of Text Input functionality as i used for first Sample. you should modify it based on which API want to use -->
<uses-permission android:name="com.sony.smarteyeglass.permission.VOICE_TEXT_INPUT" />
II. Define BroadCast-Receiver to Handle Each Intent-Filter Actions & Invoke the Service.
Code:
<receiver android:name="com.example.sony.smarteyeglass.extension.samplevoicetextinput.ExtensionReceiver" >
<intent-filter>
<!-- Generic extension intents. -->
<action android:name="com.sonyericsson.extras.liveware.aef.registration.EXTENSION_REGISTER_REQUEST"/>
<action android:name="com.sonyericsson.extras.liveware.aef.registration.ACCESSORY_CONNECTION" />
<action android:name="android.intent.action.LOCALE_CHANGED" />
<!-- Notification intents -->
<action android:name="com.sonyericsson.extras.liveware.aef.notification.VIEW_EVENT_DETAIL" />
<action android:name="com.sonyericsson.extras.liveware.aef.notification.REFRESH_REQUEST" />
<!-- Widget intents -->
<action android:name="com.sonyericsson.extras.aef.widget.START_REFRESH_IMAGE_REQUEST" />
<action android:name="com.sonyericsson.extras.aef.widget.STOP_REFRESH_IMAGE_REQUEST" />
<action android:name="com.sonyericsson.extras.aef.widget.ONTOUCH" />
<action android:name="com.sonyericsson.extras.liveware.extension.util.widget.scheduled.refresh" />
<!-- Control intents -->
<action android:name="com.sonyericsson.extras.aef.control.START" />
<action android:name="com.sonyericsson.extras.aef.control.STOP" />
<action android:name="com.sonyericsson.extras.aef.control.PAUSE" />
<action android:name="com.sonyericsson.extras.aef.control.RESUME" />
<action android:name="com.sonyericsson.extras.aef.control.ERROR" />
<action android:name="com.sonyericsson.extras.aef.control.KEY_EVENT" />
<action android:name="com.sonyericsson.extras.aef.control.TOUCH_EVENT" />
<action android:name="com.sonyericsson.extras.aef.control.SWIPE_EVENT" />
</intent-filter>
</receiver>
III. Now Need a Class extended of ExtensionService
Code:
<service android:name="com.example.sony.smarteyeglass.extension.samplevoicetextinput.SampleExtensionService" />
Save the Manifest And let check each classes.
IV. As you know the first thing class is BroadcastReceiver
This Class Receive the Broadcast message and invoke the a Service to Handle Other events.
Code:
@Override
public void onReceive(final Context context, final Intent intent) {
intent.setClass(context, SampleExtensionService.class);
context.startService(intent);
}
V. ExtensionService class.
Sony Dev:
* The Extension Service handles registration and keeps track of all
* extension class on all accessories.
Click to expand...
Click to collapse
The Registration is invoke the API Handler class extended from RegistrationInformation that Check required info & configuration.
from Display Info to API Info
for this Sample SampleRegistrationInformation extends RegistrationInformation to identify extension you should check;
Code:
/** Uses control API version*/
private static final int CONTROL_API_VERSION = 4;
@Override
public int getRequiredControlApiVersion() {
return [B]CONTROL_API_VERSION[/B];
}
So cause this is not Notification Or Sensor Based API that used in this sample you will have this
Code:
@Override
public int getRequiredSensorApiVersion() {
return RegistrationInformation.[B]API_NOT_REQUIRED[/B];
}
@Override
public int getRequiredNotificationApiVersion() {
return RegistrationInformation.[B]API_NOT_REQUIRED[/B];
}
* IF you want to use Notification API you should define it like this
Code:
@Override
public int getRequiredNotificationApiVersion() {
// Notification API level
return [B]1[/B];
}
Finally in this class you should invoke the Controller Class. (control extension handles a control on an accessory.)
Code:
@Override
public ControlExtension createControlExtension(final String hostAppPackageName) {
return new SampleVoiceTextInputControl(this, hostAppPackageName);
}
VI. ControlExtension class
It s similar to Other Controller class that actually known as Event Handler/Listener.
- First define parameter to get instance of utility & hardware side
/** Instance of the Control Utility class. */
//The control extension handles a control on an accessory
Code:
private final [B]SmartEyeglassControlUtils[/B] utils;
to get instance of microphone & return the results.
listener for the SmartEyeglass device, and define a callback handler method for the onVoiceTextInput event. The completed voice-input operation sends this event with the text and an error code (0 on success)...
Click to expand...
Click to collapse
- After this it s time to create Listener & get Result;
Code:
final SmartEyeglassEventListener listener = new SmartEyeglassEventListener(){
@Override
public void onDialogClosed(final int code) {
Log.d(Constants.LOG_TAG, "onDialogClosed() : " + code);
}
@Override
public void onVoiceTextInput(final int errorcode, final String text) {
String message;
if (errorcode == 0) { //errorcode == 0 means Successful operation.
[COLOR=Red][B] // And Here
//You get the test Result & can add an operation you like.
//simple Toast notification or invoking another class & ...[/B][/COLOR]
message = "Inputted text : " + text;
Toast.makeText(c, text, Toast.LENGTH_SHORT).show();
}
else {
message = "Text Input Canceled";
Toast.makeText(c, message, Toast.LENGTH_SHORT).show();
}
utils.showDialogMessage(message, SmartEyeglassControl.Intents.DIALOG_MODE_OK);
}
};
utils = new SmartEyeglassControlUtils(hostAppPackageName, listener);
utils.activate(context);
- At the end you must deactive System Utils to allow other extension or apps use it.
Code:
@Override
public void onDestroy() {
utils.deactivate();
};
VII. This sample finished. + By Checking each class you will get more things to understand.
So Open Sample Code & Check it carefully.
API Reference is Best Place to Find All Functions & Technical Description... Read More
Click to expand...
Click to collapse
3. Test App
1. Download & Install SmartEyeglassEmulator.apk + SmartEyeglass.apk from Attachments
2. Open the SmartEyeglassEmulator app
3. Swipe Left/Right on green area to find Installed App & Click on Touch Sensor button to Select.
OOOOOOO
The explanations of codes are available inside each classes.
If you find any mistake Or issue in my codes Please inform me.
Click to expand...
Click to collapse
Tutorial & Sample Codes for
- SmartWatches (Android-Wear)
Coming Soon...
Don't forget to Hit Thanks[/LEFT]
[/CENTER]
Reserved
...
Super Tutorial Bro.. If i was not in office i would have tried it right away. THANKS A LOT.
And I feel this should be read and placed along with the Portal News post abt Smart Eye wear SDK.
You have created such a nice tutorial for all the developers.
Info
aniketh12 said:
Super Tutorial Bro.. If i was not in office i would have tried it right away. THANKS A LOT.
And I feel this should be read and placed along with the Portal News post abt Smart Eye wear SDK.
You have created such a nice tutorial for all the developers.
Click to expand...
Click to collapse
Thanks
maybe if you and others send request to XDA they will feature it
:good:
i like these glasses
But the price is overwhelming
great thread i have always wanted one but yet i can not afford it at the time
My SEG working fine thanks to this thread
Info
dinhantauwater said:
My SEG working fine thanks to this thread
Click to expand...
Click to collapse
Thanks for Review
Please Send your Project Link & Description
:good:
I have installed all the apps etc according to this forum and the sony developer website but I do not see any green text in the emulator app. All I see is the black background with all other buttons etc as expected. When I swipe there is also no green text/cards?
Do I need my phone connected to the glasses because I think this would defeat the purpose of having an emulator app.
I look forward to hearing from someone soon
update:
I managed to get it working after a restart, but now if I setup a AVD in Android Studio, is there a way of getting the SmartEyeglass Emulator working? At the moment it is showing the app opened but no green display on the black background?
Info
stealthdragonb said:
I have installed all the apps etc according to this forum and the sony developer website but I do not see any green text in the emulator app. All I see is the black background with all other buttons etc as expected. When I swipe there is also no green text/cards?
Do I need my phone connected to the glasses because I think this would defeat the purpose of having an emulator app.
I look forward to hearing from someone soon
update:
I managed to get it working after a restart, but now if I setup a AVD in Android Studio, is there a way of getting the SmartEyeglass Emulator working? At the moment it is showing the app opened but no green display on the black background?
Click to expand...
Click to collapse
When you Swipe you should see list of Available App IF Emulator App can detect them.
Code:
3. Swipe Left/Right on green area to find Installed App & Click on Touch Sensor button to Select.
It won't work properly If you install emulator app on AVD.
:good:
Geeks Empire said:
When you Swipe you should see list of Available App IF Emulator App can detect them.
Code:
3. Swipe Left/Right on green area to find Installed App & Click on Touch Sensor button to Select.
It won't work properly If you install emulator app on AVD.
:good:
Click to expand...
Click to collapse
That was the first thing I tried. swiping does not bring up any display/cards onto the screen in the AVD emulator in Android Studio, but works on my actual android device running the eyeglass emulator.
Any other suggestions? Also I am completely new to java, any useful tutorials etc you can refer me to. The one on Sony's Eyeglass developer website tutorials seems to advanced for me at this stage
Info
stealthdragonb said:
That was the first thing I tried. swiping does not bring up any display/cards onto the screen in the AVD emulator in Android Studio, but works on my actual android device running the eyeglass emulator.
Any other suggestions? Also I am completely new to java, any useful tutorials etc you can refer me to. The one on Sony's Eyeglass developer website tutorials seems to advanced for me at this stage
Click to expand...
Click to collapse
Yes. It s better to use Actual Android Device & then Install Emulator APK.
Just Search Java Tutorial
I recommend you to Read Xperia Small App Tutorial. Cause It includes basic of Android Programming.
http://forum.xda-developers.com/cro...ramming-xperia-smallapp-sample-codes-t2888848
:good:
Thanks very much for your help, I appreciate it.
One last question is do you know if I can use a secondary mic input, such as a Bluetooth mic connected to my android device and use it for voice commands for the eyeglass? Ideally I do not want to use the mic located in the touch device connected to the eyeglass.
Hi,
I have gone through the basics of writing java and modifying xml files etc for a normal phone app. I have gone through basic examples such as hello world right through to speech to text and calculator apps.
The issue I am having now is how do I for example write a simple hello world application from scratch for the sony smart glasses. The sample sdk files given on the sony website is quite difficult for me to understand as there are little to no tutorials available and everything I have learnt thus far is for just an android phone interface.
The main issue will be with a phone app, I can simply tap on boxes etc and make a selection. e.g. how do I use the top and scroll functions on the smart eyeglass controller and which part of the code I should use for this?
I'll really appreciate some advice from people. Thanks in advance!
Info
stealthdragonb said:
Hi,
I have gone through the basics of writing java and modifying xml files etc for a normal phone app. I have gone through basic examples such as hello world right through to speech to text and calculator apps.
The issue I am having now is how do I for example write a simple hello world application from scratch for the sony smart glasses. The sample sdk files given on the sony website is quite difficult for me to understand as there are little to no tutorials available and everything I have learnt thus far is for just an android phone interface.
The main issue will be with a phone app, I can simply tap on boxes etc and make a selection. e.g. how do I use the top and scroll functions on the smart eyeglass controller and which part of the code I should use for this?
I'll really appreciate some advice from people. Thanks in advance!
Click to expand...
Click to collapse
I mentioned
But if you interest to work more
you should know at least basic of Android/Java Programming
Click to expand...
Click to collapse
Read Tutorial Again Carefully.
It is just Simple Hello Wolrd! of Android with Modifications.
& I explained each modifications.
So Create a Project and Add these Codes.
NOTE: You have to use Samples Because of Limited Available API. So Whatever you use sample codes OR manually add codes, you will get same result.
I will check If there New API and Documentation I will Add Descriptions & New Sample
:good: