Custom List View with Image View and Text View in android


 Are you looking for how to build listview and Imageview in Android then go this article, here Step by step process of listview and Image view  

  1. Create the android new project
    Go to file--->new-->your project name-->next-->Select on phone & tablet-->next-->
    Empty Activity-->next-->Activity name & layout name-->finish
2. Go to activity_main.xml file
3 .Drag the list View
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
   
android:paddingBottom="@dimen/activity_vertical_margin"
   
android:paddingLeft="@dimen/activity_horizontal_margin"
   
android:paddingRight="@dimen/activity_horizontal_margin"
   
android:paddingTop="@dimen/activity_vertical_margin"
   
tools:context="com.ace.customlist.MainActivity">
    <
android.support.v7.widget.CardView
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:id="@+id/cv"
       
>

    <
ListView
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:id="@+id/listView"
       
android:layout_alignParentTop="true"
       
android:layout_alignParentLeft="true"
       
android:layout_alignParentStart="true" />
    </
android.support.v7.widget.CardView>
</
RelativeLayout>

4. Go to MainActivity.java class and get the id from list view
MainActivity.java
package awa.myapplication;



import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.widget.ListView;



public class MainActivity extends AppCompatActivity {

ListView mylist;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //get the id from listView

        mylist=(ListView)findViewById(R.id.listView);

        //store the group of values from String array

        String[] names={"Sachin","Sehwag","Dhoni","Raina","kohili"};



        Integer[] pics={R.drawable.sachin,R.drawable.sehwag,R.drawable.dhoni,R.drawable.raina,R.drawable.kohili};

        CustomAdapter customAdapter=new CustomAdapter(this,names,pics);//pass the parameters

        //create the Constructor from inside CustomAdapter class

        //display the value from listView

        mylist.setAdapter(customAdapter);

    }

}

5.  Copy the some image files inside android Drawable
6.  Create the new layout  inside res folder   you can follow the steps
      Select the res folder--> layout--->right Click--> new-- >layout resource file-->file name--ok
7. Go to customadapter  xml  file drag the one ImageView and TextView
<?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_height="match_parent">



    <ImageView

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:id="@+id/imageView" />



    <TextView

        android:paddingTop="40dp"

        android:gravity="center"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView" />

</LinearLayout>

8. Get the id's from  textView  and  ImageView  inside getView method

9. You can create the new java class and extend the Array Adapter
CustomAdapter.java
package awa.myapplication;



import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;



/**

 * Created by awa on 8/2/2016.

 */

public class CustomAdapter extends ArrayAdapter<String> {

    String[] names; Integer[] pics;

    Context context;

    public CustomAdapter(Context context, String[] names, Integer[] pics) {

        super(context,R.layout.customadapter, names);

        //using the values from global using of this key word

        this.names=names;

        this.pics=pics;

        this.context=context;

    }



    @Override

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

        LayoutInflater layoutInflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        convertView=layoutInflater.inflate(R.layout.customadapter,null);

        //get the id's from customadapter xml file

        TextView tv=(TextView)convertView.findViewById(R.id.textView);

        ImageView img=(ImageView)convertView.findViewById(R.id.imageView);

        //display the value

        tv.setText(names[position]);

        img.setBackgroundResource(pics[position]);

        return convertView;

    }

}

Custom List View with Image View and Text View in android Part 1

   



Custom List View with Image View and Text View in android Part 2


   


Tags: Custom ListView with ImageView and TextView In Android, android listview, android textview

No comments:

Powered by Blogger.