Monday, November 18, 2013

Customise ListView android

1.Create a simple xml layout for the listView item
for example : 
file name : /res/layout/my_dlg.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:gravity="center"
    android:orientation="horizontal" >

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>


2.now we need a custome ArrayAdapter for the listview. so create a class which extends ArrayAdapter

for example : 

file name : src/com/example/customlist/MyAdapter.java

public class MyAdapter extends ArrayAdapter<MyData> {
Context context;
    int layoutResourceId;  
    Drawable bm=null;
    MyHolder holder = null;
    ArrayList<MyData> data = null;
public MyAdapter(Context context, int resource, ArrayList<MyData> data) {
super(context, resource,data);
this.layoutResourceId = resource;
     this.context = context;
     this.data = data;

}

   static class MyHolder
   { //this class hold the ui elements in each list item
    //we have one image view and textview in our layout
       ImageView imageView;
       TextView textView;
   }
   //we need to override the following method in arrayadapter
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
       View row = convertView;
       //row is our listitem view
       if(row == null)
       {
           LayoutInflater inflater = ((Activity)context).getLayoutInflater();
         
           //assign custome layout to the view row,that is our listitem view
           row = inflater.inflate(layoutResourceId, parent, false);
           //create a new holder for list item
           holder = new MyHolder();
           //initialize ui elements in the layout
           holder.textView= (TextView)row.findViewById(R.id.textView1);
           holder.imageView=(ImageView)row.findViewById(R.id.imageView1);
           row.setTag(holder);
       }
       else
       {
           holder = (MyHolder)row.getTag();
       }
       //create MyData object for the current list item.
       final MyData rest = data.get(position);
       //set image of imageview
       holder.imageView.setImageResource(rest.imageId);
       //set text of textview
       holder.textView.setText(rest.string);
       return row;
   }
}
//this class hold the data to be linked with each list item
class MyData{
int imageId;
String string;

public MyData(int imageId,String string){
this.imageId=imageId;
this.string=string;
}

}


step 3.
create main layout

example :

file name : /res/layout/activity_main.xml

<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=".MainActivity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ListView>

</RelativeLayout>



step 4

now we want to initialize our listview and set data of each lis item in the listview
for doing this, open your activity class, (may be MainActivity.java) and do the following

example :

file name : /src/com/example/customlist/MainActivity.java

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//create listview
ListView listView=(ListView)findViewById(R.id.listView1);
//create arraya list to store list item data , each list item contain MyData
ArrayList<MyData> data=new ArrayList<MyData>();
//create adapter for listview
MyAdapter adapter=new MyAdapter(this, R.layout.my_dlg, data);
//set listview adapter
listView.setAdapter(adapter);

//add data to array list, which should be displayed on list view

for(int i=0;i<5;i++){

                        //you can add diffent images in each list. just create an array of image resource id
                        //and use it here ,like imagId[i]; ..
data.add(new MyData(R.drawable.ic_launcher,"this is item "+i+1));
}

//notify the listview that, the content of arra is changed
adapter.notifyDataSetChanged();

//thats all



}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

step 5

thats all...sorry for my bad english

Sunday, November 17, 2013

customize dialog box in android

STEP 1
create xml layout for the Dialog
example :
file name and path  : /res/layout/my_dlg.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" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>


STEP 2

Create Dialog box

code given below
public void showDlg(){
//create dialog object and initialize
Dialog dialog=new Dialog(this,android.R.style.Theme_DeviceDefault_Dialog);
//set title of dialog
dialog.setTitle("My Tiltle");
//set Layout of the dialog
dialog.setContentView(R.layout.my_dlg);

//Intialize UI elements inside the layout
final EditText editText=(EditText)dialog.findViewById(R.id.editText1);
Button button=(Button)dialog.findViewById(R.id.button1);
final TextView textView=(TextView)dialog.findViewById(R.id.textView1);

//some actions

button.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
String hi="editText="+editText.getText().toString();

textView.setText(hi);

}
});

//finally show the dialog

dialog.show();
}



STEP 3
thats all...