LinearLayout child pushes other views

LinearLayout child pushes other views - android

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.

Related

How to add Layout on top of background image in Android

I want to add Linear Layout on top of my background image as shown in below image(that horizontal bars).
But that is not working.I have checked by adding background color but it didn't shown in the preview.
Below is the way that I had added the Linear Layout.
<LinearLayout 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"
tools:context=".MainActivity"
android:background="#drawable/back">
<ImageView
android:layout_width="200dp"
android:layout_height="150dp"
android:src="#drawable/logo_big"
android:layout_marginLeft="200dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>

Try using a <RelativeLayout> around your <LinearLayout>.
Like this:
<RelativeLayout
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"
tools:context=".MainActivity"
android:background="#drawable/back">
<ImageView
android:layout_width="200dp"
android:layout_height="150dp"
android:src="#drawable/logo_big"
android:layout_marginLeft="200dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

Solution 1:
Set orientation = vertical in your parent LinearLayout.
Solution 2:
Use RelativeLayout for better UI experience.

How can I add two Scroll views in a xml layout such that each scrollview take half of the height of the layout?

How do I add two ScrollViews in an android XML-layout such that each scroll view takes half of the height of the layout?

You can use LinearLayout as rootview then add two ScrollView as child and assign android:layout_weight="1" to both ScrollView
Note : if you want your view scroll horizontally then use HorizontalScrollView
SAMPLE CODE
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/black"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--add viw here-->
</LinearLayout>
</ScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/holo_red_dark"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--add viw here-->
</LinearLayout>
</ScrollView>
</LinearLayout>
OUTPUT

There is a multiple way to do this. I am suggesting you one simple way.
try to add weightsum =2 inside parent layout. And devide layout with 1 like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_rel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2.0" >
<RelativeLayout
android:id="#+id/child_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:background="#0000FF" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/child_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:background="#00FF00" >
</RelativeLayout>
</LinearLayout>

Relative Layout inside Card View is not filling the parent even after giving match_parent

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"

layout_weight=".4" looks bigger than layout_weight=".6"

This. I can't understand why first layout looks bigger than second layout if the last one has .6 (60%).
<?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:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".4" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".6">
</RelativeLayout>
</LinearLayout>

#Miguel Barra apply to this
android:layout_width="match_parent"
replace to
android:layout_width="wrap_content"
or
android:layout_width="0dp"
in your both Relative layout

Honestly, I have not tried with fractional weight values but theoretically they should work. But the problem here i think is that, you need to set the layout_width for both the Relativelayouts to be 0dp. Only then weight parameter would take effect. Give it a try.
From android docs -
To create a linear layout in which each child uses the same amount of
space on the screen, set the android:layout_height of each view to
"0dp" (for a vertical layout) or the android:layout_width of each view
to "0dp" (for a horizontal layout). Then set the android:layout_weight
of each view to "1".

You should have this.
There are two cases if you are using weight
case 1: if you have horizontal parent. you should have layout_width="0dp"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".4">
</RelativeLayout>
</LinearLayout>
case 1: if you have vertical parent. you should have layout_height="0dp"
<?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"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".6" >
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".4">
</RelativeLayout>
</LinearLayout>

Set layout_height = "0dp" in LinearLayout(parent view)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
layout_height = "0dp" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6" >
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".4">
</RelativeLayout>
</LinearLayout>
anotherway is add your childview weight sum value(0.6+0.4=1)
android:weightSum="1"
in LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1" >

NestedScrollView could not scroll with match_parent height child

I implement NonSwipeableViewPager with a fragment has NestedScrollView like this, what I expect is that the scrollview can scroll up and show 2 textviews:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/header" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:src="#drawable/ic_up" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
But it could not scroll, I tried many ways but still did not get any solution

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
This linearlayout should have android:layout_height="wrap_content".
Reason for that is that if the scrollview's child is the same size as the scrollview itself (both match_parent for height) it means that there is nothing to scroll through, since they are of same size and the scrollview will only be as high as the screen.
If the linearlayout has a height of wrap_content then the height is not related to the height of the screen and the scrollview will be able to scroll through it.
Just remember that a scrollview can only have 1 direct child, and that child needs android:layout_height="wrap_content"

In my case app:layout_behavior="#string/appbar_scrolling_view_behavior" this is working only if some one face problem will be try it and may be solve your problem too. you should add also android:fillViewport="true" but without this my code working.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/subscription_background"
app:layout_behavior="#string/appbar_scrolling_view_behavior">

For me it worked when i added "android:layout_marginBottom="100dp"" for last child in androidx.core.widget.NestedScrollView

if you have used netedscrollview as follow you have to use
android:scrollbars="vertical"
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/toolbar_updateUserDetails"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="vertical"
>
</LinearLayout>
</androidx.core.widget.NestedScrollView>

You have to calculate your other child because last child binding on nestedScrollView. You add margin like child height. It is working.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

LinearLayout child pushes other views - android

Related

How to add Layout on top of background image in Android

How can I add two Scroll views in a xml layout such that each scrollview take half of the height of the layout?

Relative Layout inside Card View is not filling the parent even after giving match_parent

layout_weight=".4" looks bigger than layout_weight=".6"

NestedScrollView could not scroll with match_parent height child

Categories

Resources