Positioning a view partially outside the screen in Android - android-layout

How do I place a view partially outside the screen in Android?The view that needs to slide in is placed inside a RelativeLayout as of now and here is the entire layout file.
<?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">
<WebView
android:id="#+id/webViewLink"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<WebView
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
The second webview is the one which needs to be partially outside the screen.

You could use android:layout_marginRight="-30dp" as #user1490103 suggested. Or you could use android:translationX. The translation would make more sense if you are planning on animating this View. Remember to set android:clipChilren="false" on the RelativeLayout.

Related

Drawer Layout in fragment

I tried to implement a Drawer Layout in a fragment, however, if I use "android: layout_gravity="start" then my navigational just disappears.The same code works fine if I put it in an activity.
And if I try to swipe to the right, it also does not work (you can see it in the image I posted). For me, it looks like I can not swipe to the right and therefor the navigation view can not be opened?
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/bottom_navigation">
/>
</android.support.v4.widget.DrawerLayout>
Image (if I swipe to the right
By looking at this gist, you should add android:fitsSystemWindows="true" to the DrawerLayout and set its width to match_parent. My guess is, it should be the child NavigationView which can have a defined width.

Android - how to set SlidingUpPanelLayout to half of the screen height?

I am using Umano's SlidingUpPanelLayout to provide a sliding panel that you can drag up from the bottom of the screen. You can find the documentation here:
https://github.com/umano/AndroidSlidingUpPanel
I want it so that the panel only fills half of the screen when it is extended. The documentation states this:
The main layout should have the width and the height set to match_parent.
The sliding layout should have the width set to match_parent and the height set to either match_parent, wrap_content or the max
desireable height. If you would like to define the height as the
percetange of the screen, set it to match_parent and also define a
layout_weight attribute for the sliding view.
This is my XML layout containing the sliding panel:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.bleachedlizard.policeapp.mainactivity.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/sliding_up_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<include layout="#layout/main_content" />
<FrameLayout
android:id="#+id/contact_details_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
I've tried adding a layout_weight attribute to contact_details_frame but it doesn't work. In fact, Android Studio won't auto-complete when I try to add a layout_weight attribute (I'm guessing because it needs to be inside a LinearLayout in order for that attribute to be valid there). I've tried adding a LinearLayout, both on its own and also with an empty View to try to take up the top half of the screen, but still nothing.
Can someone tell me how to get the SlidingUpPanelLayout to only take up half of the screen?
I test a lot of ways , but non of them works, But here is a another way. hope that it helps :)
First: just change sothree:umanoPanelHeight value to 0dp that it'll hide bottom bar of SlidingUpPanelLayout
<com.sothree.slidinguppanel.SlidingUpPanelLayout
// your code
sothree:umanoPanelHeight="0dp">
Second: make a barlayout or button [Not in dragView]
(to open SlidingUpPanelLayout, instead of using the bar that SlidingUpPanelLayout shows itself)
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btn_open_slide_panel"
android:text="open SlidingUpPanelLayout "/>
Third: in SetOnClickListener method of your view(that we made in second part)
Call method setAnchorPoint() and pass 0.5f as argument
Use ANCHORED as PanelState
slidingUpPanelLayout.setAnchorPoint(0.5f);
slidingUpPanelLayout.setPanelState(SlidingUpPanelLayout.PanelState.ANCHORED);
hope it helps :)

Place WebView below GridView in Android Layout?

