I want to obtain a similar tab effect with the button bar of twitter app.
I wish to click on a button and change the view down. I can switch activity but I think It's wrong, or not?
The top bar have to be fix like a frame. Like this:
Ok now I post a part of my idea (i found something similar here: http://www.talkandroid.com/android-forums/android-development-answers-tutorials-code-snippets/1515-how-i-open-image-imagebutton.html)
code:
newsButton = (ImageButton) findViewById(R.id.news);
newsButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// on click go to the news view (no activity yet)
setContentView(R.layout.news);
}
});
Like in the Google IO App?
If so, the Source Code is freely available here.
Okay, a little tour on how Google does it:
The activity_home.xml-layout
includes (Line 21) the
actionbar.xml-layout (This is done
in every Layout so the Actionbar
must not always be duplicated).
The actionbar.xml-Layout
creates a LinearLayout for
the UI-Elements.
Then, for example the
HomeActivity-Activity sets
the content view to the
activity_home.xml-layout, receives
an ActivityHelper-class and calls
its setupActionBar()-method.
The mantioned ActivityHelper-class
is in the hg/ android/ src/ com/
google/ android/ apps/ iosched/
util/-package and has the
setupActionBar()-method which
creates the Action bar.
This might be easier then it looks. Read your way through the Source Code and try it yourself.
I think these controls are Radio Button/ Radio Group with customization.
Related
I have an activity A. I am creating a kind of tutorial for user for this activity, to teach him how he can use the app on that screen.
For that, my requirement is :
I want to blur all the views of the activity except one view. I want to prompt user to click on that view through a hand image pointing at that view.
Nothing should happen if the user clicks on the blurred/greyed out area, but if he taps on that particular active view, it should react to that touch.
I was thinking of using a full screen fragment for this. The Fragment will take the following input from the activity :
for what coordinates, is should not blur the screen and pass the touch event to the activity
the coordinates on which it should show that pointing hand image.
After from these coordinates, the fragment background would be blur.
I wanted to confirm if that's possible, to make the fragment partially active, i.e. delegate it's touch events to the activity for a particular view of the activity.
Also, please let me know if there is any other better approach of achieving the same thing.
Edit1 :
Thinking of using a fragment here, because I'd want this type of behaviour on different screen in future. In that case, I'd make that fragment generic which takes some inputs (as described above) and use it on different screens.
There's a very good library called SCV which does what you're trying to achieve, you're able to customize the styles for it too. I've used this for first time the app is opened to show the user a tutorial.
According to their Github
The ShowcaseView (SCV) library is designed to highlight and showcase specific parts of apps to the user with a distinctive and attractive overlay. This library is great for pointing out points of interest for users, gestures, or obscure but useful items.
Further Reading:
Android Arsenal - Showcase Views Tutorial
ShowCaseView on Android - Indipendev
I found it much easier to include an 'extra' layout around the UI of my activity, and then to add a highest-z grey mostly-transparent filter to it and put the instructions on that.
Each "step" of the instructions was a different layout that was dynamically loaded into that layout container as they clicked. (Just another approach)
The 'container' layout is a: FrameLayout
then in my Activity I have: (ignore bad naming)
private void addOverlayLayout() {
frameLayout = (FrameLayout) findViewById(R.id.framelayoutInner);
frameLayout3 = (FrameLayout) findViewById(R.id.framelayout3);
frameLayout3.setBackgroundColor(Color.DKGRAY);
frameLayout3.setAlpha(0.3f);
// Dynamically create a relativelayout which will be appended to framelayout
relativeLayout = new RelativeLayout(getApplicationContext());
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams
.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
instructionOverlays.add(createSimpleClickInstruction(R.layout.instruction_reader_1));
instructionOverlays.add(createSimpleClickInstruction(R.layout.instruction_reader_2));
if (FullscreenReaderActivity.isFirstRun) {
displayNextGuide();
}
}
public void displayNextGuide() {
// clean relative layout if it has views
relativeLayout.removeAllViews();
// clean frame layout if it has child (safe if empty)
frameLayout.removeView(relativeLayout);
if (!isFirstRun) {
return;
}
if (instructionOverlays.size() > 0) {
runOnUiThread(instructionOverlays.get(0));
instructionOverlays.remove(0);
} else {
frameLayout3.setBackgroundColor(Color.TRANSPARENT);
frameLayout3.setAlpha(1.0f);
}
}
public Runnable createSimpleClickInstruction(final int resource) {
return new Runnable() {
#Override
public void run() {
getLayoutInflater().inflate(
resource,
relativeLayout,
true
);
relativeLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
displayNextGuide();
}
});
frameLayout.addView(relativeLayout);
}
};
}
Instagram on Android recently add new feature, when user long click to items at the Browse section, a popup menu shows and allow user to pre-view photo/video instead of going to its details.
It is really cool like iOS force touch feature.
Does anyone know any idea how we can do the same on Android app?
Can we just use Context Menu or Overlay Window to do that?
Thanks
Now I can do quite the same on UI with this library
https://github.com/tvbarthel/BlurDialogFragment
But the thing is:
When I long press the button, I have to RELEASE my finger to continue touching the dialog fragment. The touch event is still sent to activity not DialogFragment.
Do you know how to pass touch event / focus to dialog fragment right after it is showed?
It's the closest library I've found on the internet,
https://github.com/nantaphop/HoverTouchView
it might not be exactly like IG's, but for sure it gives the idea
I Have found 3DTouch as well as in Instagrame.
This library is hosted on Jitpack.io, which means to use it you will have to add the following to your root build.gradle file.
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
And then you will need to add the following dependency to your applications build.gradle file.
dependencies {
compile 'com.github.shalskar:PeekAndPop:v1.0.1'
}
Usage:
Basic usage is easy, simply provide an activity instance, a layout resource for the peek and pop and 1 or more views that will show the peek and pop when long clicked.
PeekAndPop peekAndPop = new PeekAndPop.Builder(this)
.peekLayout(R.layout.peek_view)
.longClickViews(view)
.build();
You can get the peek view by calling getPeekView() on the PeekAndPop object, and use findViewById() to get access any views in the peek layout.
View peekView = peekAndPop.getPeekView();
ImageView imageView = peekView.findViewById(R.id.image_view);
TextView textView = peekView.findViewById(R.id.text_view);
Often you will want to have the peek and pop shown when an item in a list (or other scrollable view) is clicked on, to ensure the peek and pop works correctly, you will have to add this line of code:
.parentViewGroupToDisallowTouchEvents(viewGroup)
So building a new app specifically for the Android TV interface (lollipop leanback) and I'm using the PlaybackOverlayFragment that is provided by the framework which has a PlaybackControlsRow with all the usual controls on it.
The problem is, the default behavior is for the user to have to click the "Play" button to start the video and I want it to start automatically. That part is easy and I have it working but then the Play/Pause icons on the provided control are out of sync (showing play when should be pause) because the item was started outside of the events of clicking on that control.
Documentation is sparse on these framework elements and examining the class I can't find any public method that would allow me to put this control in the proper "mode" or tell it to display the play or pause icon myself.
Anyone with experience with these yet that would know how to do this?
In order to change the state of the button, even after adding your Actions to the Adapter, you'll need to notify the changes to the adapter that has your Action.
mPlayPauseAction.nextIndex(); // next index, if it was pause, it'll be play
notifyChanged(mPlayPauseAction);
// where notifyChanged(Action action) is:
private void notifyChanged(Action action) {
ArrayObjectAdapter adapter = mPrimaryActionsAdapter; // reference to your adapter
if (adapter.indexOf(action) >= 0) {
adapter.notifyArrayItemRangeChanged(adapter.indexOf(action), 1);
return;
}
}
Well, I partially answered my own question.
If I know before the PlaybackControlsRow is created that I want to set it to the pause state (actually, playing state but showing pause button) then if I call setIndex(PlaypauseAction.PAUSE) on the PlayPauseAction before adding it to the controlsrow then it works.
It doesn't appear that I can modify it myself after adding it but that may be something else I'm doing wrong.
I will try to explain this as clearly as possible. I have an android app using web view to basically load a webpage as my app. I have everything working great, however the back button seems to be an issue. I have set this page up all on one html page, it will load in a div when certain buttons are clicked to give the feel of a new page without actually having one. I basically want the back button (on the android tablet or smartphone) to load the previously loaded div, but I have no idea where to start with this. Here is what the content switching jquery looks like -
function contentSwitcher(settings){
var settings = {
contentClass : '.contentToLoad',
navigationId : '#sideMenu',
servFront : '#clickHomeHome'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show("slow");
});
}
contentSwitcher();
});
note: I've cropped out a bunch of it just to show how it works on a basic level.
Does anyone have any suggestions as to where to begin. I'd just like the back button function to be able to maybe check a started previous div name stored somewhere and load that.
thanks!
You can try using the History API. There are numerous tutorials on the web e.g. this one is quite good:
http://diveintohtml5.info/history.html
Basically this is how it works. When the user clicks the link for the div to show you push the state to the history stack.
history.pushState({<object with any information about state>}, pageTitle, newUrl);
This will push the state to the history stack meaning that when the user presses the back button on any modern browser like webkit it will take that state into consideration. When back action is taken it will then pop the state from the history stack. This action you have to listen to and handle in any way you see fit:
window.addEventListener("popstate", function(event) {
// event object contains the information from the pushed state
// do whatever needed to load the previous page here
});
The History API requires you to structure your code in a certain way for it to work well. For this I would recommend to use some existing framework that handle the back events for you e.g. Backbone.js. Hope this helps.
Below is an image of the action bar on a Samsung Tab2 action bar running 4.0.3 android ICS
from left to right we have the "back, home, recent apps, screenshot, mini-app launcher, and system menu" buttons. Im certain i am not using the correct names for all these which is why i listed them from left to right along with the above image.
I know i can override the the functionality of "back" using:
#Override
public void onBackPressed() {
// Do something custom here
}
i also know that i can NOT override or remove the home button but i was wondering if i could remove or override the "recent apps", "take screen shot", and "mini app launcher"
would be nice if i could remove the back as well..
We just rolled out almost 100 GTab2s and have another 1,000 on order. This is something we've looked into extensively, especially in regards to screenshot and the minitab bloat. You can not remove the screenshot button, nor minitab, unless you root the device and modify the system image. (in short: you can't).
You could "remove" the home button by implementing your own launcher and getting rid of touchwiz.
FWIW, Samsung's B2B folks have been very helpful in supporting our efforts, even at our relatively small quantities. If you were building, say, a kiosk app around the GTab2, you might be able to get them to supply you with a less bloated image.
static public final String[] pkgs_GT_P3113_LH2 = new String[] { "com.kobobooks.samsung.android",
"com.netflix.mediaclient",
"com.nim.discovery",
"com.osp.app.signin",
"com.peel.app",
"com.samsung.mediahub",
"com.samsung.music",
"com.sec.android.app.gamehub",
"com.sec.android.app.minimode.res",
"com.sec.android.app.music",
"com.sec.android.app.readershub",
"com.sec.android.app.samsungapps",
"com.sec.android.app.sns3",
"com.sec.android.daemonapp.ap.yahoonews",
"com.sec.android.daemonapp.ap.yahoostock.stockclock",
"com.sec.android.widgetapp.ap.yahoonews",
"com.sec.android.widgetapp.at.yahoostock.stockclock",
"com.sec.android.widgetapp.minipaper",
"com.sec.chaton",
"com.sec.minimode.music",
"com.sec.pcw",
"com.tgrape.android.radar",
"com.zinio.samsung.android" };