CODEWITHSUNDEEP
androidlistview
Apricot
Apricot

Reputation: 3011

Android ListView with Image, text and button

I am trying to build a listview which contains outlet address in 5 lines,along with a status indicator image and a button. The following is the functionality I am trying to build.

  1. When the list text is clicked - I want to open a activity.
  2. When the button (COMP) is clicked - I want to open a different activity.

The image (tickmark) is a status indicator to inform the user whether the activity in a outlet is complete or not.

The list is populated from a SqliteDatabase. On clicking the button, I want to take the reference of the outlet and show different attributes of the outlet.

How do I integrate the button into the list view.

enter image description here

I have written the following code so far:

LISTVIEW.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="wrap_content"
    android:padding="3dp"
    android:background="#FFFFFF"
    android:layout_marginLeft="2dp"
    android:layout_marginBottom="2dp"
    android:descendantFocusability="blocksDescendants"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <ImageView
        android:id="@+id/imageViewFlag"
        android:layout_rowSpan="2"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:scaleType="fitXY"
        android:layout_marginTop="20dp"
        android:foregroundGravity="center"
        android:layout_gravity="center"
        android:background="@drawable/compliance_foreground"
        android:layout_row="0"
        android:layout_column="0" />
        
        <Button
            android:id="@+id/complianceButton"
            android:layout_width="70dp"
            android:layout_height="35dp"
            android:text="COMP"
            android:textSize="12sp"
            ></Button>


    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="5dp"
        >

    <TextView
        android:id="@+id/tvOutletNamealt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlet :"
        android:textSize="15sp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#04031A"
        android:textAllCaps="true"
        android:layout_columnWeight="1"
        android:layout_row="0"
        android:layout_column="1" />


    <TextView
        android:id="@+id/tvOutletAddress1alt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Address1 :"
        android:textSize="12sp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000"
        android:layout_columnWeight="1"
        android:layout_row="1"
        android:layout_column="1" />

    <TextView
        android:id="@+id/tvOutletAddress2alt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Address2 :"
        android:textSize="12sp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000"
        android:layout_columnWeight="1"
        android:layout_row="2"
        android:layout_column="1" />

    <TextView
        android:id="@+id/tvOutletCityalt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="City :"
        android:textSize="12sp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000"
        android:layout_columnWeight="1"
        android:layout_row="3"
        android:layout_column="1" />

    <TextView
        android:id="@+id/tvOutletPhonealt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="PhoneNumber :"
        android:textSize="13sp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000"
        android:layout_columnWeight="1"
        android:layout_row="4"
        android:layout_column="1" />

    </LinearLayout>
    
</LinearLayout>

MainActivity.java

public class show_outlets_alt extends AppCompatActivity {

    SQLiteHelper sqLiteHelper;
    SQLiteDatabase sqLiteDatabase;
    Cursor cursor;
    AltOutletAdapter listAdapterOutlets ;
    String lati;
    String longi;
    String projectName;
    String usrname;
    Button cButton;

    ListView LISTVIEWOUTLETS;

    ArrayList<String> Id_Array;
    ArrayList<String> OutletName_Array;
    ArrayList<String> OutletAddress1_Array;
    ArrayList<String> OutletAddress2_Array;
    ArrayList<String> City_Array;
    ArrayList<String> Phone_Array;
    ArrayList<String> ListViewClickItemArrayOutlets = new ArrayList<String>();
    private String projectID;
    ImageView imageView;

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

        // Set toolbar for this screen
        Toolbar sectoolbar = (Toolbar) findViewById( R.id.secondary_toolbar );
        sectoolbar.setTitle("");
        sectoolbar.setBackground(new ColorDrawable(getResources().getColor(R.color.primary_welcome_color)));
        TextView main_title = (TextView) findViewById(R.id.secondary_toolbar_title);
        main_title.setText("PROJECT LOCATIONS");
        main_title.setTextColor( this.getResources().getColor( R.color.white ) );
        setSupportActionBar( sectoolbar );

        usrname = SaveSharedPreference.getUserName( show_outlets_alt.this );
        projectID =  SaveSharedPreference.getProjName( show_outlets_alt.this );

        LISTVIEWOUTLETS = this.findViewById( R.id.listView2alt );
        imageView = this.findViewById( R.id.imageViewFlag );
        cButton = findViewById( R.id.complianceButton );

