Animation of Activity in Activity - android

I am designer, not a programmer so I will make it clear using graphics.
I have 2 activities that I want to have as one. When user clicks on each button, a new activity is being active (normally a new window would open). I want to have all the information (text, images) on one screen that will scroll down, like in this animation.
before click
after click

You're looking for ExpandableListView. It's exactly what you want. A scrollable list that has items that can be expanded.

Assuming a LinearLayout that looks like
<LinearLayout>
<TextView/> <!-- Title, e.g. "Heating Program" -->
<TextView/> <!-- Details, e.g. "Standby mode" -->
<TextView/> <!-- Title -->
<TextView/> <!-- Details -->
<!-- etc -->
</LinearLayout>
If you set android:animateLayoutChanges="true" for the LinearLayout and then set detailsView.setVisibility(View.VISIBLE) or detailsView.setVisibility(View.GONE) from OnClickListener (each title hiding/showing its detail) you will get about that effect. But it's not perfect.
Note: Requires Honeycomb or above. Animation can be customized via setLayoutTransition(LayoutTransition transition)

I would make a custom Layout class that has all the Views in it (the main "Heating Program" view, arrow ImageView, and the details view), and give that class the knowledge of being "expanded" or not. Then when the main view/arrow view are clicked, toggle the expanded-ness, change the arrow image, and set the visibility of the details view (like #zapl says).

Related

Android Sliding Up View

I need to do a Sliding Up View wich should slide up from the bottom of the screen when I click a button. It has to show on the bottom of the screen and I need to slide/drag it to the center of the screen. The images below explain it better.
almost like the AndroidSlidingUpPanel from "umano" which you can find here:
The problem is that I want the first child (The content of my View - an image for example) to fill all the screen and also I want the second child(the actual bottom bar) to be showed when I click a button. The images below explain it better. If there is not possible to do this by changing the AndroidSlidingUpPanel, how can I do that? I have never worked with views like this. I would really appreciate any tip or help. Thank you very much.
To hide or show panel, you can use
showPanel()
method.
To hide it try this:
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.hidePanel();
To make it appe
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.showPanel();
This is available only in v 2.0 of AndroidSlidingUpPanel (https://github.com/umano/AndroidSlidingUpPanel). As I know, it's included in android support library v13 now, but not sure if there is latest version.
You can check this library for dragging content from all four edges of the screen https://github.com/SimonVT/android-menudrawer
You can make a custom layout inside this menu drawer to get your expected result.
You can do it with AndroidSlidingUpPanel, just set visibility:
android:visibility="GONE"
on the 2° child of the view (the panel) and use .showPane() and .hidePane() on SlidingUpPanelLayout to show/hide the panel when you click the button.
The following library do it as well
https://github.com/Paroca72/sc-widgets
Inside you will find a widget named ScSlidingPanel.
This widget work different from the other and can be use and customize very easily.
You put it inside a RelativeLayout give an alignment and it will open from that side.. Left, Right, Top and Bottom or mixed..
In your specific case your must align your panel at bottom of the container and it will sliding from the bottom.
<!-- Define the container -->
<RelativeLayout
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"
tools:context=".MainActivity">
<!-- Sliding from top -->
<scapps.com.library.ScSlidingPanel
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- HERE THE YOUR CONTENT -->
<!-- or you can load by setLayout method -->
</scapps.com.library.ScSlidingPanel>
</RelativeLayout>
Another important property that you can use right for your case is the handle size.
You can define an handle and define the beavior of it.. as your image above you used a button.. you can unsing an image and setting setToggleOnTouch() to true for open/close the panel touching on handle.

Multiple dialogs at once in Android

I'm trying to do something like the Jelly app to show multiple dialogs at once when a user clicks. Is there a way on Android to show multiple dialogs at once? So far I've only seen posts about having one dialog appear and then another based on user action. But I want them to all appear at once, similar to Jelly, and then have the user navigate through them using gestures.
Here's an image: http://www.8ms.com/wp-content/uploads/2014/01/view-answers-compose-answer-jelly.png
I figured this out --
Use a FrameLayout (http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/) to overlay views and have the answers appear and disappear on click.
Specifically with the Jelly example - One view is the main view (with the user's question) and then another view is the secondary view (with all of the community answers).
The secondary view starts off as hidden, so only the main view shows.
android:visibility="invisible"
Then when the user clicks the question in the main view, your OnClickListener for the main view can programmatically change the visibility of the secondary view.
view.setVisibility(View.INVISIBLE);
So the questions appear on top of the question. You can adjust the size of the secondary/question view so that you can still see the question, like in Jelly app.
The layout of the community answers is: (see code sample below)
HorizontalScrollView
--> Linear Layout
--> Custom Views (this is where each answer is shown. It could also be a Custom Dialog)
This is all within the FrameLayout.
On how to create a custom Dialog: http://about-android.blogspot.com/2010/02/create-custom-dialog.html
In your XML file, you would leave a blank space within the Linear Layout so that you could programmatically add in the answer views/dialogs because the number and content of the custom views would differ from question to question.
<HorizontalScrollView
android:id="#+id/notes_hsv"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:visibility="invisible" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- AnswerViews are added programmatically to this LinearLayout -->
</LinearLayout>
</HorizontalScrollView>
On adding views programmatically to a LinearLayout: Android: Add a textview to linear layout programmatically

Scrollview, listview, menu options

I need to have
ListView - with 3 options
Button
ListView - with 2 options
ListView - with 2 options
as what is displayed on my screen in that order, each underneath and seperate to each other. This will be too large to display on the screen to want a scrollview to encircle it all which people say you should NEVER do.
I dont want my ListViews to be scrollable as I want all the options displayed so how can I do this?
You should never nest scrollable views. Thats right. For your problem replace your ListView with Layouts, there is no reason to use ListViews for what you want to do. The layout should look like this in some way:
<ScrollView>
<LinearLayout>
<!-- your 3 options -->
<!-- your button -->
<!-- your two options -->
<!-- your second two options -->
</LinearLayout>
</ScrollView>

Custom sub menu in android

I have created custom tab bars by following the post given below:
How to create a Tab-like UI in Android?
No I need to display a set on sub menu when the center tab (actually it is a button) is clicked. I need the sub menu to pop up like in this drawing (sub menu should be above my main layout):
I believe that this can be achieved by putting an additional layout above the custom tab bar in which a set of buttons can be placed one after another. But I am not sure which layout needs to be used and how I can get the same style in the drawing. Please help me to find a solution.
you're correct with just adding another layout above the button you want to open it, and then setting its visibility to gone until you want to animate in it.
a regular LinearLayout would work fine, and then adding 4 buttons to it would work as well, then you would want to make sure those buttons used the same styles as the built-in android menu buttons (or style it yourself) but check out some of the built in styles here
example:
your activity
<RelativeLayout 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">
//all your other activity layout stuff goes here
<!--add your new menu-->
<LinearLayout
android:id="#+id/my_menu_layout"
android:visibility="gone"
... />
<Button
android:id="#+id/menu_btn_1"
style="#android:style/Widget.Holo.ActionButton.TextButton" //as example of built-in style
... />
//more buttons
</LinearLayout>
then in your activity class, assign an onClickListener to the button that will toggle the menu and animate the view in
//animation xml you make
Animation inFromBottom = AnimationUtils.loadAnimation(this, R.anim.layout_in_bottom);
mMenuLayout.startAnimation(inFromBottom);
mMenuLayout.setVisibility(View.VISIBLE);
now your view will animate in and you can go about adding onClick listeners to the buttons

How do I go about making a top menu/submenu system like this in Android?

Example: http://cdn3.staztic.com/screenshots/cfo-magazine-mobile-1-2.jpg
I've just started learning how to program android apps, and I'm not sure how to go about it. Are they using tab layouts for both the main menu and the submenu right below it? If you could point me in the right direction, it'd be greatly appreciated.
The top menu is a TabHost.
The "submenu" looks like a HorizontalScrollView with Buttons.
The main view is a ListView.
I'd create a LinearLayout to act as the tab content's view something like this...
<LinearLayout>
<!-- Usual width/height attributes and set the orientation as vertical -->
<LinearLayout>
<!-- Usual width/height attributes and set the orientation as horizontal -->
<!-- Place the 'Latest News' and other buttons here -->
</LinearLayout>
<ListView>
<!-- Usual width/height attributes -->
</ListView>
</LinearLayout>

Categories

Resources