Make an ExpandableListView and Textview scroll together - android

I have this code xml layout that I am trying to implement in a round android wear watch. I want the TextView above the ExpandableListView to scroll with it rather than staying on the top and taking up space.
I tried using ScrollView with it rather than RelativeLayout (ScrollView in RelativeLayout and vice versa as well) but what that does is that the LinearLayout requires a set height for the ExpandableListView to show the list which is not possible as the list dynamically changes (so it can have a random number of group members) and if I use "wrap_content" it only shows one group at a time. Each group has 4 child members as well.
Can someone tell me how to make this layout suitable for me so that the TextView and the ExpandableListAdapter scroll together without having a set height for the ExpandableListAdapter?
round_activity_card_view_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jawad.wifihotspotfinder.CardViewLayout"
tools:deviceIds="wear_round"
android:background="#FF3C00"
android:smoothScrollbar="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cardViewHeader"
android:textSize="17sp"
android:textColor="#color/white"
android:fontFamily="sans-serif"
android:paddingLeft="20dp"
android:paddingRight="5dp"/>
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/round_expandableListView"
android:background="#FF3C00"
android:choiceMode="multipleChoice"
android:groupIndicator="#null"
android:longClickable="true"/>
</LinearLayout>
</ScrollView>

Look into addHeaderView(View v). Create your TextView programmatically or inflate from XML and then add it to your ExpandableListView using that method.
The TextView should then scroll with your ExpandableListView.

