android customised Listview implementation

Question

Basically the android list view activity is transparent well i have managed to make it solid black using custom layout but how do i make it like the third image where the corner colour will be random .

thanks in advance

MainActivity.java

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.ArrayAdapter;

public class MainActivity extends Activity {

// Declare
private LinearLayout slidingPanel;
private boolean isExpanded;
private DisplayMetrics metrics;
private RelativeLayout headerPanel;
private int panelWidth;
private int panelWidth1;


private ImageView menuViewButton,menuRightButton;

FrameLayout.LayoutParams menuPanelParameters;
FrameLayout.LayoutParams slidingPanelParameters;
LinearLayout.LayoutParams headerPanelParameters;
LinearLayout.LayoutParams listViewParameters;

//Example
////////
String[] Example = new String[]
        { "Android Introduction","Android Setup/Installation","Android Hello World",
                "Android Layouts/Viewgroups","Android Activity & Lifecycle","Intents in Android"};


////////
//Example
@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_layer_stack);

    // Initialize
    metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    panelWidth = (int) ((metrics.widthPixels) * -0.65);//Right panel width
    panelWidth1 = (int) ((metrics.widthPixels) * 0.65);//left panel width

    headerPanel = (RelativeLayout) findViewById(R.id.header);
    headerPanelParameters = (LinearLayout.LayoutParams) headerPanel
            .getLayoutParams();
    headerPanelParameters.width = metrics.widthPixels;
    headerPanel.setLayoutParams(headerPanelParameters);

    slidingPanel = (LinearLayout) findViewById(R.id.slidingPanel);
    slidingPanelParameters = (FrameLayout.LayoutParams) slidingPanel
            .getLayoutParams();
    slidingPanelParameters.width = metrics.widthPixels;
    slidingPanel.setLayoutParams(slidingPanelParameters);
    ///////

    ArrayAdapter<String> ExampleArrayAdapter = new CustomAdapter(this, Example);
    //changing code//practice
    /*new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
            Example);*/
    ListView ExampleListView = (ListView)findViewById(R.id.listView);
    ExampleListView.setAdapter(ExampleArrayAdapter);
    ///////

    // Slide the Panel
    menuRightButton = (ImageView) findViewById(R.id.menuViewButton);
    menuRightButton.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            if (!isExpanded) {
                isExpanded = true;
                // Expand

                FragmentManager fragmentManager = getFragmentManager();

                FragmentTransaction fragmentTransaction = fragmentManager
                        .beginTransaction();
                fragmentTransaction.replace(R.id.menuPanel,
                        new LeftMenuFragment());
                fragmentTransaction.commit();
                new ExpandAnimation(slidingPanel, panelWidth1,
                        Animation.RELATIVE_TO_SELF, 0.0f,
                        Animation.RELATIVE_TO_SELF, 0.65f, 0, 0.0f, 0, 0.0f);

            } else {
                isExpanded = false;
                // Collapse

                new CollapseAnimation(slidingPanel, panelWidth1,
                        TranslateAnimation.RELATIVE_TO_SELF, 0.65f,
                        TranslateAnimation.RELATIVE_TO_SELF, 0.0f, 0, 0.0f,
                        0, 0.0f);

            }
        }
    });


}
}

custom_layout.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="70dp"
android:orientation="horizontal"
android:layout_marginTop="60dp"
android:background="@drawable/blue_bg">

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="70dp"
    android:layout_height="60dp"
    android:src="@drawable/ic_launcher"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp" />


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginLeft="10dp"
    android:gravity="left" >


    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textSize="19sp"
    android:textColor="#ffffff"
    android:textStyle="bold" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:text="Tweet body text here"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:layout_marginTop="5dp"
    android:ellipsize="end"
    android:lines="3"
    android:textColor="#ffffff"
    android:textSize="14sp" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Small Text"
    android:layout_marginTop="5dp"
    android:textColor="#ffffff"
    android:textSize="12sp" />


</LinearLayout>


</LinearLayout>

CustomAdapter.java

