How to Display list-view items in horizontal Android - android

I am working on list view..list view items display in vertical.but I am display items in horizontal but not show the items in horizontal.
and simple_list_item_1 is not working..I am changing gravity left or right but items show vertically..here is my code
here is content_main
<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"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Searach Now"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/editText" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/headingText">
</ListView>
</LinearLayout>
</RelativeLayout>
here is simple_list_item. XML
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"></TextView>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
></TextView>
</Relativelayout>

I know you are a beginner, recyclerView offers LayoutManagers for this purpose but as you are new it is good to know about listview as it is the base concept and simpler to setup than recyclerview.
Use Horizontal scrolling view and embed your list view in that. What this does is instead of positioning your list items in vertical it will do so in horizontal way with scroll option.

Must use way: As per Android Documentation RecyclerView is the BEST way to organize the items in listview and to be displayed horizontally
Advantages:
Since by using Recyclerview Adapter, ViewHolder pattern is
automatically implemented
Animation is easy to perform
Many more features
Sample:
survivingwithandroid.com
Just add the below block to make the ListView to horizontal from vertical
Code-snippet
LinearLayoutManager layoutManager= new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL, false);
mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
mRecyclerView.setLayoutManager(layoutManager);
Reference:Horizontal ListView in Android?
Another way:
<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=".MainActivity">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:background="#f00"
android:padding="10dp"
android:text="Button 1"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:background="#0f0"
android:padding="10dp"
android:text="Button 2"
android:textColor="#fff"
android:textSize="20sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dp"
android:background="#00f"
android:padding="10dp"
android:text="Button 3"
android:textColor="#fff"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
Result code:
Problem with HorizontalScrollView is it shows horizontal bar and it is not recommended to use.
I hope it will help you.

Related

Placing a search bar on an item list layout

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.

Layout not showing under listview within ScrollView

I have a layout with 1 layout inside of it which is all inside a ScrollView. I am trying to get the whole screen to scroll with the content inside of the listview then the textviews underneath that listview. I get the whole listview to populate and show correctly but the bottom layout with all the textviews do not show up.
<?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">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_below="#id/app_bar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/bannerReceiptLogo"
android:layout_width="170dp"
android:layout_height="75dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:background="#drawable/img_logo_receipt_cub" />
<TextView
android:id="#+id/bannerAddressHeader"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_below="#id/bannerReceiptLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/storeHeader"
android:textAlignment="center"
android:textSize="18sp" />
<ListView
android:id="#+id/fullEReceiptListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bannerAddressHeader"
android:layout_marginTop="10dp"
android:scrollbars="none"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/fullEReceiptListView"
android:layout_weight="1">
<View
android:id="#+id/totalDivider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#color/colorGrey"
/>
<TextView
android:id="#+id/txtSubTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SUBTOTAL"
android:textSize="20sp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtSubTotalFinal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$13.58"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtTaxText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAX"
android:textSize="20sp"
android:layout_below="#+id/txtSubTotal"/>
<TextView
android:id="#+id/txtTaxTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.80"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtSubTotalFinal"/>
<TextView
android:id="#+id/txtCompleteTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TOTAL"
android:textSize="20sp"
android:layout_below="#+id/txtTaxText"/>
<TextView
android:id="#+id/txtCompleteTotalNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$14.38"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtTaxText"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Do not put ListView inside ScrollView. ListView is a widget that is already scrollable. See NestedScrollView from Support library.
If you set the ListView height to wrap_content the height will have the height to comport all items. That way, the below content will be pushed away.
However Android don't have a great support for nested scrolls, it's considered a bad practice. This way, your ListView will not have the native scroll feature, and will need some hack to work as expected.
A better workaround is use the NestedScrollView, so you scroll may work (maybe you will need put your ListView inside another parent to control the height)
change ListView's layout_height to wrap_content

ListView and ScrollView together does not work

