ListView headers without list item separators

ListView headers without list item separators - java

I'm currently writing an Android app that uses ListView with headers. It works okay, but not really as I want. Every item in ListView has 1-2px separator at the top and bottom of it. So does the header - and that's the problem. It does not look very pretty...
The interesting part is that system apps (like Settings, for instance) does not have such problem.
Here's my example adapter:
setListAdapter(new BaseAdapter() {
#Override
public int getCount() {
return 10;
}
#Override
public Object getItem(int i) {
return i;
}
#Override
public long getItemId(int i) {
return i;
}
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v = ((LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(i % 3 == 0 ? R.layout.list_header : android.R.layout.simple_list_item_1, viewGroup, false);
((TextView)v.findViewById(android.R.id.text1)).setText("test");
return v;
}
});
And list header layout file:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello, World"
style="?android:attr/listSeparatorTextViewStyle">
</TextView>
So the question is: how to get rid of the item separators between headers and regular items, just like, for example, Settings app does?
EDIT:
After reading the answers, I want to clear one thing up. I do not want to remove separators completely. I want to remove them only between the header items and regular items. Also, half-measures like "removing separators completely and adding them on some items" do not satisfy me, too.

It seems that you have to use a custom item view for dividers and a little workaround. Let me explain how to manage this:
Do not use the default dividers, remove it.
Create a custom layout with a View at bottom to be the subline for headers.
Create a custom layout with a View at top to have the divider for items.
Then, the two types of dividers will be glue to make only one subline for header part, so dividers should have the same height in order to make a good subline. This will avoid to have a divider above the header sections but keeping the dividers for items list.
Therefore, let me show some code to achieve it. First, don't forget to avoid default divider on the ListView:
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:dividerHeight="0dp"/>
Create an item layout with a divider at top set to 1dp (or whatever):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- this is the divider for items -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
<!-- and the rest of item's content in another ViewGroup -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:textColor="#android:color/white"/>
</LinearLayout>
</LinearLayout>
Finally, the header layout with a divider at bottom (with the same height as item's divider):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/item_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
style="?android:attr/listSeparatorTextViewStyle"/>
<!-- this is the ("half-")divider for header section -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
<!-- this view above will be merged with item's dividers -->
</LinearLayout>
And it gives this result:

Remove the style you have set for the header TextView
Create your own custom style with required divider and set it to TextView
<style name="CustomListSeperatorTextViewStyle" parent="Widget.TextView.ListSeparator">
<item name="android:background">#drawable/your_own_here</item>

Seperator is due to the style you have set with the textview, just remove the style hope this will work.

I just found these parameters that seem to be what you need, you can try adding them in your ListView:
android:headerDividersEnabled="false"
android:footerDividersEnabled="false"
The documentation is available here and indicates:
When set to false, the ListView will not draw the divider after each header view. The default value is true.

Related

XML layout doesn't appear in R.layout

I am using the androidX CardView.
In order to make a recyclerview adapter for the cards I need to inflate the custom card layout I have made.
Unfortunately the xml of the custom card view doesn't appear in R.layout.(xml_name),while i find normally all the other layouts.
This the code inside the adapter class where I need to inflate:
public MyViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view;
LayoutInflater mInflater = LayoutInflater.from(mContext);
view = mInflater.inflate(R.layout.cardview_item_answer); // not finding this layout
return null;
}
This is the card layout xml (cardview_item_answer.xml) :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="160dp"
android:layout_height="160dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
app:cardCornerRadius="4dp"
>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:background="#2d2d2d2d">
</androidx.appcompat.widget.AppCompatImageView>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/text_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="test"
android:textSize="13sp"
android:textColor="#color/black"
android:layout_gravity="center"
></androidx.appcompat.widget.AppCompatTextView>
</androidx.appcompat.widget.LinearLayoutCompat>
Do you suggest any ideas ?
Thank you very much !

Solved !
If you ever have this problem -> clean project and invalidate Caches/Restart.

If the XML contains any errors, your build will likely fail - this will cause R.layout to yield unexpected results. I am not seeing a closing tag for the CardView in cardview_item_answer.xml
Try adding a closing tag </androidx.cardview.widget.CardView> at the end of cardview_item_answer.xml

For some reasons neither of the solutions above worked for me.
I just had to use the full path to the layout before being able to use it. In my case the item of a spinner
So I did this:
import com.myProject.R.layout.spinner_item
It is never a suggested autocompletion, at least in my case, in model views. It is in the fragments. Can't make sense of that, but it works in view models too.

TextView: Fade out + Read More - Expand on click

I'd like to fade out long Texts after a fixed number of lines in my app like they did it here in this css tutorial:
https://css-tricks.com/text-fade-read-more/
But I have no clue what to google or how I can implement a behaviour likes this. Can anybode help me with some input?
<FrameLayout
android:id="#+id/event_text_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="28dp"
android:maxLines="15"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/overlay_textview" />
</FrameLayout>

Set TextView's maxLines property (or just set the height to some concrete value), put a view with gradient above it and a button. Handle button and gradient visibility form your code.
button.setOnClickListener {
button.visibility = View.GONE
gradientView.visibility = View.GONE
textView.layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
textView.requestLayout()
}

Picasso centerCrop and fit get different results

I want to insert an image to an ImageView, which gets used as a background. This background is in a RecyclerView. When it gets loaded the first time, it looks like this:
But when I scroll to another item and scroll back, it looks like this (it should always look like this):
Here i add the image:
public void onBindViewHolder(StoryViewHolder holder, int position) {
holder.cardView.setMinimumHeight(height/3);
holder.layout.setMinimumHeight((int) ((float) width / 4));
//set image
Picasso.with(activity).load(MainPostAdapter.URL + 140 + ".png").
transform(new BlurTransform(holder.background.getContext())).fit().centerCrop().into(holder.background);
holder.background.setAlpha(0.25f);
}
And this is the image itself:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
What could the problem be?
EDIT:
whole XML (It doesn't show all of the code. Here is also pastebin:http://pastebin.com/8rJvSx7V):
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
<RelativeLayout
android:id="#+id/story_view_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50px">
<ImageView
android:id="#+id/story_view_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/story_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_below="#+id/story_view_image"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</FrameLayout>

try to set android:layout_height="150dp" for your CardView (don't use px!). Its child FrameLayout is unnecesarry (CardView is extending FrameLayout and have set same attributes set), remove it.
It's not so well written, all your Views have match_parent set for height, besides Image and Text views... Your item is probably trying to fit RecyclerView height in this case ("whole screen") and is measured without image at first time (Picasso async downloading, setting image when view is already measured). But when you inflate your View again (scroll and recycle) new list item will be measured differently, because Picasso will insert your image "in runtime", no need to async fetching (cache)

Android: ListView tells me it's populated but not displaying items

So I've googled, and scoured SO for an answer to what I think is probably a ridiculous oversight, but here goes.
I have a ListView that I'm populating with an ArrayAdapter that I'm building out of a list of objects I'm using elsewhere in my application. I have checked via getCount that there are items in the adapter, both before and after I call .setAdapter(). Nothing is showing up in my application however.
My main layout res/layout/playlistview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/playlist_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#80000000"
android:gravity="center"
android:orientation="horizontal" >
<ListView
android:id="#+id/playlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#206"
android:background="#602" >
</ListView>
</LinearLayout>
(I set the colors so I could see what's going on more easily)
the textview for each item res/layout/singlelistitem:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/single_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:padding="5dp"
android:background="#206">
</TextView>
and the code I use to populate it:
private ListView playlistView;
private void buildPlaylistView() {
playlistView = (ListView)findViewById(R.id.playlistview);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.singlelistitem, R.id.single_item, playlist.titlesAsArray());
playlistView.setAdapter(adapter);
playlistView.setVisibility(View.VISIBLE);
adapter.notifyDataSetChanged();
((ArrayAdapter<String>)playlistView.getAdapter()).notifyDataSetChanged();
}
playlist.titlesAsArray() does return String[] and it works.
I have both of the .notifyDataSetChanged() in there, since I found that on SO and gave it a try.
When I change the android:layout_height in the ListView object in my XML to wrap_content, I see only the opaque background that is in the LinearLayout that wraps it. When I set the ListView android:layout_height to match_parent, the whole screen is #206 (magentish).
When i check getCount() on the adapter before setAdapter() it says there are items. When I check it after, from the view itself, it says there are the same number of items. I'm totally lost on this one, but nothing is displayed.

Try changing from android:orientation="horizontal" to android:orientation="vertical" this may fix.

ListView in Scroll View my scrollview moves to top of listview. How do I prevent this?

I have a listview in my scroll view underneath almost a page worth of scroll before that but once my listview gets populated the scrollview moves to the top of the list view. how can I fix this/prevent this from happening?
SCROLL VIEW XML:
<ScrollView
android:id="#+id/tvscrollview"
android:layout_marginTop="8.0dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
layout="#layout/a" />
<include
layout="#layout/b" />
<include
layout="#layout/c" />
<include
layout="#layout/d" />
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
I've tried doing
sv.fullScroll(ScrollView.FOCUS_UP);
and all that stuff to my scrollview but it doesnt work

We should never put a ListView inside a ScrollView.
Work Around : When ScrollView moves up/down because of listview's notifyDataSetChanged(),
Then try,
scrollview.setEnabled(false);
listview.setFocusable(false);
adapter.notifyDataSetChanged();
scrollview.setEnabled(true);

Firstly, probably you've already heard about it, but just in case: You should never put a ListView inside a ScrollView, as ListView itself already has got a ScrollView and this design goes against the whole ListView idea. If you're convinced you have to use it, probably there's a better approach to use and you may need to simplify your code somehow.
Now, even if you still want to use something like that, you may use something like this:
package your.package.name;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListAdapter;
import android.widget.ListView;
public class ScrollingListView {
public static void setListViewHeightBasedOnChildren(ListView listView) {
ListAdapter listAdapter = listView.getAdapter();
if (listAdapter == null)
return;
int totalHeight = 0;
for (int i = 0; i < listAdapter.getCount(); i++) {
View listItem = listAdapter.getView(i, null, listView);
listItem.measure(0, 0);
totalHeight += listItem.getMeasuredHeight();
}
ViewGroup.LayoutParams params = listView.getLayoutParams();
params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
listView.setLayoutParams(params);
}
}
You simply set your adapter via .setAdapter() and afterwards call ScrollingListView.setListViewHeightBasedOnChildren(your_listview). This should redimension your window accordingly to your ListView height.
---- EDIT ----
That will be probably the ugliest workaround, but try doing the following:
ScrollView sv = (ScrollView) findViewById(R.id.your_scrollview);
sv.setEnabled(false);
// Populate your ListView
sv.setEnabled(true);

Add all the stuff on top as header to the list view.
Now that I see the code.. you can only have one ViewGroup inside a scrollview. So you would warp the two layouts into another one, BUT a ListView automatically has a scroll view in it so that wont really work.
So what you have to do is use the addHeader view in your ListActivity (of fragment) and inflate LinearLayout1 in the activity from a different xml file.

add:
android:transcriptMode="disabled"
in the list you don't want to scroll
From Android Docs

It's not possible to make a scrollable view inside a scrollable view. But as a work around this, and only in case that this listviews doesn't take much memory if all views are loaded. you can use this
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ListView;
public class NonScrollableListView extends ListView {
public NonScrollableListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Do not use the highest two bits of Integer.MAX_VALUE because they are
// reserved for the MeasureSpec mode
int heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, heightSpec);
getLayoutParams().height = getMeasuredHeight();
}
}
Again, it's not good to use this workaround

Just Do one thing before add items in your list
listview.setFocusable(false);
after that you can again do that
listview.setFocusable(true);
if needed it will work for sure

I would wrap the list and the other layouts in a RelativeLayout instead of a LinearLayout
<ScrollView
android:id="#+id/tvscrollview"
android:layout_marginTop="8.0dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
layout="#layout/a" />
<include
layout="#layout/b" />
<include
layout="#layout/c" />
<include
layout="#layout/d" />
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/container" />
</RelativeLayout>
</ScrollView>
This way the top border of the ListView is boun to the bottom border of the LinearLayout and will always stay under everything else.
You cant put the includes directly in the RelativeLayout! See here for more details.

I have made 2 or 3 changes in your xml file
<ScrollView
android:id="#+id/tvscrollview"
android:layout_marginTop="8.0dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"> // This will let you see the scroll bar of list view
when you scroll your list view.
<include
layout="#layout/a" />
<include
layout="#layout/b" />
<include
layout="#layout/c" />
<include
layout="#layout/d" />
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="300dp" />// Instead of wraping up your list, if you wish
you can give certain height to your list view.
</LinearLayout>
</ScrollView>
Another thing you need is write the given code in your java file.
onCreate()
{
....
ScrollView sView=(ScrollView)findViewById(R.id.tvscrollview);
yourListView.setOnTouchListener(new OnTouchListener()
{
public boolean onTouch(View arg0, MotionEvent arg1)
{
if(arg1.getAction() == MotionEvent.ACTION_DOWN || arg1.getAction() == MotionEvent.ACTION_MOVE)
{
sView.requestDisallowInterceptTouchEvent(true);
}
return false;
}
});
I hope this helps you.

You may want to achieve this by using following:
<LinearLayout
......>
<ScrollView
android:id="#+id/tvscrollview"
android:layout_marginTop="8.0dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
layout="#layout/a" />
<include
layout="#layout/b" />
<include
layout="#layout/c" />
<include
layout="#layout/d" />
</LinearLayout>
</ScrollView>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Wrap your listview outside scrollview and else inside scrollview, because You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.
Source Android Docs

The only solution that worked for me was to add an EditText as the first child of the layout. Ugly, I know.
<EditText
android:layout_width="0dp"
android:layout_height="0dp" />

I had the same issue I found the solution by changing the visibility of the list view in XML after setting the adapter I change the visibility to visible
listView.setAdapter(adapter);
listView.setVisibility(View.VISIBLE);

Though its a very late answer to this question and this answer has already an accepted answer, I thought putting how I solved my problem here might help others to find everything related to this problem in a single SO thread.
So here's my situation: I had a ScrollView with a ListView at the end of the layout. I know its a very bad practice to do so. I could achieve the same behaviour I wanted by attaching a header to the ListView. But anyway, my ListView got the focus when it was populated with the data and the the page was scrolled automatically to the bottom where the ListView started.
I tried with the accepted answer here, but it didn't work for me. I tried using a dummy EditText at the top of the layout so that it could request the focus automatically, but it didn't work either. Because the ListView was getting the focus after the data is loaded from a REST Api call.
Then I found this answer and this really helped. So I thought putting it in here so that others might get help from a single thread having the same problem like me.
mainScrollView.fullScroll(ScrollView.FOCUS_UP); didn't work for me either as the list was populated after the other views were populated. So I had to scroll the ScrollView to the top after the ListView is populated. So here's how I solved my problem.
mScrollView.setEnabled(false);
mIntroducerListView.setFocusable(false);
mListAdapter.notifyDataSetChanged();
// Force scroll to the top of the scroll view.
// Because, when the list view gets loaded it focuses the list view
// automatically at the bottom of this page.
mScrollView.smoothScrollTo(0, 0);

I tried the above answers, but neither of them worked. Below is my final solution.
Just override the onFinishInflate method, then do a post to scrollTo(0, 0).
#Override
protected void onFinishInflate() {
super.onFinishInflate();
this.post(new Runnable() {
#Override
public void run() {
scrollTo(0, 0);
}
});
}

We Keep Coding

Java is a programming language and computing platform first released by Sun Microsystems in 1995.