scrollview's child(linear layout)'s background color get changed while scrolling

Question

I was working with scrollview and get the weird problem that I cannot figure out.

I have attached screen shot of graphical view, as I have set one color for the layout background but it get changed while scrolling the view.

Here is my code.

OnCreate of Activity.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_discussionlist);


        ll_comments = (LinearLayout) findViewById(R.id.ll_comments);

        for (int i = 0; i < 10; i++) {
            View view = LayoutInflater.from(DiscussionListActivity.this)
                    .inflate(R.layout.comments, null);

            ll_comments.addView(view, ll_comments.getChildCount());
            Log.print(" ll_comments.getChildCount() ="
                    + ll_comments.getChildCount());

        }
    }

here is activity_discussionlist.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" >

    <RelativeLayout
        android:id="@+id/ll_discussion_content"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txt_submenu_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-5dp"
            android:background="@drawable/submenu_bg"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="10dp"
            android:text="SubMenu"
            android:textColor="#FFFFFF" />

        <ImageView
            android:id="@+id/img_reply"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:src="@drawable/ic_reply"
            android:visibility="visible" />
    </RelativeLayout>

    <ScrollView
        android:id="@+id/sv_discussion"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:fillViewport="true"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/ll_scroll_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <RelativeLayout
                android:id="@+id/rl_discussion"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/discussion_bg"
                android:padding="5dp" >

                <HorizontalScrollView
                    android:id="@+id/hl_title"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="5dp"
                    android:scrollbars="none" >

                    <TextView
                        android:id="@+id/txt_title"
                        style="@style/TextTitleBold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:singleLine="true"
                        android:text="Homework Questions" />
                </HorizontalScrollView>

                <TextView
                    android:id="@+id/txt_uploadedby_date"
                    style="@style/TextDate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/hl_title"
                    android:layout_marginTop="5dp"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="by Ralph on Oct 01,2013 6:15 AM"
                    android:textColor="#BBBBBB" />

                <TextView
                    android:id="@+id/txt_posts"
                    style="@style/TextDate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/txt_uploadedby_date"
                    android:layout_marginTop="5dp"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="12 Comments" />

                <TextView
                    android:id="@+id/txt_descr"
                    style="@style/TextDescription"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/txt_posts"
                    android:layout_marginTop="5dp"
                    android:ellipsize="end"
                    android:singleLine="false"
                    android:text=" 0 down vote favorite I am setting up images for different devices as per official google docs.As per google docs we should always use dp(density independent pixels) because pixels may varies for different devices. So i have managed images as per dp(density independent pixels). I have put images in drawable xhdpi,hdpi,mdpi and ldpi. it works well for most of devices but for different devices ppi pixels may varies from device to device so dp(density independent pixels) is not fixed so my all calculations according to dp(density independent pixels) goes wrong and cannot be set properly." />
            </RelativeLayout>

            <View
                android:id="@+id/view_separator"
                android:layout_width="fill_parent"
                android:layout_height="10dp"
                android:layout_marginTop="10dp"
                android:background="#BBBBBB" />

            <LinearLayout
                android:id="@+id/ll_comments"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:orientation="vertical"
                android:padding="10dp" >
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

and here is comments.xml file :

<?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"
    android:paddingBottom="20dp" >

    <FrameLayout
        android:id="@+id/comment_identity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/comment_options"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="35dp"
            android:background="#ececec"
            android:gravity="bottom"
            android:orientation="horizontal"
            android:weightSum="2" >

            <LinearLayout
                android:id="@+id/linear_editoption"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right|center_vertical"
                android:padding="10dp" >

                <ImageView
                    android:id="@+id/img_edit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/img_edit" />

                <TextView
                    android:id="@+id/text_editoption"
                    style="@style/TextDescriptionBold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:text="Edit" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear_deleteoption"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal|center_vertical"
                android:padding="10dp" >

                <ImageView
                    android:id="@+id/img_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/img_delete" />

                <TextView
                    android:id="@+id/text_deleteoption"
                    style="@style/TextDescriptionBold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:text="Delete" />
            </LinearLayout>
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/rel_commentphoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:padding="10dp" >

            <ImageView
                android:id="@+id/img_commentpic"
                android:layout_width="50dp"
                android:layout_height="60dp"
                android:background="@drawable/img_bg"
                android:src="@drawable/profile" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rel_commentidentity"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/txt_name"
                style="@style/TextDescriptionBold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="70dp"
                android:layout_marginTop="10dp"
                android:singleLine="true"
                android:text="Ralph Johnson" />


            <TextView
                android:id="@+id/txt_date"
                style="@style/TextDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_toRightOf="@+id/txt_name"
                android:singleLine="true"
                android:text="02 Oct,2013 6:00 AM"
                android:textColor="#BBBBBB" />
        </RelativeLayout>
    </FrameLayout>

    <TextView
        android:id="@+id/txt_comment"
        style="@style/TextDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/comment_identity"
        android:layout_marginTop="5dp"
        android:singleLine="false"
        android:text="This is test comment.Post your comments here." />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/txt_comment"
        android:layout_marginTop="20dp"
        android:background="#DDDDDD" />

</RelativeLayout>

As you all can see that I have set the background color only to Linear layout (id of Linear layout is 'comment_options') in comments.xml file.

I have marked red circles in image below. Please see the difference.

Answer 1

The problem isn't with your layout definition or color assignment. Since you are not setting the background property of the base container in activity_discussionlist.xml, the windowBackground property defined for your app-theme is coming into play.

What you are currently seeing is a gradient defined as:

screen_background_selector_light.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#ffe8e8e8"
    android:endColor="#ffffffff"
    android:angle="270" />
</shape>

So, if your activity's layout was an empty LinearLayout (for example) with no background property set, it would look like this:

Here's where the background might be coming from:

(taken from platforms/android-17/data/res/values/themes.xml)
<style name="Theme.Light">
    <item name="windowBackground">@android:drawable/screen_background_selector_light</item>
    ....

What I think is happening:

lightest background      ==>>     #ECECEC on mostly #E8E8E8
lighter background       ==>>     #ECECEC on (#E8E8E8 + a bit of #FFFFFF)
less lighter background  ==>>     #ECECEC on (#FFFFFF + a bit of #E8E8E8)
dark background          ==>>     #ECECEC on mostly #FFFFFF

In action:

In the image above, all four LinearLayouts (each above a TextView) are identical, with their background set to "#ECECEC". The visual distinction comes from the activity's background, which is a gradient.

So, if you were set the background property for the parent container (root-level LinearLayout in activity_discussionlist.xml) to say, #ECECEC, or any other color of your liking, this problem would be solved. The gradient is what you don't want.