Thanks for showing me what to do, Alex. I had to come up with some way to do that which took ages but finally got it right. Thanks for the instructions which really helped me a lot! The code is used is given below:
LinearLayout mLayout = (LinearLayout) getLayoutInflater().inflate(R.layout.expandable_header, expListView, false);
mLayout.setLayoutParams(new AbsListView.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
expListView.addHeaderView(mLayout);
Also the changed xml files:
expandable_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FF3C00">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/expCardViewHeader"
android:textSize="17sp"
android:textColor="#color/white"
android:fontFamily="sans-serif"
android:paddingLeft="20dp"
android:paddingRight="5dp"
android:paddingBottom="2dp"
android:background="#FF3C00"
android:text="#string/no_results"/>
</LinearLayout>
round_activity_card_view_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jawad.wifihotspotfinder.CardViewLayout"
tools:deviceIds="wear_round"
android:background="#FF3C00"
android:smoothScrollbar="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FF3C00"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">
<ExpandableListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/round_expandableListView"
android:background="#FF3C00"
android:choiceMode="multipleChoice"
android:groupIndicator="#null"
android:longClickable="true"
android:smoothScrollbar="true" />
</LinearLayout>
</RelativeLayout>

Related

ListView header - different margin

I am creating a layout with a listview and some other views. I want complete layout to scroll with list so I am adding the other views as header. The problem is that my listview has some margin which is applied to the header as well.
What should I change so that the header looks something like this-
ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:scrollbars="none"
android:id="#+id/lvProfileAddresses"
android:layout_gravity="center_horizontal"
android:divider="#color/transparent"
android:dividerHeight="10dp"
android:paddingBottom="10dp"
android:clipToPadding="false"
android:cacheColorHint="#color/background_color"
android:fadingEdgeLength="3dp"
/>
</LinearLayout>
Header
<?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:background="#color/transparent"
>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:text="My Addresses"
android:textSize="20sp"
android:padding="10dp"
android:textColor="#color/black"
/>
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add New Address"
android:drawableRight="#drawable/small_list_arrow"
android:layout_margin="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#drawable/linearlayout_shadow"/>
</LinearLayout>
How to make the ListView's header have a different margin?
I think It would be better to not to add Header in a ListView, and keep a separate Header. May be you can use include for that.
Something like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color">
<include
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
layout="#layout/header" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:scrollbars="none"
android:id="#+id/lvProfileAddresses"
android:layout_gravity="center_horizontal"
android:divider="#color/transparent"
android:dividerHeight="10dp"
android:paddingBottom="10dp"
android:clipToPadding="false"
android:cacheColorHint="#color/background_color"
android:fadingEdgeLength="3dp" />
</LinearLayout>
You just need that once in ListView at top. So I think this would be a better approach. Hope it helps.
EDIT:
As you need to keep header inside ListView for scrolling it along with ListView items, you can probably go with other way:
Remove the margin properties from entire ListView.
Apply the margin to ListView's row_item.xml. For this, you would need to include your row.xml's outer container inside another parent container, say LinearLayout. So margin will work.
Hope this helps.
If you want to do it with header you need to remove margin attributes from your listview because it affects all children and add the same margin for your listItem.
I run into the same problem recently, From what I saw on the platform some people are still struggling with this.
Based on my research It looks like the listview will override the header margins as well as paddings.
The solution will be:
to put your header viewgroup inside another viewgroup whose
android:layout_height="wrap_content" and android:layout_width="match_parent".
Then apply whatever margins you want to the inner viewgroup.
In your case the header layout would look like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop ="40dp" //For Example
android:layout_marginRight="20dp"
android:layout_marginEnd="20dp"
android:background="#color/transparent">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:text="My Addresses"
android:textSize="20sp"
android:padding="10dp"
android:textColor="#color/black"/>
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add New Address"
android:drawableRight="#drawable/small_list_arrow"
android:layout_margin="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#drawable/linearlayout_shadow"/>
</LinearLayout>
</LinearLayout>
Hope this helps

vertical layout little issue

I have a LinearLayout (vertical) and it should contain 3 elements in the following order: textview, listview and button. The listview could be really high so in order to keep all the 3 elements visible I put the 3 elements each one inside another layout. So my structure is like:
linear layout (vertical)
linear layout (horizontal)
textview
linear layout (vertial) *
listview
relative layout
button
In order to get it working I set a fixed height to the vertical linearlayout which only contains the listview (*) but I know it is a bad choice because on bigger devices there will be a lot of empty space. How can I fix it?
thanks
User percentage values for the LinearLayout(*), so they take up a percentage of the parent's height,
and for the rest, if you want them to take up remaining space, add attribute: android:layout_weight:1;
Implement your layout this 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" >
<TextView
android:id="#+id/mTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Header Text" />
<ListView
android:id="#+id/mListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mButton"
android:layout_below="#+id/mTextView" >
</ListView>
<Button
android:id="#+id/mButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1" />
</RelativeLayout>
// try 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="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="textview"/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1">
<ListView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0dp"
android:smoothScrollbar="true"
android:id="#+id/listview"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:gravity="center">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button"/>
</LinearLayout>
</LinearLayout>

Use ListView as background of TextView

I have the below layout which contain mainly:
Relative layout, which act as header with Textview and button.
and Listview.
I would like to make the "header" which is the above relative layout to be transparent and show the listview as user scroll down the list view.
I know how to make the layout transparent, but I dont know how to show the listview as background for the "header".
<?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" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp"
>
<TextView
android:id="#+id/txtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:paddingLeft="0dp"
android:text="#string/list_header"
android:textColor="#000000"
android:textSize="25sp"
android:textStyle="bold">
</TextView>
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="6px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
android:layout_alignParentRight="true"
>
</Button>
</RelativeLayout>
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
You are using a LinearLayout as the root container and in linear layout the views are placed one over the other so you cannot overlap one view over the other. If you want an overlapping effect you can use either the FrameLayout or the RelativeLayout as the root container.
Using RelativeLayout is a better option.
Here is sample code for this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<Button
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#00cc0000"
android:layout_alignParentTop="true" />
</RelativeLayout>
Here the button is overlapping the list view.
I hope this will help :)
Try moving the ListView inside of your RelativeLayout, as the first element (this ensures that it's in the back). This way, the other views are just on top of the ListView, and if you make them transparent you should get the desired effect!
Oh, and you should make the ListView then fill the RelativeLayout:
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ListView>
, and make the RelativeLayout fill the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...

Adding a layout dynamically into a Scrollview

This question seems to have been asked a dozen times already bu I haven't been able to deduce the solution from them.
I have a layout called tile.xml that looks like this:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:text="May Fong Robinson"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:text="Beautiful star-shaped spillway, Kechut Reservoir, Jermuk, Armenia"
android:textAppearance="?android:attr/textAppearanceMedium" />
I need to add this one of my views called feed.xml which I've declared as a ScrollView because I want to have multiple objects in it so I can vertically scroll though them. Here's my feed.xml file:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:background="#F1F1F1"
android:layout_height="fill_parent" >
</ScrollView>
I'd like to dynamically add my "tile" from tile.xml to my "feed" feed.xml view while changing the text of the TextViews on the fly.
How can I do this? Thanks
The new feed.xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F1F1F1" >
<LinearLayout
android:id="#+id/tiles"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</LinearLayout>
</ScrollView>
...and the new tile.xml:
<?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:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:text="May Fong Robinson"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="10dp"
android:text="Beautiful star-shaped spillway, Kechut Reservoir, Jermuk, Armenia"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
First of all, add the 2 TextViews inside a layout.
then, in your code, where you want to dynamically add the TextViews you do the following :
ScrollView scroll = (ScrollView) findViewById(R.id.scrollView1);
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.tile, null);
scroll.addView(view);
To access the TextViews you have to do the following :
TextView textView1 = (TextView) view.findViewById(R.id.textView1);
textView1.setText("");
Also make sure to give your TextViews different IDs in the XML file. Currently they are both textView1
ScrollView can only have 1 child, meaning the current structure of your "tile" layout can't be added to the ScrollView.
What you need is to add another Layout, let's say LinearLayout to your ScrollView so that it would be the ScrollView's only direct child. To this LinearLayout you can add as many childs as you want.
This can be done by using the LayoutInflater which you've probably encountered in numerous examples.
**TRY THIS**
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F1F1F1" >
<LinearLayout
android:id="#+id/tiles"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="#layout/tile" />
</LinearLayout>

Center list item vertically on ListView

I'm developing an Android application.
On one activity I have a List with list items. Those list items will have a TextView (I'm using my own layout because probably I will need to add more widgets to it).
This is ListActivity xml:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="469dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="40dp">
</ListView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/orderErrorMsg"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16dp" >
</TextView>
</RelativeLayout>
</LinearLayout>
And this is ListItem xml:
<?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="100dp"
android:orientation="vertical">
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
</LinearLayout>
And, finally, this is the result:
Why TextView is not centered vertically?
You have "wrap_content" on the layout_height of the TextView = there is no space to center vertically on since the TextView is wrapped tightly.
Try changing the layout_height to "match_parent" or place gravity="center_vertical" attribute in the LinearLayout instead.
<TextView
android:id="#+id/orderToFillName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:textSize="20dp" />
the answer is really simple: you have to add this to your TextView's XML:
android:gravity="center"
Currently you're not setting the text's position in the TextView but just the View's position.
Best wishes,
Tim
Try this way:
<TextView
android:id="#+id/orderToFillName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity= "center_vertical|center_horizontal"
android:textSize="20dp" />
or
android:gravity="center"

Categories

Resources