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.
Related
I have a linear layout which contains a set of child views (mixture of text, images and other layouts).
I want to grey out the linear layout and all the child views so they look disabled (similar to how a button works).
Is this possible to achieve? I know i can set a colour filter when painting on the canvas, is there something similar for layouts?
Another way is to call setEnabled() on each child (for example if you want to do some extra check on child before disabling), check out this answer:
https://stackoverflow.com/a/7069377/4840812
You can use Frame-layout
Using TEST ONE you can achieve above text view like disabled. You can set root layout clickable false for actually disable views inside layout.
TEST TWO is for understanding purpose. Like you need to manage order of view to show effect.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--THIS IS TEST ONE-->
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="150dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<!--THIS IS TEST TWO-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="300dp"
android:background="#DAD6D6D6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Data"
android:textColor="#color/colorAccent"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="400dp"
android:background="#000000"
android:gravity="center"
android:text="TEST DATA"
android:textColor="#android:color/white"
android:textSize="30dp" />
</FrameLayout>
To achieve your layout you can use the RelativeLayout. In RelativeLayout you can use the 2 different views or LinearLayout. In first layout you can add views according to your need, and In second layout you can set the alpha colorcode for disable the layout.
Please try below code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/demo_img_1"
android:layout_marginLeft="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/trans"/>
</RelativeLayout>
Here is output for code:
I want to create a vertical dynamic timeline that has the time it happened on the left, what happened on the right, a line in between, with a bubble in the line at each event. Times, events, and number of events will be dynamic.
What I was thinking here was possibly a RecyclerView over a static image of a vertical line. The list item would contain the time, a bubble image, and then the event view. Before writing this out I'm thinking I'm gonna have issues with lining up the bubble with the vertical line. Is there a better way to approach this or maybe someone can point out a way to guarantee the bubble will be over the center of my line on different screen densities and sizes?
I have been looking to implement a similar view in my app.
Personally, I'm not a fan of a static line. My thinking was along the lines of having a layout with 3 columns - for your example; one with the time, one with an image of the dot and vertical lines (or just the top line on the last item) and the third column with a cardview.
The layout I've posted is pretty rough but I just knocked it together in a few minutes and you should get the idea. It would need tweaking to make sure the vertical line on the icon goes to the edge of the layout (there would be a gap between them in my example)
<?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"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_weight="0.06">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_test" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:padding="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
With the result looking like so;
I did also find a library which looks okay - the icons could do with some work but I guess a lot of the legwork is already done.
I have also since just found out this layout type is officially (according to Matrial Design Guidelines) a stepper. Although I can't actually find any reference to them in the 'Develop' documentation it may assist you when searching for an appropriate library.
after editing Jonny Wright answer.I first created a card_item as this;
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="top">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center">
<View
android:id="#+id/first"
android:layout_gravity="center"
android:background="#color/material_green_500"
android:layout_width="2dp"
android:layout_height="wrap_content"/>
<ImageView
app:layout_anchor="#id/first"
app:layout_anchorGravity="top"
android:layout_gravity="top"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_test" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:background="#drawable/chat_bubble"
android:layout_marginRight="114dp"
android:layout_marginEnd="114dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doingHello there, how are you doing"
android:padding="12dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Then add two additional files in the drawable folder. a 9 patch image for the chat bubble background and a circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:innerRadius="0dp"
>
<size android:width="100dp"
android:height="100dp"/>
<solid android:color="#color/material_green_500"/>
</shape>
This is the results.
Example usage
Dont forget to add the bubble.png
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>
I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.
Running Ice-Cream Sandwich.
I have the following in my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/caption" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:id="#+id/itemized_list" />
</LinearLayout>
Next, I populate this list using an ArrayAdapter and the following layout for list items:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bulletpoint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/itemized_list_item_text" />
</LinearLayout>
The rendering is fine - the listview and its items are rendered to fit the screen. However, when I call listView.scrollBy, I am able to scroll way past where the content ends and essentially go into the "outer space" without any constraints. How can I prevent this?
I had the same problem, and my solution was to use listView.smoothScrollBy(distance, 0). It probably has a higher overhead, but it gets the job done.