android studio listview with relativelayout

Creating an Android Custom Spinner with Images and Text Using ListView and RelativeLayout

Hi and welcome to another tutorial from Codingdemos! In this tutorial, you will learn how to create an Android custom spinner with images and text using ListView and RelativeLayout.

To start with, we need a new project in Android Studio. So, go ahead and create a new project by clicking on 'Start a new Android Studio project' option under the 'Start a new project' section.

Once your project is created, you will have to add a new activity to your project. You can do this by going to File -> New -> Activity -> BlankActivity and then choose 'Empty Activity' as the template.

Now, let's create our custom spinner with images and text. We will use ListView for this purpose. So, go ahead and add a new layout file named 'spinner.xml' inside the res/layout directory of your project.

In the spinner.xml file, we will define our ListView and set its layout parameters to RelativeLayout. Here is how it looks:

```xml

android:layout_width='match_parent'

android:layout_height='match_parent'>

android:id='@+id/spinner_list'

android:layout_width='fill_parent'

android:layout_height='wrap_content' />

```

Now, let's create our custom list item layout file named 'spinner_item.xml' inside the res/layout directory of your project. In this file, we will define a RelativeLayout that contains two TextViews and an ImageView.

Here is how it looks:

```xml

android:layout_width='fill_parent'

android:layout_height='wrap_content'>

android:id='@+id/spinner_icon'

android:layout_width='30dp'

android:layout_height='30dp'

android:layout_alignParentLeft='true' />

android:id='@+id/spinner_text'

android:layout_width='wrap_content'

android:layout_height='wrap_content'

android:textSize='20sp'

android:layout_toRightOf='@id/spinner_icon' />

```

Now, let's create our adapter class named 'SpinnerAdapter.java'. This class will handle the data for our ListView and set its items.

Here is how it looks:

```java

public class SpinnerAdapter extends ArrayAdapter {

private Context context;

private List spinnerItems;

public SpinnerAdapter(Context context, int resource, List spinnerItems) {

super(context, resource, spinnerItems);

this.context = context;

this.spinnerItems = spinnerItems;

}

@Override

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

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

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

ImageView icon = (ImageView) rowView.findViewById(R.id.spinner_icon);

TextView text = (TextView) rowView.findViewById(R.id.spinner_text);

SpinnerItem item = spinnerItems.get(position);

icon.setImageResource(item.getImageId());

text.setText(item.getText());

return rowView;

}

```

Now, let's create our data class named 'SpinnerItem.java'. This class will hold the data for each item in our ListView.

Here is how it looks:

```java

public class SpinnerItem {

private int imageId;

private String text;

public SpinnerItem(int imageId, String text) {

this.imageId = imageId;

this.text = text;

}

public int getImageId() {

return imageId;

}

public String getText() {

return text;

}

```

Now, let's create an array of SpinnerItem objects and set it to our ListView.

Here is how it looks:

```java

SpinnerAdapter adapter = new SpinnerAdapter(this, R.layout.spinner_item, spinnerItems);

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

listView.setAdapter(adapter);

```

Finally, we need to handle the item click event for our ListView. When you tap on any of the items in the ListView, an Android toast message will appear on the screen.

Here is how it looks:

```java

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView parent, View view, int position, long id) {

SpinnerItem item = spinnerItems.get(position);

Toast.makeText(getBaseContext(), item.getText(), Toast.LENGTH_SHORT).show();

}

});

```

That's it! Now you have an Android custom spinner with images and text using ListView and RelativeLayout. When you run this app, you will see a list of country names and flags, when you tap on any of the items an Android toast message will appear on the screen.

I hope this tutorial has been helpful. If you have any questions or need further clarification, please don't hesitate to ask. Thank you for watching!

Android studio listview with relativelayout