        Id_Array = new ArrayList<>();
        OutletName_Array = new ArrayList<>();
        OutletAddress1_Array = new ArrayList<>();
        OutletAddress2_Array = new ArrayList<>();
        City_Array = new ArrayList<>();
        Phone_Array = new ArrayList<>();
        sqLiteHelper = new SQLiteHelper(this);

        LISTVIEWOUTLETS.setOnItemClickListener( new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                projectName = SaveSharedPreference.getProjName( show_outlets_alt.this );
                String outletName = ListViewClickItemArrayOutlets.get(position).toString();
                SaveSharedPreference.setOutletName( getApplicationContext(),outletName );
                Intent intent = new Intent(getApplicationContext(), ShowOutletParams.class);
                startActivityForResult( intent,1 );
            }
        } );

    } //end of oncreate

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult( requestCode, resultCode, data );
        if (resultCode == RESULT_OK) {
            Intent refresh = new Intent( this, ShowDataActivity.class );
            startActivityForResult(refresh,1);
            this.finish();
        }
    }

    @Override
    protected void onResume() {
        ShowSQLiteOutletdata();
        super.onResume();
    }

    private void ShowSQLiteOutletdata() {
        sqLiteDatabase = sqLiteHelper.getWritableDatabase();
        projectID = SaveSharedPreference.getProjName( show_outlets_alt.this );
        cursor = sqLiteDatabase.rawQuery("SELECT * FROM "+SQLiteHelper.TABLE_NAME1+" where pid = (select projectId from "+SQLiteHelper.TABLE_NAME+ " where ProjectName = '"+projectID+"'"+") and Status=1;", null);
        Id_Array.clear();
        OutletName_Array.clear();
        OutletAddress1_Array.clear();
        OutletAddress2_Array.clear();
        City_Array.clear();
        Phone_Array.clear();

        if (cursor != null && cursor.getCount() > 0) {
            if (cursor.moveToFirst()) {
                do {
                    Id_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_ID)));
                    ListViewClickItemArrayOutlets.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_OutletName)));
                    OutletName_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_OutletName)));
                    OutletAddress1_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_outletAddress1)));
                    OutletAddress2_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_outletAddress2)));
                    City_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_city)));
                    Phone_Array.add(cursor.getString(cursor.getColumnIndex(SQLiteHelper.Table1_Column_phone)));

                } while (cursor.moveToNext());
            }
        }

        listAdapterOutlets = new AltOutletAdapter(show_outlets_alt.this,
                Id_Array,
                OutletName_Array,
                OutletAddress1_Array,
                OutletAddress2_Array,
                City_Array,
                Phone_Array
        );
        LISTVIEWOUTLETS.setAdapter(listAdapterOutlets);
        cursor.close();
    } //end of ShowSqliteOutletData

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        Intent backIntent = new Intent(getApplicationContext(), ShowDataActivity.class);
        startActivity(backIntent);
    }
    
}//end of public class

AltOutletAdapter.java

public class AltOutletAdapter extends BaseAdapter {

    Context context;
    ArrayList<String> ID;
    ArrayList<String> O_Name;
    ArrayList<String> O_Address1;
    ArrayList<String> O_Address2;
    ArrayList<String> City;
    ArrayList<String> Phone;
    ArrayList<String> iButton;
    
    public AltOutletAdapter(Context context, ArrayList<String> ID, ArrayList<String> o_Name, ArrayList<String> o_Address1, ArrayList<String> o_Address2, ArrayList<String> city, ArrayList<String> phone) {
        this.context = context;
        this.ID = ID;
        O_Name = o_Name;
        O_Address1 = o_Address1;
        O_Address2 = o_Address2;
        City = city;
        Phone = phone;
    }
    
