In app, I want to embed a MapFragment in a ScrollView and put a custom fragment above a SupportMapFragment
Works like a charm on smaller screens, but on a large enough display, the map is not taking up all the size it could.
Instead of the fixed layout_height below, I tried match_parent, wrap_content, fiddling with the gravity of the LinearLayout.
Any other tricks I could try?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/mapParent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal|bottom">
<fragment
android:name="SomeCustomFragment"
android:id="#+id/details_fragment"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="480dp">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="480dp"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_alignParentBottom="true"/>
<View
android:id="#+id/imageView123"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Related
I have a cardView layout as below. I have used Stetho to inspect layout in chrome. I could see that Linear Layout is filling the screen width. However, relative Layout is not filling the parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view_show_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:clickable="true"
android:elevation="100dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_layout_show_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view_show_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
Relative layout fills the parent. Try applying different for the layouts to prove it. Something like this...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3367bb"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_layout_show_card"
android:layout_width="match_parent"
android:background="#000000"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view_show_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
You will see that the complete layout becomes black, that means it covers the parent.
If you remove background color of relative layout, you will get to see blue color of linear layout.
If the issue is something else, please ask a new question
The solution is to add this inside of your CardView:
app:cardPreventCornerOverlap="false"
My activity's main layout is a LinearLayout. It has two children as an example. A RelativeLayout and a Button. The width and height of RelativeLayout are set to match_parent and the Button, match_parent and wrap_content. Unfortunately, RelativeLayout pushes the button below until it is not visible.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Why is this happening? I tried a tweak for the RelativeLayout which is changing the height to 0dp and weight to 1. It does make the Button visible but I am not sure if this is advisable as I only changed the height and weight of RelativeLayout.
Try this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
OR
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/disha"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:text="NIlu"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>
</ScrollView>
LinearLayout is either Vertical or Horizontal. Your first child which is RelativeLayout is matchParent then it will cover whole Outer layout .
Solution can be multiple its depends upon where exactly you want to place your Button . One way is .
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_above="#+id/btn"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>
Change your Code Like
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<Button
android:text="#string/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Worked Foe me..
you should Give android:layout_weight="1" to relative Layout
//try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
this seems to work just fine.
I tried a tweak for the RelativeLayout which is changing the height to
0dp and weight to 1
the code look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
In your layout, RelativeLayout is the first child of your LinearLayout. Since, you have set the height and width to match_parent it takes up all available space pushing the button out of the view.
When you set the RelativeLayout height to 0dp and weight to 1, LinearLayout first lays out all children based on the dimensions specified, and then distributes the remaining space based on the weight. In this case, the relative layout is 0dp, so it takes no space in first pass, and the button takes up space based on its onMeasure (lets say 100dp). The remaining space is now given to RelativeLayout because its weight is set to 1. Refer to the LinearLayout documentation for more details here.
You should consider using a RelativeLayout/ConstraintLayout as your root element.
I am trying to fill the parent with a black background using a relative layout, but it's not working.
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical">
<!-- this should fill the parent with black but its not filling -->
</RelativeLayout>
</LinearLayout>
</ScrollView>
Put this code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical">
<!-- this should fill the parent with black but its not filling -->
</RelativeLayout>
</LinearLayout>
</ScrollView>
You are doing a couple of things wrong:
If you want the whole ScrollView to have black background just set it on the ScrollView itself and set it to fill the whole view with fillViewport
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:background="#000" >
RelativeLayouts do not have orientation, that's a LinearLayout attribute
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"> <--- WRONG!
When you use ScrollView's, you should give it a whole layout child, either Linear or Relative, so that you have more control over the elements inside the ScollView. If you only have a RelativeLayout inside your LinearLayout, just use a RelativeLayout instead.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:background="#000" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your elements -->
</RelativeLayout>
</ScrollView>
I have a RelativeLayout that contains 3 children (LinearLayout) :
one at the top.
one at the bottom.
and one between the 2 last views.
The code i use for it is :
<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"
android:background="#color/white"
tools:context="fr.caudoux.onlinegames.activities.GameMainFragment">
<LinearLayout
android:orientation="vertical"
android:background="#ff44f0c3"
android:layout_alignParentTop="true"
android:id="#+id/game_main_actionbar"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
<LinearLayout
android:background="#F01234"
android:orientation="vertical"
android:id="#+id/game_main_top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/game_main_actionbar"
android:layout_above="#+id/game_main_chat_container">
</LinearLayout>
<LinearLayout
android:background="#ff2c3ff0"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:id="#id/game_main_chat_container"
android:layout_marginBottom="70dp"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
</RelativeLayout>
Since the api 21 the attribut 'android:layout_above' is not working : the second LinearLayout take all the space below the first one, and the third LinearLayout is over the second.
On api lower than 21 it works : the second part take only the space between the first and the third Linearlayout.
Does anyone known why it is not working and hos to do ?
Thanks
Change the ordering to have your top and bottom view declared before the view that is in between the two:
<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"
android:background="#color/white"
tools:context="fr.caudoux.onlinegames.activities.GameMainFragment">
<LinearLayout
android:orientation="vertical"
android:background="#ff44f0c3"
android:layout_alignParentTop="true"
android:id="#+id/game_main_actionbar"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
<LinearLayout
android:background="#ff2c3ff0"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:id="#id/game_main_chat_container"
android:layout_marginBottom="70dp"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
<LinearLayout
android:background="#F01234"
android:orientation="vertical"
android:id="#+id/game_main_top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/game_main_actionbar"
android:layout_above="#+id/game_main_chat_container">
</LinearLayout>
</RelativeLayout>
As mentioned, this same layout is easier to do as a LinearLayout, which specializes in stacked elements:
<LinearLayout 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="#color/white"
android:orientation="vertical"
tools:context="fr.caudoux.onlinegames.activities.GameMainFragment">
<LinearLayout
android:orientation="vertical"
android:background="#ff44f0c3"
android:id="#+id/game_main_actionbar"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
<LinearLayout
android:background="#F01234"
android:orientation="vertical"
android:id="#+id/game_main_top_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:background="#ff2c3ff0"
android:orientation="vertical"
android:id="#id/game_main_chat_container"
android:layout_marginBottom="70dp"
android:layout_width="match_parent"
android:layout_height="50dp">
</LinearLayout>
</LinearLayout>
Note how only the middle element (the element that needs to fill the remaining space) has a layout_weight on it. This ensures that all remaining space is allocated to that view while the other views are of fixed height.
You cannot have both above and below set in one view. Use below on second view and then below again on last view.
How to make a webview is -10dp width and height of the parent layout with a background image look like the following image:
Updated:
The blue box is the screen.
The black box is the outer layout(#+id/wrapper) and the red box is the webview(#+id/webview)
The green box is some other layout.
I have tried with the following code but have no success.
If the content in the webview is too long, the outer layout will stretch. I want a fixed size webview inside the layout but I don't know how to achieve this.
Ps. The background image of the black box is not full screen.
Would somebody give me some hints?
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#drawable/common_background" >
... some other layout ...
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/wrapper_background" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" />
</LinearLayout>
... some other layout ...
</RelativeLayout>
use
android:padding="10dip" to the parent of webview.
Use this code instead
it will look like As shown in image
xml Code:
<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"
android:background="#drawable/ic_launcher" >
... some other layout ...
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" />
</LinearLayout>
... some other layout ...
</RelativeLayout>
Not tested but you can try this:
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="10dp"
android:background="#drawable/wrapper_background" >
Try out this:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#drawable/common_background" >
... some other layout ...
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:padding="10dip" <---- Apply this in your layout.
android:background="#drawable/wrapper_background" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
... some other layout ...
</RelativeLayout>
Use this code instead
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/someOtherLayout"
android:layout_centerInParent="true"
android:background="#drawable/wrapper_background" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp" />
</LinearLayout>
<Some Other Layout
android:id="#+id/someOtherLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />