Pull Down Map Android - Facebook Effect - android

I am currently working on a prototype where I have two fragments in a LinearLayout.
Here is what the xml looks like:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/map_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/footer"
android:layout_weight=".30"
>
</FrameLayout>
<FrameLayout
android:id="#+id/list_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/footer"
android:layout_weight=".70"
>
</FrameLayout>
</LinearLayout>
The top fragment is a map fragment and the bottom fragment is just a list of items. I am trying to expand the map when the user clicks on the fragment. The height changes from .3 to 1. Currently I have tried to animate and change the height of the fragment, this gives horrible performance. I have looked around and found that Facebook Nearby Places does this effect smoothly. Should I be using the ScaleAnimation class to do this? Thank you for your help.
Edit:
Foursquare has the same type of effect. When click on the map it scales smoothly into fullscreen I have attached a screen shot.
Here is an example of what it looks like:
http://im.tech2.in.com/gallery/2013/apr/foursquareforandroid_041425247544_640x360.jpg

Related

Multi Panel with Fragment in Android

I am trying to create a MultiPanel UI in my Android App. But I can only find tutorials and examples using only 2 fragments.
Can someone please explain to me how to add additional fragments and how to POSITION them in the layout ?
Ussualy in tutorials and examples it's like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment android:name="com.example.android.fragments.HeadlinesFragment"
android:id="#+id/headlines_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.example.android.fragments.ArticleFragment"
android:id="#+id/article_fragment"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
However, this is as said only for 2 fragments, and in LinearLayout. What If don't want to use LinearLayout, but FrameLayout ?
I am trying to do it with above mentioned Style, because if I will start creating Fragments with their own .xml , I cannot style them as I want, because I'll have to use X dp for positioning,which will cause different look on different devices. Also, when I tried to do it that way, I couldn't fill the entire escreen with FrameLayout, there were white spaces at the edges (I set background color of fragments to black).
Any kind of link to tutorials or example would help me alot.

How to setup a card view in a corner

I have an activity currently setup where there is a camera preview setup in a surface view. I am looking to implement a card view that scrolls similar to this: https://developers.google.com/glass/develop/gdk/ui-widgets
The cards will show information regarding the images being looked at. Any idea how to have the card scroll concept implemented such that it takes up the upper right corner of the screen?
The CardScrollView is a basic Android view and it can be used in an xml layout file. I haven't tried what you are asking but I have managed to put an overlay over the CardScrollView so making it smaller and putting it in the corner could be possible as well.
I can't test it right now, but try out the following layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SurfaceView
android:id="#+id/surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.glass.widget.CardScrollView
android:id="#+id/card_scroll_view"
android:layout_width="120px"
android:layout_height="90px"
android:layout_gravity="top|right"
android:layout_marginTop="5px"
android:layout_marginRight="5px" />
</FrameLayout>
You can find more information on the FrameLayout here:
http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

Navigation Drawer from Bottom with horizontal scrollbar

i'm trying to implement a menu which i want on the bottom outside of the screen. When i swipe up from the bottom edge of the screen i want it to appear there.
Furthermore i want a HorzizontalScrollView in there. Actually it should work like a Navigation Drawer on the side.
Here is the layout I already tried. I used the umano AndroidSlidingUpPanel:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="200dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<TextView
android:text="Hier wird das pdf gezeigt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/file_scroll_view"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/file_scroll_view_linear_layout"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
The slide up works, but i don
t know how to position it outside of the screen and how to let it only slide up until it aligns the bottom edge.
Furthermore I want the ScrollView working. Before I tried with the SldingUpPanel it worked like charm but now its not scrollable.
Anyone got an idea or any hint how to solve this?
for nothing to be seen you have to:
slidePanel.setPanelHeight(0); // I couldn't find anything on XML for that
and for it to stop midway through:
slidePanel.expandPane(0.1f); // for example for 10% of screen.

How can I set the scrolling position of a GridView in Android?

I am using a gridview in my android app. Now, for certain reasons, I am using a self build "fake" ActionBar, that is composed of a simple LinearLayout at the top of my layout.
Now, want I want to achieve is a similiar effect as in the app QuickPic . The gridview should initially start below the aciton bar and flow behind it as you scroll down in the gridview.
The actual question is, how can I position the gridview below my action bar (the LinearLayout) and still let it flow behind it?
Here is what I have so far:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/fake_action_bar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:paddingTop="25dp"
android:background="#color/actionbar_color" >
// Here normally would be more stuff for the action bar (text, buttons, etc.)
</LinearLayout>
<GridView
android:id="#+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="80dp"
android:numColumns="auto_fit"
android:gravity="center"
android:stretchMode="columnWidth">
</GridView>
</FrameLayout>
You don't need to use a fake ActionBar. Lucky you, there was actually a post on the Android Developers Google+ page not too long ago about this exact topic.
https://plus.google.com/+AndroidDevelopers/posts/T4FQkkJ5bGc

How to display google map in right half of the screen while left half of the screen contain list view

i am working on a app, where i need to display the google map on the right half of the screen of my device. The left half of the screen contain text in list view format. Please help me how to design the UI part or layout.xml.....Thanks in advance..!!!
Use linear layout with horizontal orientation and put both your mapview and listview inside it , now give similar weight to them .May be that will work .for example give layout_weight 1 or 0.5 in both mapview and listview .
Try use Fragments and here are some links to training
Using Fragments in Android
trading for fragments
Maybe you could look into something like this? I've used this format in apps before
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="vertical">
<MapView />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ListView />
</LinearLayout>

Categories

Resources