Database Users

[Q] Simplifying adding lines to UI

Hello
I'm just starting out learning Android, and i only have basic C/C++ programming knowledge, but i've decided to make an app related to my school (just to test Android programming).
I have a UI such as this:
{
"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"
}
And i want to add 1 line between each menu selection. I can do this easily with a <View> and width=match parent and height=1dp in the .xml file (as i've done on the picture showed above), but the problem is that i have around 30-40 xml files where i need this in (Really big menu selection )
Is there any way to simplify this?
I have tried to add my own xml file in the /res/drawable/ folder and that worked out fine with adding the android:background="@xx", but i only want the line inbetween the menu selections, not an entire frame around it.
I tried with the android:shape="line", but i couldn't figure out a way to move it up and down, it was always right in the center of the button.
I hope someone can help me out
- Moon

OK, I guess you want to do it in xml, because you could also add it programatically in a for loop to your list view.
The idea with an own xml file is not bad, though normally you'd want to extend a custom View. This means you create a new xml file with a single text view in your layout folder and then add it to your activity layout via
Code:
<com.example.app.custom_view
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
I don't think you can go shorter using xml. If it is only a list view, you might want to look at some custom list views or at this question here.

Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon

Moonbloom said:
Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon
Click to expand...
Click to collapse
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )

I fiddled around with it a bit before seeing your latest post, and got it to work
Added an xml file named "button_divider" and added this code into it:
Code:
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/white"
/>
then i simply added
Code:
<include layout="@drawable/button_divider" />
where ever i wanted to draw a line, and it works exactly how i wanted it to
(i know it should probably be in the layout folder, but just added it in drawables to test it out, can always move it, not like it does anything differently)
I'll definately look into ListView, seems like it's build exactly for what i need ^^
But now i at least have a working'ish version of what i needed
Thanks alot for the help, i might be back here on these forums again at some point
- Moon

Shouldn't you just use a listview?

SimplicityApks said:
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )
Click to expand...
Click to collapse
Tried to get this to work, while im working on figuring out how to use ListView instead as it seems (according to the two of you) that it's much better
I ran into a problem though.. I made a new xml file in the layout folder named "master_button", pasted this code in there:
Code:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="25sp"
android:textColor="@color/Blue"
android:background="@android:color/transparent" />
Then i tried using your solution with <com.example.app.mybutton> (i ofc changed to the real name) but nothing would show up at all.. It seemed to need a class (java file) to be able to do it, but that just went horribly wrong when i tried adding it..
Then i tried to use <Include layout="xx"> as i did with the line earlier.. I can set the android:id="xx" easily, but it seems i cant set the android:text="xx".
Off to try out some more stuff and see if i can get anything working ^^

I think that is because you use the weight in the Button. If you set the width to 0 and it's ignoring the weight you will not see anything Try removing the weight(and probably width and height as well) in the Button and put it in your LinearLayout, where you insert your Button.

Found an easier solution for your Seperators:
I added this to my styles:
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.
Code:
<View style="@style/Divider"/>
Click to expand...
Click to collapse
here's the link: linklinklink

Should really just use listview next time. it does it automagically.

[GUIDE] Create Transparent Demo pages on Android

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

[Guide] Creating a Floating Window out of your 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

ViewPagerIndicator - Set the TabPageIndicator to the center

