I am developing an application and I need an explanation on how can I realize a listview made of custom items like this:
How can I organize things like that? And what should I use?
(Sorry for the poor quality of the image)
A basic design for ListView item could be something like this
<ListView>
<!-- container for the basic design -->
<LinearLayout
android:orientation="horizontal">
<!-- Left side column -->
<LinearLayout
android:orientation="vertical">
<ImageView />
<TextView />
</LinearLayout>
<!-- Right side column -->
<LinearLayout
android:orientation="vertical">
<TextView />
<!-- add Text and 3 images in this LinearLayout -->
<LinearLayout
android:orientation="horizontal" />
<TextView />
</LinearLayout>
</LinearLayout>
</ListView>
Then add your own custom adaptor to add the item in the ListView. Here is a good tutorial answer on SO: https://stackoverflow.com/a/6860788/2777098
You can use LinearLayout weigth.But its not recommended for performance.There are other ways.Like grid .
Your Custom list item shoul be like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.7"
android:background="#color/Black">
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1.3"
android:weightSum="2"
android:background="#color/Red">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1.6">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.4"
android:background="#color/Aqua">
</LinearLayout>
</LinearLayout>
Related
I have a ListView which I am populating using adapter arrays. I would like to add a search bar there, but whenever I add a search bar it repeats it, so I ended up making 2 layout files: one for the search-bar and the other one for the item-list.
ListView in my Android:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="8dp"
android:paddingRight="16dp">
<ImageView
android:id="#+id/icon"
android:layout_width="40dp"
android:layout_height="70dp"
android:background="#color/bckground"
android:src="#drawable/placeholder" /> <!-- ree image-->
<LinearLayout
android:id="#+id/textContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon"
android:orientation="vertical"
android:paddingTop="16dp">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
tools:text="name" />
<TextView
android:id="#+id/surname"
android:layout_width="match_parent"
tools:text="surname" />
</LinearLayout>
ListView layout print-screen:
Search-bar file layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/searchtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:text="Search.." />
<Button
android:id="#+id/sumbit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Search" />
</LinearLayout>
Search-bar layout print-screen:
I would like to have the search-bar and item list in one layout.
How can I combine these two layout files together?
Add your listview in layout file which contains search bar.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/searchtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="text"
android:text="Search.." />
<Button
android:id="#+id/sumbit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Search" />
<!--Add your list view here-->
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
I would like to have the search-bar and item list in one layout. How can I combine these two layout files together?
You can't. These are conceptually two different layouts. One describes each item in the list, which is provided by the ListView adapter, and the other describes the top level view that contains the ListView and any other views that you want as part of that layout.
I set the ScrollView in my LinearLayout. I want a TextView to scroll. I tried to use ScrollView in xml like this. But, it's not working.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<!-- first scrollView -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_corner_blue"
android:gravity="center"
android:text="#string/personalInformation"
android:textColor="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/birthDate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" TestData" />
</LinearLayout>
<!-- second scrollView -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textOphthalmoscopy"
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="standard instrth various settings that allow focusing and adjustment of the light source to accommodate the viewer and to evaluate various features of the fundus." />
</ScrollView>
</LinearLayout>
</ScrollView>
</LinearLayout>
I tried another way like this, but it's still not working too.
android:maxLines = "AN_INTEGER"
android:scrollbars = "vertical"
I used
myTextView.setMovementMethod(new ScrollingMovementMethod());
So how to let TextView to scroll? If it is the second ScrollView.
You might consider using a NestedScrollView along with a ListView for showing the scrollable TextView.
The ListView will have a fixed size so that it'll not take the total height of the items inside.
So the layout may look like this.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<!-- first scrollView -->
<NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_corner_blue"
android:gravity="center"
android:text="#string/personalInformation"
android:textColor="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/birthDate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" TestData" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
<!--set a fixed height-->
android:layout_height="80dp"
.. Other attributes
</ListView>
</LinearLayout>
</NestedScrollView>
</LinearLayout>
And the list item of the ListView may contain the TextView you want to scroll. Set the height of the TextView to wrap_content.
<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:orientation="vertical"
android:padding="8dp"
tools:context=".SubpagesLayout.ReportResult">
<TextView
android:id="#+id/textOphthalmoscopy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="standard instrth various settings that allow focusing and adjustment of the light source to accommodate the viewer and to evaluate various features of the fundus." />
</LinearLayout>
Now your ListView will have a single item and this will scroll with the default behaviour of list.
The whole layout will be scrolled via NestedScrollView.
Hope that helps!
Having a scrollView inside another scrollView is not a good prictice but ant a you check below links it may fix you problem.
Solution 1
Solution 2
I need to do some User Interface design in android application,most probably for a front page only.
For an example: I need to do like this below image.
I tried like placing an image in layout and coloring the action, but I didn't get the perfect effect.If I get some samples or Github post or some other suggestion that will be helpful to me.
You can try this library https://github.com/kmshack/Android-ParallaxHeaderViewPager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fr.castorflex.android.googleplusprofilepageapp.ParallaxImageView ... />
<LinearLayout ... >
<TextView ... />
<TextView ... />
<TextView ... />
</LinearLayout>
<!-- we add one more container to facilitate the add/remove view -->
<FrameLayout android:id="#+id/tabs_container"
android:layout_height="48dp"
android:layout_width="match_parent"
android:layout_below="#+id/informations_container">
<HorizontalScrollView
android:id="#+id/horizontalscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- tabs here -->
</LinearLayout>
</HorizontalScrollView>
</FrameLayout>
<ImageView ... />
</RelativeLayout>
Check this for more info
I have a Listview where each listview item looks like this!
The ListViewItem is a RelativeLayout. Now I am having problem in creating the two split-screen buttons. Currently I'm doing it like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:layout_below="#+id/ReviewText">
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
<RelativeLayout>
This is working perfectly fine, but the android dev documentation here says that
Furthermore, nesting several instances of LinearLayout that use the
layout_weight parameter can be especially expensive as each child
needs to be measured twice. This is particularly important when the
layout is inflated repeatedly, such as when used in a ListView or
GridView.
Can I improve my code for performance. If yes, How? Is there any other way to have two buttons split evenly without using LinearLayout?
In order to minimize layout nesting, so to optimize performances, I'd write a layout (which does take advantage of the layout's relativity) like this one:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:id="#+id/dummy"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible"
/>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<Button
android:id="#+id/btnRite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<RelativeLayout>
I put a dummy View which is aligned to the center, then 2 buttons which I align to the left and to the right side of it.
For a simple layout like your's LinearLayout's are perfect choice. The only thing to be wary about is nesting layout weight's inside a view whose parent already has a layout-weight assigned. This is perfectly ok:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
While this is not:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" > <!-- nesting this way is bad for performance -->
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- this is ok -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<place top item layout here>
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true"
android:layout_weight="1"
>
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Hope , The performance can be improved if you follow the listed points
First thins don't use much XML code when you need something dynamically
instead of creating the 2 relative layouts in XML , create a class where it extends Linear layout/Relative layout
add the views which you want to show in the list item to the above layout
Measure the height and width dynamical with in the same class
And make sure the layout is parametrized where you can pass the content dynamically
Finally , you can inflate the created view , Using getview method of an adapter**
Refer the following link
Dynamic listview content loader
This is a layout I'm having problems with (this is for ListActivity):
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
<Button
android:id="#+id/negative_button"
style="#style/Button"
android_alignParentBottom="true"
android:layout_below="#android:id/empty"
android:layout_weight="1" />
</RelativeLayout>
What happens right now is the list is below header TextView ("path") as it should be, the button is at the bottom also as it should be, but the ListView is not aligned between the header (textview) and footer (button). Instead, the button is simply slapped on top of listview. How can I fix that?
You need to define the footer and header before the list, try something like this:
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<!-- to see the button, you must to declare its width/height here
and not (as I think you did) in the style.xml -->
<Button
android:id="#+id/negative_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Button"
android:layout_alignParentBottom="true" />
<!-- also layout_weight doesnot change anything in RelativeLayout -->
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path"
android:layout_above="#id/negative_button" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</RelativeLayout>
The TextView "empty" should not be below the TextView "empty".
If the Button must be at the bottom of the screen you can use
android:layout_alignParentBottom="true"
For the Button
Otherwise you can use this layout :
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</LinearLayout>
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/container" />
</RelativeLayout>
Or ever add the Button as a footer of you Listview :
mListView.addFooterView(mButton);
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
The only things that you used are the ListView, the first TextView as a "top bar" and the Button as a "bottom bar", right? If it is the case, why did you keep the empty TextView?
Try to remove it and try this layout:
<?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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<!-- work also with android:layout_height="0dip" -->
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Saw on these questions, it might be help you:
1. Layout for ListView at top and Buttons in Bottom?
2. Android Layout with ListView between a "top bar" and "bottom bar"
3. Add a button in bottom of listview when the listview is empty (using ListActivity)
Hope this will be helpful and you'll have the expected result.