    @Override
    public int getCount() {
        return ID.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

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

        @Override
    public View getView(int position, View child, ViewGroup parent) {
        AltOutletAdapter.Holder holder;
        LayoutInflater layoutInflater;
        if (child == null) {
            layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            child = layoutInflater.inflate(R.layout.alt_list_view, null);
            holder = new AltOutletAdapter.Holder();
            holder.O_Name = (TextView) child.findViewById(R.id.tvOutletNamealt);
            holder.O_Address1 = (TextView) child.findViewById(R.id.tvOutletAddress1alt);
            holder.O_Address2 = (TextView) child.findViewById(R.id.tvOutletAddress2alt);
            holder.City = (TextView) child.findViewById(R.id.tvOutletCityalt);
            holder.Phone = (TextView) child.findViewById(R.id.tvOutletPhonealt);

            child.setTag(holder);
        } else {
            holder = (AltOutletAdapter.Holder) child.getTag();
        }
        holder.O_Name.setText(O_Name.get(position));
        holder.O_Address1.setText(O_Address1.get(position));
        holder.O_Address2.setText(O_Address2.get(position));
        holder.City.setText(City.get(position));
        holder.Phone.setText(Phone.get(position));

        return child;
    }

    private class Holder {
        TextView O_Name;
        TextView O_Address1;
        TextView O_Address2;
        TextView City;
        TextView Phone;
        Button iButton;
        ImageView imageView;

    }

}

Upvotes: 0

Views: 49

Answers (1)

S T
S T

Reputation: 1134

first I have question. why don't you make Model for Items?

Anyway if you want to make click event by element, just add click listener in your adapter.

so Example is here

  1. add id in your whole layout. ( android:id="@+id/layout" )

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dp"
    android:background="#FFFFFF"
    android:layout_marginLeft="2dp"
    android:layout_marginBottom="2dp"
    android:descendantFocusability="blocksDescendants">

 ...

  2. add click listener in your adapter

    public class AltOutletAdapter extends BaseAdapter {

 Context context;
 ArrayList<String> ID;
 ArrayList<String> O_Name;
 ArrayList<String> O_Address1;
 ArrayList<String> O_Address2;
 ArrayList<String> City;
 ArrayList<String> Phone;
 ArrayList<String> iButton;

 public LinearLayout linearLayout;
 public AltOutletClickListener altOutletClickListener;

 public AltOutletAdapter(Context context, ArrayList<String> ID, ArrayList<String> o_Name, ArrayList<String> o_Address1, ArrayList<String> o_Address2, ArrayList<String> city, ArrayList<String> phone, AltOutletClickListener listener) {
     this.context = context;
     this.ID = ID;
     O_Name = o_Name;
     O_Address1 = o_Address1;
     O_Address2 = o_Address2;
     City = city;
     Phone = phone;
     altOutletClickListener = listener;
 }

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

 @Override
 public Object getItem(int position) {
     return null;
 }

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

 @Override
 public View getView(final int position, View child, ViewGroup parent) {
     AltOutletAdapter.Holder holder;
     LayoutInflater layoutInflater;
     if (child == null) {
         layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
         child = layoutInflater.inflate(R.layout.alt_list_view, null);
         holder = new AltOutletAdapter.Holder();
         holder.O_Name = (TextView) child.findViewById(R.id.tvOutletNamealt);
         holder.O_Address1 = (TextView) child.findViewById(R.id.tvOutletAddress1alt);
         holder.O_Address2 = (TextView) child.findViewById(R.id.tvOutletAddress2alt);
         holder.City = (TextView) child.findViewById(R.id.tvOutletCityalt);
         holder.Phone = (TextView) child.findViewById(R.id.tvOutletPhonealt);

         holder.linearLayout = (LinearLayout) child.findViewById(R.id.layout);
         holder.iButton = (Button) child.findViewById(R.id.complianceButton);

         child.setTag(holder);
     } else {
         holder = (AltOutletAdapter.Holder) child.getTag();
     }
     holder.O_Name.setText(O_Name.get(position));
     holder.O_Address1.setText(O_Address1.get(position));
     holder.O_Address2.setText(O_Address2.get(position));
     holder.City.setText(City.get(position));
     holder.Phone.setText(Phone.get(position));

     holder.linearLayout.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             altOutletClickListener.itemClickListener(v, position);
         }
     });

     holder.iButton.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             altOutletClickListener.imageClickListener(v, position);
         }
     });

     return child;
 }

 private class Holder {
     TextView O_Name;
     TextView O_Address1;
     TextView O_Address2;
     TextView City;
     TextView Phone;
     Button iButton;
     ImageView imageView;
     LinearLayout linearLayout;

 }

 public interface AltOutletClickListener {
     void itemClickListener(View v, int position);

     void imageClickListener(View v, int position);

 }

}

  3. when you call adapter in java, add click event as params.

     ArrayList<String> test = new ArrayList<>();
 AltOutletAdapter altOutletAdapter = new AltOutletAdapter(MainActivity.this, test, test, test, test, test, test, new AltOutletAdapter.AltOutletClickListener() {
     @Override
     public void itemClickListener(View v, int position) {
         // when click layout
     }

     @Override
     public void imageClickListener(View v, int position) {
         // when click button
     }
 });