Hi XDA Developers,
Is it possible to set the TabPageIndicator of ViewPagerIndicator to the center? Like this:
{
"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"
}
And is it possible to set the individual tab width and height? And set that tab to a drawable that support selected/pressed states?
I've not found it yet.
Thanks in advance.
The app on the image is Untis Mobile and can be found on the PlayStore.
I've already ask the creators how they do it but they said the app isn't open source. (But I have found in the source that they do it with TwoDScrollView, but I'm not sure)

Alwaysup said:
Hi XDA Developers,
Is it possible to set the TabPageIndicator of ViewPagerIndicator to the center? Like this:
And is it possible to set the individual tab width and height? And set that tab to a drawable that support selected/pressed states?
I've not found it yet.
Thanks in advance.
The app on the image is Untis Mobile and can be found on the PlayStore.
I've already ask the creators how they do it but they said the app isn't open source. (But I have found in the source that they do it with TwoDScrollView, but I'm not sure)
Click to expand...
Click to collapse
If you know how many tabs you have, then yes (use viewPager.setCurrentItem(total/2))
In terms of styling it, you could do something like this in values/styles.xml...
Code:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- ..... -->
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/bg_tabindicator_statelist</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:maxLines">1</item>
</style>

PicomatStudios said:
If you know how many tabs you have, then yes (use viewPager.setCurrentItem(total/2))
In terms of styling it, you could do something like this in values/styles.xml...
Code:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- ..... -->
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/bg_tabindicator_statelist</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:maxLines">1</item>
</style>
Click to expand...
Click to collapse
Thanks for the styling advice, I've now styled as I wanted. :good:
But when I do viewPager.setCurrentItem(5); (I've ten items) it stays on the middle and I'm not able to select a other day. (I call it in onPageScrolled). Is it possible that the item stays in the middle even if I scroll (just as the example)?

Alwaysup said:
Thanks for the styling advice, I've now styled as I wanted. :good:
But when I do viewPager.setCurrentItem(5); (I've ten items) it stays on the middle and I'm not able to select a other day. (I call it in onPageScrolled). Is it possible that the item stays in the middle even if I scroll (just as the example)?
Click to expand...
Click to collapse
Ah OK I see, as you scroll the selected one needs to be in the middle...
From memory I thought it did that by default, with the exception that if you're at either end of the list it won't scroll the screen unnecessarily.
Do you see something different ?
Looking at the ViewPagerIndicator test app (G. Play) if you go to Tabs/Default and scroll from Albums -> Songs, the selection will stay in the middle. Other movements won't since they are already on the screen.
In your case it might be possible to increase the number of days displayed (from 10 -> say, 20) to produce the same effect ?

PicomatStudios said:
Ah OK I see, as you scroll the selected one needs to be in the middle...
From memory I thought it did that by default, with the exception that if you're at either end of the list it won't scroll the screen unnecessarily.
Do you see something different ?
Looking at the ViewPagerIndicator test app (G. Play) if you go to Tabs/Default and scroll from Albums -> Songs, the selection will stay in the middle. Other movements won't since they are already on the screen.
In your case it might be possible to increase the number of days displayed (from 10 -> say, 20) to produce the same effect ?
Click to expand...
Click to collapse
When I add 20 items it stays on the middle but only from item 4 to item 17, item 1, 2, 3, 18, 19, 20 are not in the middle. See:
Can I add a 3 empty items (or empty space) to ensure that the first and last items are in the middle? Something like this (from the Untis Mobile app):
I'll really appreciate your help. :good:

Alwaysup said:
When I add 20 items it stays on the middle but only from item 4 to item 17, item 1, 2, 3, 18, 19, 20 are not in the middle. See:
Can I add a 3 empty items (or empty space) to ensure that the first and last items are in the middle? Something like this (from the Untis Mobile app):
I'll really appreciate your help. :good:
Click to expand...
Click to collapse
OK, that's the behaviour I would expect (no centering if scrolling not required)... I haven't tried altering that myself.
I was going to suggest posting an issue with the vpi guys but I can see you've already done that !
I suppose you could try programatically setting padding etc at the right points but I'm not sure how well that would turn out.
Hopefully someone will know on github. If not, there's probably no easy way.

PicomatStudios said:
OK, that's the behaviour I would expect (no centering if scrolling not required)... I haven't tried altering that myself.
I was going to suggest posting an issue with the vpi guys but I can see you've already done that !
I suppose you could try programatically setting padding etc at the right points but I'm not sure how well that would turn out.
Hopefully someone will know on github. If not, there's probably no easy way.
Click to expand...
Click to collapse
I've tried to set programmatically the padding using android:paddingLeft and android:paddingRight in CustomTabPageIndicator but that doesn't work.
Indeed, hopefully someone will have an answer. I've also asked on Stack Overflow and they refer me to android-spinnerwheel. If I've no answers on this problem I will look into that.

[guide] a beginners guide to make android apps

A Beginner's Guide to Make Android Apps​
Most of the tutorials out in blogs and YouTube say you need not have any kind of programming experience to make apps. Well, that's not the truth. To make apps, you've got to have basic knowledge of programming, let it be some easy programming language like #C, Java Basics, XML, HTML, etc.
If you don't have any kind of programming experience, visit this link to learn or if I find time, I'll post a few links and educational sites to learn making apps for free.
Click to expand...
Click to collapse
How did I learn to make apps and how long it took?​
I was a member in the Xperia 2011 device line up and loved porting apps, making ROMS for those lineup. However, my goal was to code apps and make UX. The main difficulty was to find resources and the next one was understanding it without a classroom experience. After all this managing time was another headache. So I used to give up learning new things easily.
Once I started seeing a downfall in the development for the devices, I made up my mind to learn making better UI/UX. That's when I got into making Zooper Widgets and Homscreen Designs. This was just a drill to understand how can someone make their Android Homescreen look beautiful. Things changed and I had to move to the United States and stopped making Homescreens.
Later, I started referring to java concepts even though I knew how to code. Brushed my XML and HTML coding techniques and gave it a shot and it paid off! Since then (2015 October) till date, I've been making apps for my school and personal use with no intentions to upload them to play store.
Click to expand...
Click to collapse
The below image shows our journey to become a professional android app developer. However, one cannot become a professional app developer over night or by going through this guide. You can almost reach half way through if you're understanding and practicing things right.
{
"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"
}
To finish the other half, I'd recommend learning it from code camps or attending school or may be by researching things and learning it from other developers or by yourself.​
Step1:
Let's not get into writing the code itself first. We first need to understand what are views, layouts, modifying the views and also positioning the views.
​
I will try my best to refer https://developers.google.com/ resources the most here to make things easy for everyone.
View: A View is a rectangular area visible on the screen. It has a width and height, and sometimes a background color.
ImageView: An ImageView displays an image such as an icon or photo
TextView: A TextView displays text
Button: A Button is a TextView that is sensitive to touch: tap it with your finger and it will respond
ViewGroup: ViewGroup is a big View—often invisible—that contains and positions the smaller Views inside of it.
To understand better with an example visit this linkand start typing in the above definitions in the grey search box
Click to expand...
Click to collapse
Now I assume that everyone's gone through the above link and searched for each item and how does it look like. To implement a view/layout we need a place to code and a language to make the computer understand that we are coding to implement a view.
The place where we code or simply the IDE we will be using is strictly Android Studio. Why is it only Android Studio? You can use any alternative IDE. However, Using Android Studio makes life easier to manage both SDK, the android projects and the IDE helps you finish the code by actively prompting.
The language in which we will be writing the code is XML. XML stands for Extended Markup Language.
Let's take up an example to write a code for a TextView in XML and how does it look as a view.
Code:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
If the above code is executed, the TextView Looks like this,
Before we even go and talk about the things that are present in the code, Let's understand the syntax of xml. Syntax is nothing but rules to define what a valid XML is. If the syntax isn't right, it wouldn't even show up on your android device.
Here's the syntax for xml
Code:
<ViewName
attribute: "attribute_value"/>
If you carefully observe the syntax, the xml tag/code opens with a opening angle brackets "<" followed by the ViewName in "Camel Case"
The next line has a attribute. attributes must always be lowercase. if you enter it camel case or any other format, you end up with errors.
For every attribute, you'll have a attribute value assigned within "quotes"
You can have any number of attributes as long as they are valid.
The close the xml code. You'll use a forward slash "/" and a closing angle bracket ">"
In the above shown example for a text view, the type of xml code we used is called as a "Self-Closing" tag. An xml can be closed in many different ways. One of the way is "Self-Closing" and the other one is by having "children tags". An example for that tag is shown below.
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.aneel.xda.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
</RelativeLayout>
If we observe. the ViewType in the beginning says "<RelativeLayout" and the end of declaring the "Relative Layout" is just done by using a ">" not a "/>" this is because, ">" indicates there is something after that or in simple words, it's not the end of XML. Right below that there is a child tag for "TextView" which ends right there followed by the "</RelativeLayout". So this means, the "TextView" is a part of "RelativeLayout"
we can close an xml either by "/>" or </ViewName>"​

Styling the views
Step2: Styling the views​
Now that we know how the code looks for TextView/ButtonView/ImageView, Let's get into styling the views as per our choice.
Code:
<View
android:layout_width="100px"
android:layout_height="100dp"
android:background="#4E4B4F" />
The above code generates a line instead of a box. WE usually make polygons and shapes in px. However, there is a very special reason why we shouldn't be using px (pixels). Every screen is covered by pixels and to understand better, See the image below and look how 2px width and 2px height looks like on different devices.
The dimesnion 2px x 2px in a mdpi device is good to touch and see. the same resolution in a hdpi is also good to see and touch, but when it comes to a xhdpi device we barely can see the pixels. This is the reason why we should use dp (density independent pixels) if we are defining the dimensions of any view.
Lets see the same devices with 2dp x 2dp and see how it looks.
Voila! The 2dp is evenly spread out on all the devices unlike the 2px.
Let's learn a few layout based definitions to understand the code. I'm taking the definitions from developer.google.com again to make it easy for everyone to refer in the future.
wrap_content: We can specify the width or height of a View as a given distance. Alternatively, we can specify it as the special value wrap_content to shrink-wrap the View around its content.
match_parent: To allow a View to expand horizontally to occupy the full width of its parent, we set the View’s layout_width attribute to the special value match_parent. Similarly, to let a View expand vertically to occupy the full height of its parent, we set its layout_height to match_parent.
Click to expand...
Click to collapse
Now let's learn how to set a text size in a ViewType. Just like giving dimensions to a view as "dp" we use "sp"(scale independent pixels) to set the size of text.
Let's look at an example code.
Code:
<TextView
android:textSize="50sp"/>
We can add this line to any view which has text in it. By using "sp" the text looks consistent in all types of devices.
Here's a reference to the material design's typography styles. https://material.google.com/style/typography.html#typography-styles
Please check back in a few hours for more content.​

reserved for Daniel Radcliff's magic

Wait, don't forget about Kevin Hart's post here
P.S: Apologies to the moderators. Reserving a lot of place for the guide. Just one more.

reserved

Kudos for the nice guide. http://tutorialspoint.com/ is also another great place to learn.
Sent from my HTC Desire 626s using Tapatalk