One of my DialogFragments implements two equal-sized GridViews, one stacked on top of the other. Ideally, my layout would look like this (as seen in Android Studio):
Unfortunately, when I load up the layout on an actual Android device, I get something like this:
When the Kanji GridView is empty, it's completely invisible. Additionally, its height varies depending on the number of elements it has to display. How can I force the bottom GridView to fill 50% of the height as per the layout seen in Android Studio, even when it's empty?
Here is the XML for this particular layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:focusableInTouchMode="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/progress_bar"
android:layout_toStartOf="#+id/search_box_kanji"
android:visibility="gone"
android:indeterminate="true"
android:layout_centerVertical="true"/>
<SearchView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#id/search_box_kanji"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/components" />
<com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
android:id="#+id/grid_components"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/kanji" />
<GridView
android:id="#+id/grid_kanji"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:numColumns="9"/>
</LinearLayout>
</LinearLayout>
(By the way I'm using the StickyGridHeaders library for the upper Components GridView)
Change the '0dp' layout_height on your two LinearLayouts to 'match_parent'.
You're missing a weightSum attribute on your outermost LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:weightSum="2" > <!-- This line is what you were missing -->
...
</LinearLayout>
Tested this as working on device (assuming your EntryDetailsHeader style sets match_parent width and wrap_content height).
Related
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>
I've bounced around quite a bit and haven't been able to find a solution that matches what i'm trying to do.
I have 2 RelativeLayouts inside a LinearLayout.
I would like the first RelativeLayout to take up 60% of the screen.
I would like the second layout to take up the remainder of the screen.
I am using weights but I'm trying to see if there is a way that I can avoid using a secondary weight on the second RelativeLayout.
The reason for this is that the user has the ability through a Button click to hide the first layout.
In code I do this by setting the visibility of the first RelativeLayout to "Gone".
The problem is if I have weight set to .6 and .4 and sum of 1, when the first one is set to gone, the second one moves up correctly, but its height doesn't increase because it was set to 40%.
Ideally I could have it set to fill the remaining space on the screen and therefore when the first one is hidden, it will now take up all 100% of the screen.
Is this possible or do I need to do more programmatically when I hide the first View to increase the allowed height of the second view?
Hopefully this makes sense, if not let me know and i'll try to clarify further.
I've stripped out some of the contents of the RelativeLayouts for simplicity as well as some ids.
Code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/relativeLayout1"
android:layout_weight="0.6">
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</LinearLayout>
You can use Android Support Library's Percentage Relative Layout to achieve this.
Percentage Relative Layout
import percentage support library by adding following line to your build.gradle(app level),
compile 'com.android.support:percent:24.2.1'
And Your XML file will be,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:breadCrumbNavigationLayout="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:id="#+id/linearlayout1"
android:focusable="true"
android:focusableInTouchMode="true"
android:weightSum="1">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_heightPercent="60%"
android:id="#+id/relativeLayout1"
>
<FrameLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame1" />
<ProgressBar
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/progress"
android:indeterminateOnly="true"
android:keepScreenOn="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout1"
android:id="#+id/relative2">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_below="#+id/relativeLayout1" />
<ListView
android:id="#+id/list"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp" />
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
</LinearLayout>
Once you set,
relativeLayout1.setVisibility(View.GONE);
you are able to see that the Relative layout 2 will occupy the whole parent space.
I hope it will help you. All the best.
I am trying to use percentRelativeLayout to make my app 90% width of the screen size and 50% of the screen height.
My layout consists of two fragments: 1) the left side is 4 buttons and 2) the right side is a container that inserts a different fragment with each button click.
When I use percentRelativeLayout or percentFrameLayout to make the height 50% of the screen, and the width 90% of the screen I get the result below where it seems like I am getting my fragments as 50% height and 90% width INSIDE a box that is 50% of the height of the total screen and 90% of the width of the total screen. Does anyone know how I can fix this?
I have tried setting my layout_height and width to match_parent for both my layouts and the result is either the same, or the app takes up the whole screen. I also made sure to use a theme that takes up the whole screen, and not a Dialog theme. I have also tried using a parent RelativeLayout with a percentRelativeLayout nested inside with layout_widthPercent and layout_heightPercent applied to my fragments and I get the same result.
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_widthPercent="90%"
app:layout_heightPercent="50%"
>
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.percent.PercentFrameLayout>
Here is what I want it to look like
Here is what it looks like now
It looks like your menu fragment's width takes about 30% of the total width of its dialog styled parent and the content takes about 70%. I would use a PercentRelativeLayout inside the PercentFrameLayout like the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.percent.PercentRelativeLayout
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:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:layout_heightPercent="50%"
app:layout_widthPercent="90%">
<fragment
android:id="#+id/menuFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_alignParentStart="true"
app:layout_widthPercent="30%"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/menuFragment" />
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentFrameLayout>
As for the double white background appearing behind your Welcome fragment, I cannot really tell why it is happening without looking at its layout file. You may want to remove the background in the layout for all the fragments you replace in the container FrameLayout
Things which i have changed to show button is removed the menu fragment with four buttons to mimic the image you want as the result, you can replace this four buttons with the menu fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<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:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
android:padding="4dp"
app:layout_heightPercent="50%"
app:layout_marginPercent="5%"
app:layout_widthPercent="90%">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_margin="4dp"
android:layout_weight="0.3"
android:background="#android:color/holo_purple"
android:contentDescription="this is where you can keep your buttons"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="First"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Second"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Third"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Forth"
android:textAllCaps="false" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_margin="4dp"
android:layout_weight="0.7"
android:background="#android:color/holo_green_dark"
android:contentDescription="this would be your frame container"></FrameLayout>
</LinearLayout>
</android.support.percent.PercentFrameLayout>
output
Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.
Try this layout:
<?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:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>
Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it
Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...
When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>
I want to have a button at the bottom of the listview.
If I use relativeLayout/FrameLayout, it aligns but listView goes down to very botton.
(Behind the button at the bottom)
FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</FrameLayout>
RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>
</RelativeLayout>
Above two codes only work like the first image. What I want is second image.
Can anybody help?
Thank you.
A FrameLayouts purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout example you set the ListViews height and width to MATCH_PARENT this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers the button).
Try something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
The layout_weight dictates how the extra space is to be used. The Button does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout, but if it is just these two items then I think a LinearLayout is simpler.
<?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"
android:background="#ffffff"
>
<ListView android:id="#+id/ListView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_gravity="center_horizontal">
</Button>
</FrameLayout>
</LinearLayout>
Here is the design you are looking for.
Try it.
I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content" for just the buttons' linear layout did. Here's my working layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/new_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New" />
<Button
android:id="#+id/suggest_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suggest" />
</LinearLayout>
</LinearLayout>
RelativeLayout will ignore its children android:layout_width or android:layout_height attributes, if the children have attributes that properly define their left and right or top and bottom values, respectively.
To achieve the result on the right image, showing the list above the button, your layout should look like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/button1"
android:layout_alignParentTop="true"/>
<Button
android:id="#android:id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/ok"/>
</RelativeLayout>
The key is to define android:layout_alignParentTop (defines top value) and android:layout_above (defines bottom value) in your RecyclerView. This way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed above the Button.
Also, make sure you look into android:layout_alignWithParentIfMissing, if you have a more complex layout and you still need to define these values.
I am using Xamarin Android, and my requirement is exactly the same as William T. Mallard, above, i.e. a ListView with 2 side-by-side buttons under it.
The solution is this answer didn't work in Xamarin Studio however - when I set the height of the ListView to "0dp", the ListView simply disappeared.
My working Xamarin Android code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/ListView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#+id/ButtonsLinearLayout" />
<LinearLayout
android:id="#id/ButtonsLinearLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I aligned ButtonsLinearLayout to the bottom of the screen, and set the ListView to be above ButtonsLinearLayout.
#jclova one more thing you can do is use layout-below=#+id/listviewid in relative layout
In your relative layout height of listview is match_parent which is fill_parent(for 2.1 and older) so best solution is if you want to use relative layout then first Declare your button then your list view, make list view position as above your button id, If you want button always at bottom then make it alignParentBottom..
Snippet is
<RelativeLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:id="#+id/rl1"><Button
android:layout_width="MATCH_PARENT"
android:layout_height="WRAP_CONTENT"
/><ListView
android:layout_width="MATCH_PARENT"
android:layout_height="0"
android:layout_above="#id/listview"/></RelativeLayout>
This prevents your list view taking whole place and make your button appear..
This will be the best and the most simple solution to the problem. Just add android:layout_above="#id/nameOfId" in the layout that you want to move above with respect to that 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">
<ListView
android:id="#+id/documentList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/verifyOtp" />
<com.sumeru.commons.helper.CustomButton
android:id="#+id/verifyOtp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/otp_verification" />
</RelativeLayout>