I just tested and use this.

But I think make Model is better.

ArrayList<String> test = new ArrayList<>();
ArrayList<Model> test = new ArrayList<>(); // it is better

**UPDATE : make Model ** simply, I make your Model Example.

  1. make Model file.

    public class AltOutlet {
 private String name;
 private String address1;
 private String address2;
 private String city;
 private String phone;

 public AltOutlet(String name, String address1, String address2, String city, String phone) {
     this.name = name;
     this.address1 = address1;
     this.address2 = address2;
     this.city = city;
     this.phone = phone;
 }

 public String getName() {
     return name;
 }

 public void setName(String name) {
     this.name = name;
 }

 public String getAddress1() {
     return address1;
 }

 public void setAddress1(String address1) {
     this.address1 = address1;
 }

 public String getAddress2() {
     return address2;
 }

 public void setAddress2(String address2) {
     this.address2 = address2;
 }

 public String getCity() {
     return city;
 }

 public void setCity(String city) {
     this.city = city;
 }

 public String getPhone() {
     return phone;
 }

 public void setPhone(String phone) {
     this.phone = phone;
 }
}

  2. change your adapter

    public class AltOutletAdapter extends BaseAdapter {

 Context context;
 ArrayList<AltOutlet> altOutletArrayList;
 public LinearLayout linearLayout;
 public AltOutletClickListener altOutletClickListener;

 public AltOutletAdapter(Context context, ArrayList<AltOutlet> altOutletList, AltOutletClickListener listener) {
     this.context = context;
     altOutletArrayList = altOutletList;
     altOutletClickListener = listener;
 }

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

 @Override
 public Object getItem(int position) {
     return null;
 }

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

 @Override
 public View getView(final int position, View child, ViewGroup parent) {
     AltOutletAdapter.Holder holder;
     LayoutInflater layoutInflater;
     if (child == null) {
         layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
         child = layoutInflater.inflate(R.layout.alt_list_view, null);
         holder = new AltOutletAdapter.Holder();
         holder.O_Name = (TextView) child.findViewById(R.id.tvOutletNamealt);
         holder.O_Address1 = (TextView) child.findViewById(R.id.tvOutletAddress1alt);
         holder.O_Address2 = (TextView) child.findViewById(R.id.tvOutletAddress2alt);
         holder.City = (TextView) child.findViewById(R.id.tvOutletCityalt);
         holder.Phone = (TextView) child.findViewById(R.id.tvOutletPhonealt);

         holder.linearLayout = (LinearLayout) child.findViewById(R.id.layout);
         holder.iButton = (Button) child.findViewById(R.id.complianceButton);

         child.setTag(holder);
     } else {
         holder = (AltOutletAdapter.Holder) child.getTag();
     }
     holder.O_Name.setText(altOutletArrayList.get(position).getName());
     holder.O_Address1.setText(altOutletArrayList.get(position).getAddress1());
     holder.O_Address2.setText(altOutletArrayList.get(position).getAddress2());
     holder.City.setText(altOutletArrayList.get(position).getCity());
     holder.Phone.setText(altOutletArrayList.get(position).getPhone());

     holder.linearLayout.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             altOutletClickListener.itemClickListener(v, position);
         }
     });

     holder.iButton.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             altOutletClickListener.imageClickListener(v, position);
         }
     });

     return child;
 }

 private class Holder {
     TextView O_Name;
     TextView O_Address1;
     TextView O_Address2;
     TextView City;
     TextView Phone;
     Button iButton;
     ImageView imageView;
     LinearLayout linearLayout;

 }

 public interface AltOutletClickListener {
     void itemClickListener(View v, int position);

     void imageClickListener(View v, int position);

 }

}

  3. when you add item in java file, use Model

     AltOutlet altOutlet = new AltOutlet("test", "address1", "address2", "city", "phone");
 altOutlets.add(altOutlet);

 AltOutletAdapter altOutletAdapter = new AltOutletAdapter(MainActivity.this, altOutlets, new AltOutletAdapter.AltOutletClickListener() {
     @Override
     public void itemClickListener(View v, int position) {
         // when click layout
     }

     @Override
     public void imageClickListener(View v, int position) {
         // when click button
     }
 });

Upvotes: 1

Related Questions