I have ListView and ScrollView in one activity. Now, the problem is that ListView and ScollView does not work together. I have many controls in activity so I need to use ListView.
If ScrollView is there then ListView's height decreased as you can see in image.
Please help me to prevent this problem.
My Code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp" >
<TextView
android:id="#+id/tvRQPoint"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textColor="#color/green"
android:textSize="32sp" />
<TextView
android:id="#+id/tvRQQText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/questiontext"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/tvRQQuestion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ImageView
android:id="#+id/imgRQImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:contentDescription="#string/imgdesc" />
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />
<TextView
android:id="#+id/tvRQAnswer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" />
<Button
android:id="#+id/btnRQNext"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="#string/next" >
</Button>
<Button
android:id="#+id/btnRQEndTest"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/blue_bg"
android:text="#string/endtest"
android:textColor="#color/white" >
</Button>
</LinearLayout>
</ScrollView>
Never use a ListView inside a ScrollView. ListView itself already has a built-in scroll so you should use it, as the approach you've used goes against the Android's design.
If you can't remove the ScrollView, you probably should consider simplifying your design or redesign it in another way.
One thing you can do is use only the listView and add the above elements as a header view, and the below elements as a footer view.
List view has properties:
addHeaderView(View view);
addFooterView(View view)
Which you can set before setting the list's adapter
Hi as #nKn said its not good to use ListView inside ScrollView and it also gives bad performance if worked, ListView has its own scrolling property you do not need to use scrollview in it, create seperate layout for listview and other stuff and align layouts the way u want.It worked very well for me.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<RelativeLayout
android:id="#+id/listContainingLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttonsLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
</ListView>
</RelativeLayout>
<LinearLayout
android:id="#+id/buttonsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button1" />
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="#drawable/button2" />
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button3" />
</LinearLayout>
I suggest to align your buttons according to priority if you want your buttons fixed on screen then above format can be used but if u want buttons to come after list then align buttonsLayout belowlistContainingLayout
Hope it helps,Cheers!...
ListView already has scrolling feature. That's why is make problem inside ScrollView. But try give hardcoded width to your ListView. May this solve problem
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />

ScrollView with LinearLayout inside does not work

I have a scrollView with two inside LinearLayout but it does not work, the listView does not show all items but only a few. How can I do?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/welcomeView"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100" >
<ImageView
android:id="#+id/image_User_welcome"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="70"
android:src="#drawable/user" />
<TextView
android:id="#+id/private_area_welcome"
style="#style/CoopLabel"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="30"
android:text="#string/private_area_welcome" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/welcomeView">
<TextView
android:id="#+id/private_area_lists"
style="#style/CoopLabel"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/linearLayout1"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:text="#string/private_area_lists" />
<ListView
android:id="#+id/privareaList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:textColor="#000000" >
</ListView>
<ImageButton
android:id="#+id/logoutBtn"
android:layout_width="160dp"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:padding="0dp"
android:scaleType="centerCrop"
android:src="#drawable/tasto_logout"
/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
It is not recommended to use scrollables containing other scrollables - your layout contains ListView inside Scrollview.
You can design your layout as a ListView - you can add header and footer views(welcomeView, logoutBtn, etc..) to the top and bottom of listview - see methods ListView.addHeaderView and addFooterView) - scrolling will be managed by ListView,
or you can replace listview in your original layout with simple LinearLayout and populate it manually row by row(do not forget to assign click listeners to rows etc..) - scrolling will be managed by ScrollView.
To find more information about this problem, try to google "android listview inside scrollview", i am sure it will help you. :-)

Android, Stop overlapping listview items by the page footer

In my Java android application I use a listview to display information loading from the SQLite DB And a page footer also there in this page.
The problem is When there are more items loaded to the listview and need to scroll, since footer appears in the bottom of the page, the footer covers the the last item in the listview.
Simply I want to stop overlapping listview items by the footer.
Can any one help me achieve this please. Thanks inadvance.
Edits
<RelativeLayout android:id="#+id/relativeLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg">
</ListView>
<LinearLayout android:id="#+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" android:layout_alignParentBottom="true" android:background="#android:color/darker_gray" >
<TextView android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" >
</TextView>
</LinearLayout>
</RelativeLayout>
Based on your requirement(And as you haven't posted XML layout here that you have tried so far), i assume and can suggest the following:
give bottom margin to your listview: android:layout_marginBottom="60dip"
If you are using RelativeLayout then just give listview as android:layout_above="#+id/footer"
I suggest to you go with 2nd option.
Update:
Based on the XML you have posted, try this correct XML layout:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/companylistView"
android:layout_above="#+id/textView1">
</ListView>
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true">
</TextView>
</RelativeLayout>
You should use list footer like this:
View footerView = ((LayoutInflater)getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE)).inflate(R.layout.listview_footer, null, false);
list.addFooterView(footerView,null,false);
try this:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" >
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/darker_gray" >
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>

Categories

Resources