Change the background, text color for custom list view on focus and click

Change the background, text color for custom list view on focus and click

In this tutorial we will see how to change the background color on the custom list item, how to change the text style of text view etc.

We will use the same example which we have created in "How to create custom list view in android application" blog.

Once you done with the above custom list creation follow the below steps to achieve this - 

• Create a highlight.png file and put that in drawable folder.
• Create the selector for list item background, text 1 color, and text2 color as shown below under the drawable folder - 

listselector.xml - 

< selector xmlns:android="http://schemas.android.com/apk/res/android" >

    < item android:state_focused="true"

        android:drawable="@drawable/highlight" / >

    < item android:state_pressed="true"

        android:drawable="@drawable/highlight" / >

    < item android:state_selected="true"

        android:drawable="@drawable/highlight" / >

< /selector>

listitemline1_selector.xml - 

< selector xmlns:android="http://schemas.android.com/apk/res/android" >

    < item android:state_focused="true"

        android:color="#0e0c0a"/ >

    < item android:state_pressed="true" android:color="#0e0c0a" /  >

    < item android:state_selected="true" 

        android:color="#0e0c0a" / >

    < item android:color="#b48f53" /  >

< /selector >

listitemline2_selector.xml - 

< selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_focused="true"

        android:color="#0e0c0a"/>

    <item android:state_pressed="true" android:color="#0e0c0a"/>

    <item android:state_selected="true" 

        android:color="#0e0c0a"/>

    <item android:color="#725521"/>

selector> 

• Now we need to assign these selector to individual list item and text views created on the hybridlist.xml file as shown below - 

hybridlist.xml - 

< ? xml version="1.0" encoding="utf-8" ? >

< LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center_vertical"

    android:descendantFocusability="blocksDescendants"

xmlns:android="http://schemas.android.com/apk/res/android" >

< LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:background="@drawable/listselector"

android:layout_weight="1" >

< TextView

android:id="@+id/text1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="15sp"

android:textStyle="bold"

android:textColor="@drawable/listitemline1_selector" / >

< TextView

android:id="@+id/text2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textSize="11sp"

android:textColor="@drawable/listitemline2_selector" / >

< / LinearLayout>

< / LinearLayout>

• Now run the application and you will see the same output as shown above. Same kind of selector you can apply to any view like Button, ImageView, Spinner etc.

Create your own customized spinner control with icon and text

How to create your own customized spinner control with icon and text

In this tutorial we will see how to create your own customized spinner view. In real life application, your UI designer will ask you to put some icon, with text having background etc. So to achieve this, you will need to create your own spinner view.

To achieve this, you will need need to place some icons in your drawable folder - motorola.png, google.png, microsoft.png, apple.png, yahoo.png, samsung.png.

• First step to create an android project. I created with the "CustomerSpinnerDemo" and the package is "com.customspinnerdemo".
• Copy the above mentioned images into res/drawable folder.
• Create the string.xml file with the below content - 

string.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="hello">CustomSpinner Demo</string>

    <string name="prompt">Choose your selection</string>

    <string name="app_name">CustomSpinner Demo</string>

    <drawable name="white">#ffffff</drawable>

    <drawable name="black">#000000</drawable>

    <drawable name="green">#347C2C</drawable>

    <drawable name="pink">#FF00FF</drawable>

    <drawable name="violet">#a020f0</drawable>

    <drawable name="grey">#778899</drawable>

    <drawable name="red">#C11B17</drawable>

    <drawable name="yellow">#FFFF8C</drawable>

    <drawable name="PowderBlue">#b0e0e6</drawable>

    <drawable name="brown">#2F1700</drawable>

    <drawable name="Hotpink">#7D2252</drawable>

    <string name="select_Category">Select Category</string>

    <drawable name="darkgrey">#606060</drawable>

</resources>

• Change the main.xml as follows - 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/hello"

    />

<Spinner

    android:id="@+id/spinner"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:drawSelectorOnTop="true"

    android:prompt="@string/prompt"

    />

</LinearLayout>

• Create the row.xml as below under the layout folder - 

<?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="wrap_content"

 android:orientation="vertical"

 android:padding="3dip"

>

    <ImageView

         android:id="@+id/image"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:src="@drawable/icon"/>

    <TextView

         android:layout_toRightOf="@+id/image"

         android:padding="3dip"

         android:layout_marginTop="2dip"

         android:textColor="@drawable/red"

         android:textStyle="bold"

         android:id="@+id/company"

         android:layout_marginLeft="5dip"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

     <TextView

         android:layout_toRightOf="@+id/image"

         android:padding="2dip"

         android:textColor="@drawable/darkgrey"

         android:layout_marginLeft="5dip"

         android:id="@+id/sub"

         android:layout_below="@+id/company"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

</RelativeLayout>

• Now need to change the main activity class as follows - 

package com.customspinnerdemo;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.Spinner;

import android.widget.TextView;

public class CustomSpinnerDemoActivity extends Activity {

String[] strings = {"Motorola","Google",

            "Microsoft", "Apple", "Yahoo","Samsung"};

    String[] subs = {"Mobile world","Google gives you everything",

            "Microsoft king of windows", "Apple you will love it", "Yahoo still strugling","Samsung good"};

