First view in RelativeLayout expand to fill remaining space - android

I am working on a layout with a cardview, a checkbox and a button with the initial structure as shown in the first image:
In this case the listview is not shown until the user clicks an image inside the cardview, so when this happens the dessired structure is like
the second image
However as the listview is actually inside a fragment I can't achieve the dessired layout because wrap_content and match_parent for the cardview gives me the next result
And as you can see the cardview overlaps the button and the checkbox goes beyond the screen
Right now this is my layout:
<?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="#android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_below="#+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
style="#android:style/Widget.DeviceDefault.Button.Borderless"
/>
I hope you can help me to set the max height of the card view to stop growing when the space is filled.
I have also tried to set the checkbox always at top of the bottom and the cardview to fill the remaining space and although it gives me the correct structure when the listview is expanded, it doesn't work for the list hidden since the cardview fills the space with nothing.
Update
As suggested I have tried changing the root layout to LinearLayout using weight, however, I got the same result as before and if I change the weight of the cardview to 1 and the checkbox to 0 I am able to get the desired layout for the expanded list but not for the hidden case.
<?xml version="1.0" encoding="utf-8"?>
<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="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="#dimen/event_invitation_expand_icon"
android:layout_height="#dimen/event_invitation_expand_icon"
android:id="#+id/shrink"
android:src="#drawable/ic_shrink"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/shrink"
android:layout_marginTop="5dp"
android:id="#+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="#layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/check"
android:layout_marginTop="20dp"
android:layout_below="#+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:textStyle="bold"
android:textColor="#android:color/white"
/>


You'll need to use a LinearLayout and use Weight for the childs.
You can change all views weight on click.
But I think you'll need to put your CheckBox inside a layout and set this layout weight. Otherwise you'll mess with the height.
Didn't look to close to your layout, but you may need to do that for CardView too.
Just keep that in mind.
Hope this helps


To do what you are trying to do, you would have better luck using a LinearLayout with vertical orientation as your root element. Doing this, you could set the CardView to have a weight of 1 (and a 'height' of 0dp, because of how weight works) without giving a weight to the other elements, causing it to fill all available space not taken by the other two elements. The method for doing this can be found here:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight

Related

Adding two linear layout in scrollview the layout either shrink or compress. Here i am using layout_weight in them that's why the problem occurs