Below is the xml layout for my Android App. I am trying to positions a webview below the gridview on the screen.
Can anyone help explain what I need to do to get that to work?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/webView1" />
</LinearLayout>
</LinearLayout>
Thanks
I think two minor changes will help make this work for you. First, when creating a LinearLayout, the android:orientation attribute is required to indicate whether the children should be added horizontally or vertically. Since you want one view on top of the other, add android:orientation=vertical to the HomePage LinearLayout. Second, your GridView currently has a android:layout_height of fill_parent. This will cause it to expand vertically and fill up the entirety of the LinearLayout, which will keep your WebView from being displayed. Try changing this attribute to wrap_content.
Making the height of both children wrap_content could possibly cause you to have some empty space in your app. If you need either the GridView or WebView to take up all of the empty space in the view, you can use the android:layout_weight attribute. Assign the view you want to expand to fill all remaining space after the rest are drawn the attribute like this: android:layout_weight=1. (Here, the 1 represents 100% of the remaining space) If you want more granular control over what percentage of the parent your children occupy, look into using decimal values with the android:layout_weight attribute or android:weightSum on the parent in conjunction with a android:layout_weight on each of the children. Hope this helps!
Use android:layout_height="wrap_content" in Gridview
Set orientation attribute in inner linear layout.
android:orientation="vertical"
Give fixed height of WebView and set android:layout_weight="" in both child.
Try below code and change according to your webview height and grid view height.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_weight="1"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_weight="1"
android:id="#+id/webView1"
/>
</LinearLayout>
</LinearLayout>
In above code I give Height of WebView 200dp change according to your requirement.

Android: SlidingDrawer with bottomOffset and content visible

I have been experiencing some issue with the SlidingDrawer in Android. I am building a screen with a horizontal sliding drawer. It is working fine, it is opening and closing as expected. I have set a bottomOffset as 50dip in order to see 50dpi of the content when the drawer is closed, but this is not happening.
When the drawer is closed, I am seeing the 50dip distance between the right side of the screen to the handle, but then the content view gets invisible so there is a 50dip black space between the handle and the screen edge, as the image below shows:
When I press the handle button, it seems that the content gets its visibility changed to visible, and then it appers. I would like to keep the content visible without having to press the handle, like in the imagem below:
I downloaded the SlidingDrawer source code from http://blog.sephiroth.it/2011/03/29/widget-slidingdrawer-top-to-bottom/ in order to try to change the code and get the expected result, but I am not getting.
The XML for the sliding drawer:
<?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">
<br.com.dina.partial.example.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/br.com.dina.partial.example"
android:id="#+id/map_slider"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
my:handle="#+id/Handle"
my:content="#+id/ViewLayout"
my:direction="rightToLeft"
my:bottomOffset="-65dip"
android:layout_below="#+id/test">
<Button android:id="#+id/Handle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="handle"/>
<LinearLayout android:id="#+id/ViewLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.markupartist.android.widget.ActionBar
android:id="#+id/actionbar"
style="#style/ActionBar"/>
<FrameLayout android:id="#+id/ViewContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white" />
</LinearLayout>
</br.com.dina.partial.example.MultiDirectionSlidingDrawer>
</RelativeLayout>
Is there a way to achieve what I want?
Many thanks
edited to add the xml
Use the onDrawerScrollListener, onDrawerOpenListener, and onDrawerCloseListener to change the visibility of certain items depending on the state of the drawer. So when you say "the drawer is closed...and the content view is invisible" then in your onDrawerCloseListener set the content view to VISIBLE. Give this a try and let me know how it goes.
EDIT so you did something like this?:
drawer.setOnDrawerCloseListener(new OnDrawerCloseListener(){
#Override
public void onDrawerClosed() {
//get the ViewContent by id and set visibility to VISIBLE
});

Android MapView - how to attach additional controls to a MapView in desired position

I need to place additional image button "my current location" to a top right corner of the MapView. Any ideas how to do this?
Making the questions generic:
1) According to MapView documentation it is possible to attach additional view objects to a MapView. How to do this?
2) How to place such additional controls into specific position on MapView?
The example below adds a button on a mapview, just copy paste it and then move the button to where you like it:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map_main"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.google.android.maps.MapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="0y6Hyjz6Kxo-NOV_9KHYF7-ECYeGt99xeyVU3IQ"/>
<Button
android:id="#+id/select_3"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:text="Center on Pickup Location"
style="#style/BasicButton"
android:layout_height = "40dp"
android:layout_width = "280dp"
android:onClick="selfSelectCenterLocation">
</Button>
</RelativeLayout>

Resources