Android button bar toggle - android

I am looking for a UI view that imitates the functionality of the
Google Maps directions screen UI control where it allows the user to
pick the type of directions allowed, either Car, Transit or Walking.
Like this --> http://snapplr.com/50rh
The widget is essentially three buttons laid out horizontally with
rounded corners only on the left of the first and right of the thirdbutton.
I can't see a standard way to do this, although it seems like it would
be a common widget. Is there some other standard way of presenting a
multi-choice grouping in a horizontal layout as a "single" layout
object.

I am not aware of a button bar widget in the Android SDK. You would create one with ImageButtons in a LinearLayout, with custom backgrounds for all (to give the gloss-black look, to handle the varied sets of corners, and to handle the selected vs. not imagery). You would then need to add the toggling smarts, such that pushing one makes it selected and makes the others in the layout not selected.
If you wish to stick to simpler existing widgets, Spinner, RadioButton, or ToggleButton would be the most likely candidates.

I don't think there is a built-in way to do it. I can think of two ways to accomplish it. The first would be to create a custom style for the TabWidget. The second would be to create your own custom widget. Making a TabWidget style might be more flexible because you could easily come back and add or remove tabs and it would update accordingly. Making your own custom widget would give you much more control over how the widget looks and acts. So really you need to see what would be the best fit for what you're trying to do.

Best button bar I've found: http://androidworkz.com/2011/02/04/custom-menu-bar-tabs-how-to-hook-the-menu-button-to-showhide-a-custom-tab-bar/
It's thought to be used as a replacement for the menu, but I believe it's also great for a custom button bar. I'm actually gonna integrate it in my app straight away :-)
Kudos for androidworkz, the original author.

I think the power control widget does what you want. Looking at the source for the widget, it uses a combination of LinearLayouts & ImageViews to achieve the layout.
Layout file: https://android.googlesource.com/platform/packages/apps/Settings/+/froyo-release/res/layout/widget.xml
Source code: https://android.googlesource.com/platform/packages/apps/Settings/+/froyo-release/src/com/android/settings/widget/SettingsAppWidgetProvider.java

Related

Leanback DetailFragment FullWidthDetailsOverviewRowPresenter customization