when i used the single linear layout in scrollview then the output and code is like that
Xml code:
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
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"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is:
But when i add another layout then code and output is look like
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
//first linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
// when i add second linear layout then the first linear layout is varied,I don't know why
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/citispotterlogo"></ImageView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is :
When i added the image in linear layout the first linear layout shrink I don't know why?
Please help me to solve this,I try to search this on google in stackoverflow but i don't find nothing about this. Can anybody solve this or give me some another approach for solving this problem.
So my final output is look like this
I have added two images which are in scrollview
(https://i.stack.imgur.com/DpJ9C.png)
(https://i.stack.imgur.com/QhQoL.png)

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
This LinearLayout has height which is match_parent, you should have used wrap_content or use a fixed height so that the second layout must be visible

This layout uses a weightSum in the first linear layout when you add the last LinearLayout you do not include a weight for it. This is causing the UI to render incorrectly.
I've included a couple of option solution for you both should do the job.
Option 1
change the weighted sum in the first LinearLayout to 11 and then add a weight value of 1 to the last LinearLayout.
Option 2
Add a weighted value to the last LinearLayout but you will need to adjust the rest of the weighted values so it equals weight sum in the first LinearLayout (10).
LayoutWeight Review
LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. The default weight is zero.

Android Layouts: Stick one Layout to the top of the screen and place another Layout centred below

I am working on my first android-project, a memory-game in Android Studio. The gameActivity-Frame should contain some textViews, displayed in one line (for stats) on the top of the screen and the memory-cards below. There are mutliple memory-versions, so the number of memory-cards vary - and by that the dimension of thier GridLayout.
My main Layout is a LinearLayout (vertical). I placed another LinearLayout (horizontal) on it, where the Textviews take place. To display the cards, I used a GridLayout which will be filled with cards once the game started.
The LinearLayout (with textViews) should always stick on the top of the screen. The GridLayout should be centered in the remaining space below.
What I get is that both Layouts either stick in the middle, or that the LinearLayout is correct, but the GridLayout is either on the bottom or on the top of the remaining space.
I tried to find a solution here on SO, and I think I tried every possible combination of the gravity- and layout_gravity - settings of the components. I can imagine the problem is that I can use either wrap_content or match_parent in the main Layout, but not both. Guess I'd need wrap_content to stick the first Layout to the top and match_parent to use the whole space below this Layout.
How can I stick the first Layout to the top and center the GridLayout in the remaining space?
The picture shows my current layout (see code below) and how I want it to look.
center_GridLayout
Edit to clarify:
The LinearLayout should stick to the top of the screen, the GridLayout should be
centered in the remaining space below the LinearLayout.
RelativeLayout won't do the job properly, because the layouts might overlap, depending on the amount of memory-cards and the user's device's dimensions.
I uploaded another screenshot where it's better visible what I want to achieve:
This is my .xml (deleted some unimportant textViews):
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/MemoryLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:id="#+id/gridLayoutMainActivityTEST"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
tools:context=".GameActivity" />
</LinearLayout>

use relative layout or constraint layout.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/MemoryLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:layout_centerInParent="true"
android:id="#+id/gridLayoutMainActivityTEST"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
tools:context=".GameActivity" />
</RelativeLayout >

You can use relative layout along with linearlayout.From your question i got that you want your linearlayout always stick to top and GridLayout always stick to center.If this is the case then i think following code snippet will help you.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</GridLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Texts Here"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
</RelativeLayout>

The ConstraintLayout was what fixed my problem... Here's the solution that finally works perfectly:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="#+id/memory_activity_4x4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout_4x4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textStatsPairs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/textStatsPairs" />
</LinearLayout>
<GridLayout
android:id="#+id/gridLayout4x4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:columnCount="4"
android:foregroundGravity="center"
android:orientation="horizontal"
android:rowCount="4"
android:textAlignment="center"
android:useDefaultMargins="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout_4x4"
tools:context=".GameActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>

Cannot see textview

I am trying to make a layout with this code :
<?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"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
>
<android.support.v7.widget.CardView
app:cardCornerRadius="#dimen/cardview_corner_radius"
app:cardElevation="2dp"
card_view:cardUseCompatPadding="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#f27181"
android:id="#+id/charity_overview_card"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.sharesmile.share.views.LBTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:padding="9dp"
android:text="Women Empowerment"
android:id="#+id/iv_charity_category_title"
/>
<ImageView
android:background="#color/colorPrimaryDark"
android:layout_width="128dp"
android:layout_height="126dp"
android:id="#+id/iv_charity_overview"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<com.sharesmile.share.views.LBTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_charity_amount"
android:textColor="#color/black"
android:textSize="15sp"
android:text="Test"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
but the last textview is not visible, even in the preview it is not showing, it shows like this :
As you can see the textview is not visible, i haven't given any weight, still facing this issue.
Also when i increase the size of the textview the value is visible as you can see here :

LinearLayout inside other parent LinearLayout with dynamic size will produce this type of issues. You should avoid nesting layout inside layout as much as possibile.
This issue can be simply fixed by removing the parent layout orientation.
For improvement
<CardView>
<LinearLayout> vertical
//Add 'N' child items here
</LinearLayout>
</CardView>

Change the following properties of your main LinearLayout, Make height and width to match_parent
android:layout_width="match_parent"
android:layout_height="match_parent"

Android XML Layout - ImageView taking all space

This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>

For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.

You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.

How do I align views at the bottom of the screen?

Here's my layout code;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<LinearLayout android:id="#+id/LinearLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom">
<EditText android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</EditText>
<Button android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</LinearLayout>
</LinearLayout>
What this looks like is on the left and what I want it to look like is on the right.
The obvious answer is to set the TextView to fill_parent on height, but this causes no room to be left for the button or entry field.
Essentially the issue is that I want the submit button and the text entry to be a fixed height at the bottom and the text view to fill the rest of the space. Similarly, in the horizontal linear layout I want the submit button to wrap its content and for the text entry to fill the rest of the space.
If the first item in a linear layout is told to fill_parent it does exactly that, leaving no room for other items. How do I get an item which is first in a linear layout to fill all space apart from the minimum required by the rest of the items in the layout?
Relative layouts were indeed the answer:
<?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">
<TextView
android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</TextView>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/label_submit_button"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<EditText
android:id="#+id/EditText"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content">
</EditText>
</RelativeLayout>
</RelativeLayout>

The modern way to do this is to have a ConstraintLayout and constrain the bottom of the view to the bottom of the ConstraintLayout with app:layout_constraintBottom_toBottomOf="parent"
The example below creates a FloatingActionButton that will be aligned to the end and the bottom of the screen.
<android.support.constraint.ConstraintLayout
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_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
For reference, I will keep my old answer.
Before the introduction of ConstraintLayout the answer was a relative layout.
If you have a relative layout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your views at the bottom are not shown in a relative layout then maybe the layout above it takes all the space. In this case you can put the view, that should be at the bottom, first in your layout file and position the rest of the layout above the views with android:layout_above. This enables the bottom view to take as much space as it needs, and the rest of the layout can fill all the rest of the screen.

In a ScrollView this doesn't work, as the RelativeLayout would then overlap whatever is in the ScrollView at the bottom of the page.
I fixed it using a dynamically stretching FrameLayout :
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<!-- content goes here -->
<!-- stretching frame layout, using layout_weight -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<!-- content fixated to the bottom of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- your bottom content -->
</LinearLayout>
</LinearLayout>
</ScrollView>

You can keep your initial linear layout by nesting the relative layout within the linear layout:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="submit"
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
</Button>
<EditText android:id="#+id/EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:layout_alignParentBottom="true">
</EditText>
</RelativeLayout>
</LinearLayout>

The answer above (by Janusz) is quite correct, but I personnally don't feel 100% confortable with RelativeLayouts, so I prefer to introduce a 'filler', empty TextView, like this:
<!-- filler -->
<TextView android:layout_height="0dip"
android:layout_width="fill_parent"
android:layout_weight="1" />
before the element that should be at the bottom of the screen.

You can do this with a LinearLayout or a ScrollView, too. Sometimes it is easier to implement than a RelativeLayout. The only thing you need to do is to add the following view before the Views you want to align to the bottom of the screen:
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1" />
This creates an empty view, filling the empty space and pushing the next views to the bottom of the screen.

1. Use ConstraintLayout in your root Layout
And set app:layout_constraintBottom_toBottomOf="parent" to let the Layout on the bottom of the screen:
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>
2. Use FrameLayout in your root Layout
Just set android:layout_gravity="bottom" in your layout
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
3. Use LinearLayout in your root Layout (android:orientation="vertical")
(1) Set a layout android:layout_weight="1" on the top of the your Layout
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="welcome" />
(2) Set the child LinearLayout for android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"
The main attribute is ndroid:gravity="bottom", let the child View on the bottom of Layout.
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal">
</LinearLayout>
4. Use RelativeLayout in the root Layout
And set android:layout_alignParentBottom="true" to let the Layout on the bottom of the screen
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
</LinearLayout>
Output

This also works.
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="#+id/linearLayout3"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_marginTop="20dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>

Following up on Timores's elegant solution, I have found that the following creates a vertical fill in a vertical LinearLayout and a horizontal fill in a horizontal LinearLayout:
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />

You don't even need to nest the second relative layout inside the first one. Simply use the android:layout_alignParentBottom="true" in the Button and EditText.

If you don't wish to make many changes, then you could just put:
android:layout_weight="1"
for the TextView having ID as #+id/TextView i.e
<TextView android:text="#string/welcome"
android:id="#+id/TextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</TextView>

Creating both header and footer, here is an example:
Layout XML
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/backgroundcolor"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#FF0000">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#FFFF00">
</RelativeLayout>
</RelativeLayout>
Screenshot

For a case like this, always use RelativeLayouts. A LinearLayout is not intended for such a usage.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Place your layout here -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<Button
android:id="#+id/setup_macroSavebtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/setup_macroCancelbtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>

Use the below code. Align the button to buttom. It's working.
<?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" >
<Button
android:id="#+id/btn_back"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="Back" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.97"
android:gravity="center"
android:text="Payment Page" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</LinearLayout>
</LinearLayout>

Use android:layout_alignParentBottom="true" in your <RelativeLayout>.
This will definitely help.

In case you have a hierarchy like this:
<ScrollView>
|-- <RelativeLayout>
|-- <LinearLayout>
First, apply android:fillViewport="true" to the ScrollView and then apply android:layout_alignParentBottom="true" to the LinearLayout.
This worked for me perfectly.
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/linearLayoutHorizontal"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
</ScrollView>

You can just give your top child view (the TextView #+id/TextView) an attribute:
android:layout_weight="1".
This will force all other elements below it to the bottom.

This can be done with a linear layout too.
Just provide Height = 0dp and weight = 1 to the layout above and the one you want in the bottom. Just write height = wrap content and no weight.
It provides wrap content for the layout (the one that contains your edit text and button) and then the one that has weight occupies the rest of the layout.
I discovered this by accident.

I used the solution Janusz posted, but I added padding to the last View since the top part of my layout was a ScrollView.
The ScrollView will be partly hidden as it grows with content. Using android:paddingBottom on the last View helps show all the content in the ScrollView.

Categories

Resources