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
Related
I'm struggling to implement the expand feature of the card view described by the Material Design for Android.
In their design guidelines they show off different layouts for the Card component, but one example shows a card transition to fullscreen onClick.
This is the transition shown on their website:
I've tried out implementing a feature like this, but it would require much more work than what their guideline examples are suggesting... How does Material Design accomplish this? Is there a built-in feature for this, should I just manually translate and fit the card to fit the screen, or should I use an entirely new fragment or activity for the full-card-view?
Here are the Design guidelines, which contain that example, but nothing is said about the transition, neither on the documented Develop page, which is minimal really.
TL;DR
In the case of the gif image you've attached above, the RecyclerView and the detailed CardView should have their own separate Fragments which are operated in one single Activity.
Jump to the links at the end for the animation part.
Detail
Why so? Well, we had three choices:
Keep both Views in one Activity and overlap the detailed CardView on top of RecyclerView on click event. (This one is stupid, and not a good practice)
Create separate Activities for both Views (Recycler & fullscreen-Card)
The one I mentioned above.
RecyclerView and Detailed View shown as two separate Fragments
Now the reason for not choosing the 2nd option was because it is more performance intensive as compared to the 3rd one. We may not notice this in a small scale app but it certainly makes an impact when the app scales. Plus, creating fragments is more effective as we are sharing common views and variables in between the Views. So the best choice is number three. Note that this isn't a universal case and the usage will differ according to your requirement.
Using Fragments can be overwhelming at first but it keeps the code more organised when you get a hang of it. You should try to keep your app divided into few broadly divided activities and within those should be as many fragments as you want.
Here's a few links that helped me implement the exact same thing you're looking for.
MDC: Material Motion
Implementing Motion with MM
Building Transitions with MM
Hands-on experience in Codelab
All three of them helped me gain a better understanding on how the whole Material Motion framework works and how to implement it in my program.
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!
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.
Is there a way to absolutely position an UI element on Android so that it is located outside an Activity? For example: can you create a fullscreen ImageView simply by moving/resizing an ImageView inside an existing regular Activity instead of creating a new fullscreen activity?
EDIT: Re-reading my question I see I wasn't very clear about what I'm trying to accomplish. I'd like to temporarily extend an element to cover the notification bar at the top of the screen. I need to create a semitranslucent fullscreen overlay but since translucent activities cannot cover the notification bar I'm trying to find out if it's possible for an element to break out of activity's bounds and resize itself to fill the whole screen, top to bottom.
That depends on what specifically you're trying to do. You can easily draw graphics offscreen and then animate their movement into the screen using a Canvas, but this is more for graphics than for user-interface elements. For moving buttons or such, you can have a look at another question here "How to position View off-screen". I gave a brief intro on how to use canvases, but the questioner found another way to do it using a customised linear layout and view animations.
Lastly, if you're trying to zoom and scroll an image around that's larger than the ImageView, there are some sources you can look at for inspiration. I realies this isn't strictly your question, but I'm including it since it might be linked to what you're thinking about. You can find a tutorial on Anddev.org and an open source app on Google Code.
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