public class CustomAdapter extends ArrayAdapter {
private LayoutInflater inflater;
public CustomAdapter (Activity activity, String[] items){
    super(activity, R.layout.custom_layout, items);
    inflater = activity.getWindow().getLayoutInflater();
}

@Override
public View getView(int position, View convertView, ViewGroup parent){
    return inflater.inflate(R.layout.custom_layout, parent, false);
}
}

I have managed to make it show random colour with updating the get view function with the following code but everytime i scroll the colour changes, how do i make it stable so that once the colour is assigned it won't change?

 Random rnd = new Random();
    int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));

  View rowView = inflater.inflate(R.layout.custom_layout, parent, false);
    rowView.setBackgroundColor(color);

Answer 1

Finally, i have achieved the following answer to my question But i'm still facing the problem where on every scroll the colors are changing , where i want them to be constant once assigned, if anyone can help it will be great. thank you all. By just modifying xml and custom adapter code i have made it my xml code as

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_marginTop="70dp"
android:layout_height="70dp"
android:background="@drawable/blue_bg">

<LinearLayout
    android:layout_marginLeft="20dp"
    android:layout_width="345dp"
    android:layout_height="70dp"
    android:background="@drawable/white_bg">
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_launcher"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp" />


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        android:gravity="left" >


        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Large Text"
            android:layout_marginTop="10dp"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="19sp"
            android:textColor="#000000"
            android:textStyle="bold" />


        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:text="Tweet body text here"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginTop="5dp"
            android:ellipsize="end"
            android:lines="3"
            android:textColor="#000000"
            android:textSize="14sp" />


    </LinearLayout>

</LinearLayout>

</LinearLayout>

Modifying the java code with the following code

 Random rnd = new Random();

   int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(257), rnd.nextInt(258));

  View rowView = inflater.inflate(R.layout.custom_layout, parent, false);
    rowView.setBackgroundColor(color);

Answer 2

The colour keeps changing because the list items are recycled, now when android calls the getView() method for the second time for a particular list item on scrolling, you regenerate the colour value and it changes.

Since, you are able to generate random colours, all you need to do is to store the colour once the item is generated, and then reuse that colour.

What you could do is to create an array list which stores the colour value and then inside the getView() method check if the colour for a particular position exists in the arraylist. If yes, then use that colour else generate a random colour and also add it to the arraylist of colours.

E.g. (Untested code but the approach should be similar)

Inside getView() :

int color = 0;
if(colorsList.size > position) {
    //This means that the color has already been generated for this position
    color = colorsList.get(position);
} else {
    //Color hasnt been generated for this position.
    color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256),
            rnd.nextInt(256));
    colorsList.add(color);
}
clorText.setBackgroundColor(color);

Answer 3

Create your layout file as follows.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" 
    android:weightSum="1">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_weight="0.3" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_weight="0.7" />

</LinearLayout>

Your activity class onCreate() method should look like something like this.

ListView listView = (ListView) findViewById(R.id.listView1);
String[] Example = new String[] { "Android Introduction",
"Android Setup/Installation", "Android Hello World",
"Android Layouts/Viewgroups", "Android Activity & Lifecycle",
"Intents in Android" };

ArrayList<String> list = (ArrayList<String>) Arrays.asList(Example);
CustomAdapter adapter = new CustomAdapter(this, list);
listView.setAdapter(adapter);

Create a custom adapter class as follows.

public class CustomAdapter extends BaseAdapter {
    Context context;
    ArrayList<String> listOfContents;
    LayoutInflater inflater;

    public CustomAdapter(Context context, ArrayList<String> list) {
        this.context = context;
        listOfContents = list;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return listOfContents.size();
    }

    @Override
    public Object getItem(int position) {
        return listOfContents.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = inflater.inflate(R.layout.list_row, null);

        Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256),
                rnd.nextInt(256));

        TextView clorText = (TextView) convertView.findViewById(R.id.textView1);
        TextView clorText2 = (TextView) convertView
                .findViewById(R.id.textView2);

        clorText.setBackgroundColor(color);
        clorText2.setBackgroundColor(Color.BLACK);

        return convertView;
    }
}

This code is completely untested. You should get a rough idea about using Listview and Custom adapter and generating random color.

Answer 4

You have to use a custom adapter with two views. You can change the color of left view in getView method of adapter.