I have a ConstraintLayout where I have three different ListView's.
The content of these ListViews is set dynamically. So I don't really know how many items they will get on runtime.
I want the layout as follows: The first ListView should start at the top of the screen and the second should be almost right under it. (just with some fix distance). The third one should stick to the bottom of the screen, if the first two ListViews aren't taking to much space already. If they do and so they would interfere with the third ListView on the bottom, it should put below the second ListView with some fix distance.
How could I achieve this? At the moment I implemented it so that the third ListView sticks to the bottom. But it will be overwritten from the second ListView if it has too many items, or the screen of the phone is too small.
Here my Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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_width="match_parent"
android:layout_height="match_parent"
android:background="#color/backgroundColor"
android:fitsSystemWindows="true"
tools:context=".activities.fragments.PreferenceCategoryFragment">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:textAppearance="#style/introductionTitle"
android:text="Allgemeines"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/divider1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/darkGray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="#id/title"/>
<ListView
android:id="#+id/settingsCategories"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
app:layout_constraintTop_toBottomOf="#id/divider1">
</ListView>
<TextView
android:id="#+id/title2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
android:textAppearance="#style/introductionTitle"
android:text="Sonstiges"
app:layout_constraintTop_toBottomOf="#id/settingsCategories"/>
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/darkGray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="#id/title2"/>
<ListView
android:id="#+id/settingsCategoriesLegal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
app:layout_constraintTop_toBottomOf="#id/divider2">
</ListView>
<ListView
android:id="#+id/logout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:divider="#null"
android:layout_marginTop="50dp"
app:layout_constraintBottom_toBottomOf="parent">
</ListView>
</android.support.constraint.ConstraintLayout>
For better understanding see this image of how it looks like on a big screen phone:
And this is how it looks like if the screen is too small:
Related
I have small database which populates data into a listview which uses other layout as provided below to show the data.
What happens is if the 1st field's text is more than two lines, the text starts hiding. So I thought i would make that listview's each row scrollable. Though it shows a scroll bar but nothing happens.
This is the layout which is used by listview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_height="75dp"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="75dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/desc_d"
android:layout_width="165dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:text="Description"
android:gravity="center"
android:textAppearance="#android:style/TextAppearance.Large"/>
<TextView
android:id="#+id/cate_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/desc_d"
android:text="others"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/date_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/cate_d"
android:text="16/11/2017"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/amt_d"
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/date_d"
android:text="100000"
android:textAppearance="#android:style/TextAppearance.Large" />
</RelativeLayout>
</ScrollView>
My MainActivity layout has a listview which is also scrollable and uses above layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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.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_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:keepScreenOn="false"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarAlwaysDrawVerticalTrack="false"
tools:context="apps.harry.expensedata.MainActivity">
<Button
android:id="#+id/add_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:onClick="addExpenseClick"
android:text="#string/button_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:onClick="viewClick"
android:text="#string/button_2"
app:layout_constraintStart_toEndOf="#+id/add_expense_btn"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="406dp"
android:layout_marginTop="84dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp">
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="248dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Here's the screen shot of the APP
As you can see there's a scroll bar available for each row in that layout, but nothing happens when I scroll.Please suggest me how this could be achieved.
This is not a solution suggestion for your scrolling problem, but due to user experience you should consider to not habe scrollable list items inside a scrollable list.
See Material Guidelines for this. Here is a little excerpt.
List tiles may contain up to three lines of text, and text length may vary between tiles in the same list. To display more than three lines of text, use a card.
Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.
Specifications:
The majority of space on a list tile should be dedicated to the primary action
Place the most distinguishing content towards the left of the tile
In tiles with multi-line content, place the most distinguishing content in the first line
Place supplemental actions on the right side
Try using maxLines and minLines as attributes for the TextView to accommodate all the data.
Make scrollView Height="wrap_content" instead of fixed size. maybe useful
Google defined in their guidelines do not use scrollview inside of scrollview and it is more then simply guidelines it doesnt work properly. and you see that case. Tbe solution is set to your listitem height as wrap_content and the best practices is as was mentioned above do not use listitems with more than 2-3 lines of text. take a look into materisl design guide to see the dimensions of list items
I would suggest you to can change your custom list item height to wrap_content and then you don't need scrolling.
<?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:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/decription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="decription" />
<TextView
android:id="#+id/whatFor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="whatFor" />
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="date" />
<TextView
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="amount" />
</LinearLayout>
Your output will be like below image.
I hope your issue will be resolved and if you still have any query then please ask.
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 was able to this somehow using RecyclerView. When I create a view for a specific item in my RecyclerView, the recyclerview item layout is matched to parent.
I am wondering if this is also possible using ScrollView?
Here's what I did so far:
ScrollView xml:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollview_homescreen"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
Content:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageview_menu_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<ImageView
android:id="#+id/imageview_menu_title_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/starwars_webtoon_home_1_logo"
android:scaleType="fitXY"
android:adjustViewBounds="true" />
<Button
android:id="#+id/button_start_reading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/button_menu"
android:layout_marginBottom="18dp"
android:text="#string/button_start_reading"
android:gravity="start"
android:drawableRight="#drawable/ic_keyboard_arrow_right_black_24dp"
android:drawableEnd="#drawable/ic_keyboard_arrow_right_black_24dp"
android:background="#drawable/button_bg"
android:textSize="18sp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp" />
<Button
android:id="#id/button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="28dp"
android:text="#string/button_menu"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:drawableLeft="#drawable/ic_menu_white_24dp"
android:drawableStart="#drawable/ic_menu_white_24dp"
android:background="?android:attr/selectableItemBackground" />
</RelativeLayout>
So what am I trying to do? Basically this is for comic listing. The first item should be the homescreen, a couple of button here and there and the entire application logo. The next item should show the listings (I have 40 items of the same width and height) and a footer.
I need my homescreen to match the parent which is the screen. So when I scroll the topmost part, the first item (the first view, which is the homescreen) fills the entire devices screen.
I was able to to do this on RecyclerView and looks nice. I have encountered some of problems that plague me which I have to fix extensively to the point that I am hacking through the system and I realize RecyclerView is not really the best layout for this kind of case. I am currently deciding whether to switch to ScrollView and dynamically/statically add the comic items. But, the homescreen, which is the first View is not matching the screen device.
I would just like to ask if this possible at all to do in ScrollView?
Thanks!
Use weight attribute:
<LinearLayout
android:id="#+id/linearlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/listitem_comic_menu"/>
<LinearLayout
android:id="#+id/linearlayout_comic_listings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true">
<ListView
android:id="#+id/attackslist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff" />
</HorizontalScrollView>
I put a ListView inside an HorizontalScrollView because its content is way too long to fit in the screen, but what i get is that the list looks like this (the background color is there to show where the list's childs stop)
while i want all the childs equally spaced in there until the end of the list, which i get if the ListView is not inside a scrollbar
My custom layout I use in the adapter looks like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent">
<TextView
android:id="#+id/Moves"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:layout_weight="1"
android:gravity="center"
android:text="Moves"
android:textSize="14dp" />
<TextView
android:id="#+id/Hitboxactive"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:layout_weight="1"
android:gravity="center"
android:text="Hitbox Active"
android:textSize="14dp" />
</LinearLayout>
How should I handle this situation? Can I change the values during runtime?
Should I use a different View?
Thanks
I have a problem in edit text its not getting expanded as I type.
I wanted it to show a maximum of 4 lines but when I click the exittext to type something, its shrinking, not even completely showing a single line.
the code used is.
<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"
tools:context=".MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Comments"
android:id="#+id/textView2"
android:layout_gravity="center_horizontal"
android:layout_weight="0.28"
android:background="#000000"
android:maxLines="1"
android:paddingEnd="20dp"
android:textColor="#ffffff" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="10">
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="11">
<ListView
android:id="#+id/list2"
android:drawSelectorOnTop="false"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:footerDividersEnabled="true">
</ListView>
</FrameLayout>
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/linearLayout">
<EditText
android:id="#+id/enter_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:layout_weight="1"
android:inputType="textMultiLine"
android:maxLines="4"
android:minLines="1"
android:textColor="#android:color/black"
/>
<Button
android:id="#+id/send_button"
android:layout_width="45dp"
android:layout_height="30dp"
android:onClick="sendMessage"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
screen shot of whats happening..
thank you..
You have two framelayouts nested in a linearlayout and they are weighted. The first nested framelayout has a weight of 11
compared to 1. So the edittext will not be able to expand beyond it's the weighted width for the framelayout.
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="10">
The nested frames.
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="11">
<FrameLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
The total parent layout has been broken in 12 parts. The top frame has 11, the bottom 1. 1 is not much. There is not enough room to display all the text, plus you have a vertical scrollbar. The text will be added and be scrolling as you type. It would be impossible to read as it scrolls in such a short space.
I would even suggest not setting the weight for the bottom frame (it defaults to 0) and then try setting the top one to say 3? and increase it to see what works for you. Please try this, before commenting again.