I want to customize the FullWidthDetailsOverviewRowPresenter in the Leanback DetailFragment.
Three things I want to accomplish are:
Getting the Actions from top to below of the overview.
Reducing the height of the overview so that it the related movies can be seen without scrolling down.
The background image and the space it occupies at the top of the overview should be gone. The screen should start like the one above.
The end result should be like this:
I already know how to modify inside the overview. How should I modify outside of it?
Because you are moving around the key views of this screen, it sounds like you might have to ditch the current implementation altogether and create your own custom view from scratch. By moving the buttons to the bottom and the detail image (seems like you're moving it to the right side of the description text), you're making it less and less justifiable to even subclass DetailFragment. The developers of Leanback were probably intentional about limiting customizing the interfaces too much as they want a consistent experience for different apps.
I would create a new layout file and load it up on your subclass of DetailsFragment (or DetailsPresenter), depending on your architecture.
You might find inspiration in this tuenti tv sample and part two of Marcus Gabilheri's customization series
Create Row List Fragment
In 1st Row create a Rowpresenter that fits your design with buttons
In other row/s add ListRowPreesenter

android ui design for an app help needed

One activity in my app looks like below picture. In the below picture ,can any one suggest that best way to implement view,
view in my app
and when i click one of the options(filters in app) available on activity,
the view will be extended like below
view after one of the option selected
For this, i want to use a horizontal linear layout for below options bar,
when one of the options clicked, i wanna use slide up functionality and views show and hide functionalities.
can any one suggest better design for this . thanks.
I think for most apps, all toolbars should stay in the same place throughout the execution of the app. When the toolbar item ("Veg & Non Veg") is clicked, the filter should appear above the toolbar instead of below it. You can still use the slide up function, just have the toolbar layout displayed above (higher z-index) the filter linear layout.
You should also standardize the sizes for the distances/times to each location, personally I think the first one looks better.
Other than that, I think your UI looks pretty good!

Scrollable menu bar with left/right arrows

I am looking to create a navigation or menu bar similar to the functionality of the one at the top of the Fox News app. I started to code this myself using a Gallery but I'm not sure how to hide the left and right arrows when they are not needed. I was also wandering if you would have to use images for the menu items or if you could just use TextView or buttons so I could change the text without having to modify an image. I have seen this type of navigation on several apps and I tried all types of searches trying to find code examples but I must not be using the correct name for this type of scrollable menu because I couldn't find anything. If anyone has an example or provide a link to an article I would greatly appreciate it.
Look into HorizontalScrollView. It is a Layout that will handle the smooth scrolling and is likely to be much less of a hassle to work with than Gallery for this operation (I just added one for a similar reason).
To handle the left/right, look into setOnTouchListener. I'm not sure if you can get the current scroll position without making a new child class of HorizontalScrollView to access protected methods. There may be other ways, however - I didn't need to add buttons so I didn't investigate.

Android horizontal scroll programmatically

In Android, I want to create a particular control which may require to set the location of a component by fixed coordinates.
This is what I want to do. These screenshot are taken from a swing application of mine. I want to clone the buttons on top and their behaviour, into an android application. Basically if there are too many buttons in the menubar, left and/or right arrows appear, and clicking on them will scroll horizontally to access the hidden buttons.
I need to be able to set the coordinates of an horizontal linear layout inside another one, and even to set negative coordinates in order to scroll on the right.
I'm doing this using a null layout in swing. Can I achieve this with Android ?
I'm not sure if an HorizontalScrollView can do this. Could someone point out a good tutorial or something related to what I'd like to do.
I think a HorizontalScrollView can achieve what you intend to do with your Menu Bar. You don't need these "scroll" Buttons, because a user can swipe the menu.
You can nest LinearLayouts together, however you want. if you want to control their flow try to apply margins to them. You can set fixed Coordinates in an AbsoluteLayout, too.
Consider using a gallery? If not gallery, then a child or cousin of it. As far as I know, there is no ViewParent that will allow what your are shooting for.
Hope that helped ~Aedon

Android UI question. Implementation guidance

I'm working on implementing a UI for an Android application, and I wanted to ask if there is already something in the native widgets to accomplish most of what I'm trying to do.
The application that I'm working on performs 15 different tasks that can be divided into 3 different groups. (5 tasks per group) I have 18 icon images (3 for the groups and 15 for the individual tasks) and I want to be able to panel these icons (starting with the groups) like this:
I want the next icon visible below and above (if further down than the first icon) and swipe to go to the next icon
Once an icon is clicked, the panels slide to the side, exposing the next layer (the specific 5 tasks for the selected group) with the selected group still visible on the side:
From there, the user can tell at a glance what group they are in, what the current, next and previous selectable tasks are, and that by swiping right, they can get back to the group selection.
What types of widgets would I need to look into in order to accomplish something like this? Are there already pre-built lists to do these activities?
Thanks for any guidance!
You can get close with a LinearLayout of ImageView widgets and a ScrollView (vertical) or HorizontalScrollView. However, it will not give you the desired "centered image with bits of the previous/next images" effect -- it will be wherever the user positions it.
You can get close with a Gallery. However, it will not give you the vertical orientation, and it will always give you a fixed set of full options to the sides, not the partial images that you seek.
If it's gotta be the way you describe it, you'll have to roll it yourself. Gestures and animations should give you the desired effect.
Have you taken a look at ViewFlipper? http://developer.android.com/reference/android/widget/ViewFlipper.html This will give the side by side effect but you will have to make custom views for each group to populate it with the proper icons.
I'd use a ListActivity for the first 3 top level items. This won't give you the auto centering effect that you'll probably want, but you should be able to look at the Gallery source code, which can be found here, and make some modifications to the ListActivity so that it autocenters.
For the next items, I'd add an onClick and a GestureListener so you can navigate to another activity with another list view. Since you know where you came from (add some data to your Intent) you can set the color rectangle on the left so that it appears that you have just swiped the whole view left.
If you need to customize the animation, you can call this:
overridePendingTransition(R.anim.slide_left_entry, R.anim.slide_left_exit);
To make the yellow icon look good as it animates to the left, I'd change the list bounds (on the first activity) to have no margins, and change the yellow icon to have square right edges - This will make the small yellow rectangle on the next activity appear to be part of the first activity.
It should be relatively easy to mock this up to see if it's going to work properly for you.
Good luck!
EDIT: Ok, so I've made a basic project that does most of what you want.
here is the link to the eclipse project file. I was going to put the source up here, but there's a bit much to display.
What you still have to do:
Tweak animation
Configure the layer lists to display the correct colors
Add information to the top level intent for the sub-activity to be able to configure itself.
Quite a few other small things.
I think I've got the main stuff done. I've also added the gesture listener I talked about, although re-reading your question, you actually didn't ask for that. Since it's cool, I left it in.
Good Luck once again!!
Have you thought of launching Activities with different view configurations? You can switch from one activity to another with a gesture and you can Animate the views. What your UI looks like to me is a bunch of screens with affordances that show the other screens. So one Activity per screen maybe the same in different configurations or something like that.

Categories

Resources