    int arr_images[] = { R.drawable.motorola,

                         R.drawable.google, R.drawable.microsoft,

                         R.drawable.apple, R.drawable.yahoo, R.drawable.samsung}; 

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        Spinner mySpinner = (Spinner)findViewById(R.id.spinner);

        mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemoActivity.this, R.layout.row, strings));

    }

    public class MyAdapter extends ArrayAdapter{

        public MyAdapter(Context context, int textViewResourceId,   String[] objects) {

            super(context, textViewResourceId, objects);

        }

        @Override

        public View getDropDownView(int position, View convertView,ViewGroup parent) {

            return getCustomView(position, convertView, parent);

        }

        @Override

        public View getView(int position, View convertView, ViewGroup parent) {

            return getCustomView(position, convertView, parent);

        }

        public View getCustomView(int position, View convertView, ViewGroup parent) {

            LayoutInflater inflater=getLayoutInflater();

            View row=inflater.inflate(R.layout.row, parent, false);

            TextView label=(TextView)row.findViewById(R.id.company);

            label.setText(strings[position]);

            TextView sub=(TextView)row.findViewById(R.id.sub);

            sub.setText(subs[position]);

            ImageView icon=(ImageView)row.findViewById(R.id.image);

            icon.setImageResource(arr_images[position]);

            return row;

            }

        }

}

• Run the application and you will see the customer spinner control. You  can also attach the selector to change the background color, change the text etc.

How to add/manage menus in android application

How to add/manage menu in android application

Menues are very important part of any android applications, creation and managing those menu is little tricky in android. I will cover creation and managing menues in two steps - (You will need to create new android project and put 3 different play.png, record.png, soundon.png and stop.png into drawable folder)

• Creating menu items
• Managing menu items

Creating Menu Items - 

Creating the menu item is pretty simple. We need to override the "onCreateOptionsMenu(Menu menu)" method on your Activity class and need to add menues. Below is my activity class for your reference - 

package com.menuitem.test;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.Toast;

public class MenuItemTestActivity extends Activity {

private boolean isPlayStarted = false;

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

    

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

    // TODO Auto-generated method stub

    menu.add(1, 101, 1, "Play").setIcon(R.drawable.play);

    menu.add(1, 102, 2, "Record").setIcon(R.drawable.record);

    menu.add(1, 103, 3, "Sound").setIcon(R.drawable.soundon);

    return super.onCreateOptionsMenu(menu);

    }

    

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

    // TODO Auto-generated method stub

    switch(item.getItemId()) {

    case 101:

    Toast.makeText(getApplicationContext(), "Play clicked", Toast.LENGTH_LONG).show();

    isPlayStarted = true;

    break;

    case 102:

    Toast.makeText(getApplicationContext(), "Record clicked", Toast.LENGTH_LONG).show();

    break;

    case 103:

    Toast.makeText(getApplicationContext(), "Sound clicked", Toast.LENGTH_LONG).show();

    break;

    }

    return super.onOptionsItemSelected(item);

    }

}

Managing Menu Items -

Managing menu items are nothing but enabling and disabling some of the menu options, or adding the icons depending on the selected one etc. In this, we will change the menu item's icon and title depending on some conditions. So there is "onPrepareOptionsMenu" method which is called once user click on menu button and before displaying the menues in UI, this method is called. So you can include the code to change the title, icon of the menu item in this method. Apart from that, you can also enable/disable the menu item. Please see all the methods available for MenuItem. 

At the time of first call - 

After clicking on Play menu, and again press the menu button - 

My activity class will look like this - 

package com.menuitem.test;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.Toast;

public class MenuItemTestActivity extends Activity {

private boolean isPlayStarted = false;

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

    

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

    // TODO Auto-generated method stub

    menu.add(1, 101, 1, "Play").setIcon(R.drawable.play);

    menu.add(1, 102, 2, "Record").setIcon(R.drawable.record);

    menu.add(1, 103, 3, "Sound").setIcon(R.drawable.soundon);

    return super.onCreateOptionsMenu(menu);

    }

    

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

    // TODO Auto-generated method stub

    switch(item.getItemId()) {

    case 101:

    Toast.makeText(getApplicationContext(), "Play clicked", Toast.LENGTH_LONG).show();

    if (isPlayStarted) {

    isPlayStarted = false;

    }else {

    isPlayStarted = true;

    }

    break;

    case 102:

    Toast.makeText(getApplicationContext(), "Record clicked", Toast.LENGTH_LONG).show();

    break;

    case 103:

    Toast.makeText(getApplicationContext(), "Sound clicked", Toast.LENGTH_LONG).show();

    break;

    }

    return super.onOptionsItemSelected(item);

    }

    

    @Override

    public boolean onPrepareOptionsMenu(Menu menu) {

    // TODO Auto-generated method stub

    MenuItem item = menu.findItem(101);

    if (isPlayStarted) {

    item.setTitle("Stop").setIcon(R.drawable.stop);

    } else {

    item.setTitle("Play").setIcon(R.drawable.play);

    }

    return super.onPrepareOptionsMenu(menu);

    }

}

Run the application and you will see the same screens as mentioned above.