I'm using animation in LinearLayout in order to show and hide right pane. The layout consist of two elements: a map and right panel. When panel hides map immediately changes its size and then animation appears. Its OK.
But when the panel is showing the map shrinks immediately too therefore black space is shown when panel slides and it looks ugly.
The markup as follows:
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:animateLayoutChanges="true">
<MapView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/map_view"
android:layout_above="#id/bottom_panel"
android:layout_weight="1"/>
<LinearLayout
android:id="#+id/right_panel"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:layout_weight="3">
<!-- Panel content -->
</LinearLayout>
</LinearLayout>
Here is the picture of what's going on during animation:
Can somebody help me with this? Thanks in advance!
Related
I currently have a map implemented in my Android application, and I'm having a bit of trouble trying to place a button at the top of it.
At the moment, this is how it is being displayed -
I want to prevent the button from being transparent, ideally I want it to appear like this below, or even have the button to span the width of the screen and stick to the top of the map -
Can anyone point me in the right direction in how to achieve the look in my second screenshot? Or even have the button across the top without being transparent, the map doesn't have to be in a frame or anything. Here is my code for the top screenshot -
<fragment 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"
android:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"/>
If anyone could help me I would appreciate it.
Nest the two views within a different layout such as a RelativeLayout. Take advantage of the alignParentTop, align_bottom, etc. properties.
<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" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"/>
<fragment
android:layout_below="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>
I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?
i don't know if i understand correct. but what you ask is pretty simple.
<FrameLayout 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"
android:background="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
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.
I must make a layout with 2 overlapping ScrollViews. One is an article with a "see comments" button. The other view is transparent and contains the comments, and is shown on top of the article when the "see comments" button is clicked. The problem is that when the comments are shown and do not fill the screen, touching the screen out of the screen (eg. below the button "Retour" on the image shown below. This is an iphone screenshot, the design on android is different) scrolls the article.
Also, the "Voir les Commentaires" button can be clicked, even with another layout on top of it.
Why is the view below not disabled (button, scroll...) when there's another one on top of it? How can it be done?
Anybody can help?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#FFFFFF">
<RelativeLayout android:id="#+id/header"
android:layout_width="fill_parent" android:layout_height="49dp"
android:background="#e7e7e8">
<!-- header -->
</RelativeLayout>
<ScrollView android:id="#+id/article_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_below="#id/header">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<!-- article -->
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_width="fill_parent"
android:layout_below="#id/header" android:layout_height="fill_parent"
android:orientation="vertical" android:background="#50000000" android:visibility="gone">
<ScrollView android:id="#+id/comment_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- comments -->
</ScrollView>
</LinearLayout>
</RelativeLayout>
You should definitely use a new Activity for your comment and use Transucent theme:
<activity android:theme="#android:style/Theme.Translucent">
http://developer.android.com/guide/topics/ui/themes.html
Some alternatives Themes should fit your needs (Dialog for instance)
or a blurried background: http://www.stealthcopter.com/blog/2010/01/android-blurring-and-dimming-background-windows-from-dialogs/
As for the button "Voir les Commentaires", you could set it to enabled = false when the second layer is visible. And I'm not quite sure atm, but I think you can do the same for the bottom ScrollView.
I have a FrameLayout wiht a ScrollView and a LinearLayout inside.
Both ScrollView and LinearLayout have the same dimensions, so they are overlaid and the LinearLayout covers and hides the ScrollView.
The ScrollView has TextView and a Button inside itself.
This is the situation:
+FrameLayout
+ScrollView
+ LinearLayout 1
+ TextView
+ Button
+LinearLayout 2
Sometimes the LinearLayout2, which is on the top, is animated and goes out of the screen. For layout reasons I can't set it to GONE and this is the problem.
After the animation ends, the ScrollView is shown and I need to interact with the ScrollView, for example clicking the button and obviously scrolling, but all the events are always caught by the LinearLayout 2, because it always has the Visibility set to VISIBLE even if is actually hide out of the screen.
So, how can I pass the touch event down to the scrollview and its children?``
** EDIT **
This my XML. So you can understand better.
Which is the idea?
This layout is composed by 4 sliding drawer. When the user clicks on one of them, the drawer clicked goes up with animation and becomes a kind of header, the others go down out of the screen and they hide and the scrollview is visible ready to interact with the user.
For example: I click the second drawer, the third goes down, the disclaimer, the first goes up out of the screen and the second, which has been clicked goes at the top of the scree as an header. If I click again the second drawer, which is on the top now, I restore the initial layout as at the beginning, always with animation. To do that I add a Trasparent Layout, which has the same dimension of a drawer on the top, to handle click event, so I avoid to set a new layout whenever I animate the drawers.
What I want is to interact with the scrollview when it becomes visible and with all the stuff inside it.
PROBLEM: I can't set the drawers to GONE because the wieght parameter influences their height, but only to INVISIBLE. So, how can interact with the scrollview below?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/programma_layout_root"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- SCROLLVIEW HIDDEN FIRST LAYER -->
<ScrollView android:id="#+id/programma_content_scroll" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top">
<LinearLayout android:id="#+id/programma_layout_disclaimer_content"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical" android:visibility="invisible">
<TextView android:id="#+id/programma_layout_disclaimer_content_text"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="some text..." />
<Button android:id="#+id/programma_layout_disclaimer_content_button"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center|bottom" android:text="CLICK" />
</LinearLayout>
</ScrollView>
<!-- LAYOUT FOREGROUND SECOND LAYER -->
<LinearLayout android:id="#+id/programma_layout_container"
android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"
android:weightSum="19">
<include android:id="#+id/header_placeholder" layout="#layout/header" />
<!-- DISCLAIMER DRAWER -->
<RelativeLayout android:id="#+id/programma_layout_disclaimer"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="4" >
</RelativeLayout>
<!-- FIRST DRAWER -->
<RelativeLayout android:id="#+id/programma_layout_first"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="5" android:visibility="visible"
>
<!-- some stuff here (text, image...) -->
</RelativeLayout>
<!-- SECOND DRAWER -->
<RelativeLayout android:id="#+id/programma_layout_second"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="5"
>
<!-- some stuff here (text, image...) -->
</RelativeLayout>
<!-- THIRD DRAWER -->
<RelativeLayout android:id="#+id/programma_layout_third"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="5" >
<!-- some stuff here (text, image...) -->
</RelativeLayout>
</LinearLayout>
<include android:id="#+id/header" layout="#layout/header"
android:layout_gravity="top" />
</FrameLayout>