So, I have a header, and then a CardView that should fill the screen until the footer. Problem is, it fills all the screen, and the footer goes "under" the screen, as you can see in the images.
I want to keep the footer (button + the two images) always at the bottom and the cardview should always fill the rest of the screen. There is a scrollview in the cardview that will allow text to be read in the cardview.
Anyway, here is the XML code:
<RelativeLayout
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="#color/grey_10">
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:layout_marginBottom="#dimen/spacing_mlarge"
android:orientation="vertical"
android:padding="#dimen/spacing_mlarge">
<TextView
android:id="#+id/qstView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginBottom="20dp"
android:text="Insert question text here"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="#dimen/spacing_middle"
android:layout_marginEnd="#dimen/spacing_middle"
android:layout_marginLeft="#dimen/spacing_middle"
android:layout_marginRight="#dimen/spacing_middle"
android:layout_marginStart="#dimen/spacing_middle"
android:layout_marginTop="#dimen/spacing_middle"
android:visibility="visible"
app:cardCornerRadius="6dp"
app:cardElevation="5dp">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/checkbox_full_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v7.widget.CardView>
</LinearLayout>
<Button
android:id="#+id/add_field_button"
android:layout_width="match_parent"
android:layout_height="55dp"
android:onClick="onAddAnswer"
android:layout_gravity="bottom"
android:layout_marginLeft="-4dp"
android:layout_marginRight="-4dp"
android:background="#drawable/btn_rounded_primary"
android:text="Suivant"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textStyle="bold" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="#dimen/spacing_mlarge"
android:layout_gravity="center_horizontal"
android:gravity="center">
<ImageView
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="#dimen/spacing_mlarge"
android:layout_marginTop="#dimen/spacing_large"
android:src="#drawable/ineedhelp"/>
<View
android:layout_width="#dimen/spacing_large"
android:layout_height="0dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="#dimen/spacing_mlarge"
android:layout_marginTop="#dimen/spacing_large"
android:src="#drawable/mbtouch_dark"/>
</LinearLayout>
<View
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/spacing_middle"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</RelativeLayout>
This is what I have at the moment:
And this is what I would like to have (here I forced dimensions, but since not all devices are the same, the space will not be used optimally).
Thanks in advance!
Try to arrange your view like the manner below (For CardView and bottom layout, rest things will stay as they were)..
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
....
...>
<!-- Since, weight is 1 it will occupy whole space subtracting height of bottom -->
<CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
.... />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
....>
<!-- Put your bottom widgets over here -->
</LinearLayout>
</LinearLayout>
Related
My layout is like this
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/searchKey"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="xx" />
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/search_results"
android:textSize="#dimen/text_font_size"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lastChar_btn" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nextChar_btn" />
</LinearLayout>
</LinearLayout>
However, when there are little or no text, the buttons are pulled up, when there are too many text in search_results TextView, the buttons won't show up because scrollview takes the space all the way to the bottom. Any suggestion to always keep the buttons at the bottom and always visible?
First of all you have to set the ScrollView's height to 0dp.
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:id="#+id/search_results"
android:textSize="#dimen/text_font_size"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
You have to do this because the weight param is going to control the size of the view depending on how much space is available. If you set it to wrap content, it will take how much space it needs to wrap everything within.
Then you need to remove your LinearLayout's weight param:
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:id="#+id/LL1"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last_Char" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next_char" />
</LinearLayout>
And the reason for doing that is just the opposite of the previous explanation: in this case the wrap content is going to take the space necessary to always display the buttons within.
Here is some sample code I put together for you. You basically need to take out the linear layout you have wrapping you xml layout and use a relative layout instead. Once you do that you can add ids to the linear layout with the buttons and then have the edit text align to the parent top. Then you can put the scrollview below the edittext and then put the scrollview above to the linear layout containing the buttons. This should work!
<?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"
tools:context="com.example.thegamefan93.loginregister.LoginActivity">
<EditText
android:id="#+id/searchKey"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:hint="xx" />
<ScrollView
android:layout_weight="1"
android:fillViewport="true"
android:layout_below="#id/searchKey"
android:layout_width="match_parent"
android:layout_above="#+id/LL1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/search_results"
android:textSize="20sp"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center|bottom"
android:layout_weight="1"
android:id="#+id/LL1"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/lastCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last_Char" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next_char" />
</LinearLayout>
</RelativeLayout>
Try this,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/searchKey"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="xx" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linear"
android:layout_below="#+id/searchKey"
android:layout_weight="1"
android:fillViewport="true">
<TextView
android:id="#+id/search_results"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textSize="#dimen/text_font_size" />
</ScrollView>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="#+id/lastCharacterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/lastChar_btn" />
<Button
android:id="#+id/nextCharacterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/nextChar_btn" />
</LinearLayout>
</RelativeLayout>
You can see the code below that belongs layout design.
<LinearLayout
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="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/profilePic2"
android:layout_width="#dimen/feed_item_profile_pic"
android:layout_height="#dimen/feed_item_profile_pic"
android:scaleType="fitCenter" >
</ImageView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/feed_item_profile_info_padd" >
<TextView
android:id="#+id/name2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/feed_item_profile_name"
android:textStyle="bold" />
<TextView
android:id="#+id/timestamp2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/timestamp"
android:textSize="#dimen/feed_item_timestamp" />
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textCategory2"
android:layout_weight="1"
android:textStyle="normal|bold"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/content2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="#dimen/feed_item_status_pad_left_right"
android:paddingRight="#dimen/feed_item_status_pad_left_right"
android:paddingTop="#dimen/feed_item_status_pad_top"
android:layout_weight="1"/>
<ImageView
android:id="#+id/contentImage2"
android:layout_width="match_parent"
android:background="#color/white"
android:scaleType="fitCenter"
android:visibility="visible"
android:cropToPadding="false"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:srcCompat="#drawable/bg_parent_rounded_corner"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:isScrollContainer="false"
android:keepScreenOn="false"
android:measureWithLargestChild="false"
android:verticalScrollbarPosition="defaultPosition"
android:paddingBottom="10dp">
<TextView
android:text="#string/yorumlar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_weight="1"/>
<ListView
android:layout_width="match_parent"
android:id="#+id/comList"
android:layout_height="wrap_content"
android:layout_centerHorizontal="false"
android:clipChildren="false"
android:headerDividersEnabled="false"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
We can see details of the post showing up top of the screen, comments are at the bottom of the screen. Comments doesnt show up entirely despite of scrollview included listview and i have “layout_height:wrap_content”. First comment showing up but else doesnt show up with scroll.
Thanks for the answers
Screenshot
You have to change following things to display the list:
change the height of root linear layout from wrap content to match parent.
android:layout_height="match_parent"
do the same thing to scroll view
android:layout_height="match_parent"
3 now change the height of listview, I have given android:layout_height="500dp" this. You can adjust this with your requirement.
NOTE: List view will not work inside scrollview without giving static height. So you have to give height as 400..500dp or you can remove scrollview.
I have problem with my layout element. They are being displayed in mobile phone but neither in Genymotion or Android Emulator.
Two Buttons are not being displayed at the bottom.
Here is my code.
<FrameLayout 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"
tools:context="vitrine.ndex.com.vitrine.fragments.FavouriteFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:layout_alignParentBottom="true">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/cartButton"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/historyButton"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout3">
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/header_panel_layout" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout3"
android:layout_above="#+id/linearLayout2">
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/favouriteShopListView"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
You need couple of changes in Layout.
Wrap the whole RelativeLayout inside ScrollView
Take out ListView out of RelativeLayout and put it in a Layout which is outside ScrollView
I can't get a view area to scroll. I have tried many variations of tags but without success. I need the light yellow (#FFFF99) area to be very large and that the user can move it around within the view area but the buttons remain visible. Here is my XML code.
<?xml version="1.0" encoding="utf-8"?><!--<?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">-->
<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="#FFCCCCCC"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:id="#+id/play_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="#string/dice6"
android:src="#drawable/play" />
<ImageButton
android:id="#+id/exit_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="#string/exit"
android:src="#drawable/exit" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Commentary"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
adroid:scrollbarAlwaysDrawVerticalTrack="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<view
android:id="#+id/drawing"
class="com.summit.DrawView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.01"
android:background="#FFFF99"
android:orientation="vertical" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Its because inside your scrollview the width of linear layout is wrap content. And the views width is match parent. These two contradict each other.
I am using a webview to load html data.
I want to place two buttons on the bottom for some functionality.
I have put teh webview and the bottom layout in a frame layout.
Web view shows html data only when i give it some specific height e.g 500dp.
Also the bottom layout also scrolls along with webview.
Please help how i can do this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="10dp" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/newsHeading"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp"
android:text="Heading"
android:textColor="#000000"
android:textSize="18sp" />
<WebView
android:id="#+id/webviewNews"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back1"
android:padding="20dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/share11"
android:padding="20dp" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
I had the same problem and I have fixed it by changing the LinearLayout by a RelativeLayout and setting all the "parent aligments" to the WebView, but this fill the screen.
For your layout, try align your button's LinearLayout to the parent's bottom, and replace the alignParentBottom of the WebView by a layout_above anchored to it. I have tested it and works fine.
Here is the code, try it:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_above="#+id/linlyt_buttons"/>
<LinearLayout
android:id="#+id/linlyt_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/rellyt_imagebuttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp"
android:contentDescription="Back/Cancel"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_menu_share"
android:padding="20dp"
android:contentDescription="Share"/>
</RelativeLayout>
</RelativeLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
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:layout_marginTop="5dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
</LinearLayout>