Guide to implementing Horizontal scrollable Buttons/TextViews that are accentuated with an elliptical highlight upon clicking

I am currently working on an android app and I need to implement horizontal scrolling text Views that highlight upon being clicked with an elliptical colored shape in the background. The background shape should be removed when another Text View is selected, making the new selection highlighted. It's similar to Radio Buttons but with a unique style.

You can view the example image below :-

click here to see the image

I'm unsure whether these elements should be implemented as scrolling TextViews or Buttons.

Thank you in advance for any help provided.

Answer №1

public final class SelectRecyclerAdapter extends RecyclerView.Adapter<SelectRecyclerAdapter.Holder> {


private int selectedPos = -1;
private ArrayList<String> dataList;
private OnSelectListener listener;

public FilterRecyclerAdapter(ArrayList<String> list, OnFilterClickListener callback) {
    dataList = list;
    listener = callback;
}

@Override
public FilterRecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_textview, parent, false);

    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(Holder holder, int position) {
    holder.textView.setText(dataList.get(position));

    if (position == selectedPos) {
        holder.textView.setBackgroundColor(Color.RED);
    } else {
        holder.textview.setBackgroundColor(Color.TRANSPARENT);
    }

    // You can use selector drawable resource and call holder.textView.setSelected(true or false);
}

@Override
public int getItemCount() {
    return dataList.size();
}


class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {

    private TextView textView;

    Holder(View itemView) {
        super(itemView);

        textView = (TextView) itemView;
    }

    @Override
    public void onClick(View view) {
        if (listener == null) {
            return;
        }

        int position = getAdapterPosition();
        if (selectedPos == position) {
            return;
        }

        selectedPos = position;

        YourModel item = dataList.get(position);
        listener.onSelect(getAdapterPosition(), item);

        notifyDataSetChanged();
    }
}

public void getSelectedPosition(){
  return selectedPos;
}

public boolean hasSelection(){
   return selectedPos != -1;
}

public interface OnSelectionListener {
    void onSelect(int position, YourModel model);
}
}

This is a customized adapter for your RecyclerView implementation.

You may refer to online resources for examples of horizontal RecyclerView scrolling. Additionally, consider attaching LinearSnapHelper to the RecyclerView for an improved user experience.

Sample inflated layout :

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:gravity="center"/>

If you intend to use View.setSelected(value), create a custom selector drawable with selectedState=true and no defined state items inside. Alternatively, set your shape to background instead using Color.RED;

Best of luck!

Emre

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing a div element while ensuring that it does not obscure any of its contents

There is a challenge I'm facing that I need help solving. I am using a shop script that only allows me to edit the CSS file. Within this setup, there is a div with a background image and inside there is a normal image: <style type="text/css"> ...

Using jQuery and CSS to select a specific class based on its position in

<div class="outercontainer"> <div class="paddedcontainer"> <div class="pageheader"> <div class="titlestyle"><h2>Unique Title1</h2></div> </div> <div class="row"> <div class="grouped"> ...

Thinking about passing the array as a parameter from XML to a Java file?

Can you provide guidance on how to pass an array as a parameter in XML and then utilize it later in a Java file? For example: // I am looking to pass both 'Asia' and 'Africa' as parameters. <suite name="Parameterization Test Suite ...

Feeling lost when it comes to CSS selectors

Alright, I need some help with this code snippet: <div id="carousel"> <div class="active"><img id="pic1" src="http://i.imgur.com/gWGqZly.png" /></div> <div><img id="pic2" src="http://i.imgur.com/mC1FD81.png" />& ...

Modify the button background image, text, and shape simultaneously when hovered

Can a button's background image or text change, along with its shape, when hovered over using CSS, JS, or both? For example, if I have a button displaying a checkmark symbol ✓ and I want it to transform from a circle shape to a rectangle shape, and ...

Placing a circular frame around a rounded image

How can I create a circular border around my bitmap? To make my bitmap round, I have been using the following code: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap ...

Angular 4 animation for smooth sliding down

Attempting to add animation to my webpage has presented a challenge: I have a content div on my page, along with a button that triggers the opening of another div above the content. My goal is to have this top div fade and slide into view while simultan ...

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

li experiencing a background width problem due to extended text

Check out this code snippet with a problem In the image below, you can see that the background of the li element with more text is larger compared to the others. It's important to note that the <ul> is scrollable. I've experimented with va ...

Guide to modifying the background image color using CSS

Currently, I am attempting to modify the color of an image using CSS. This particular image is a key element in the layout of my website. To get a better understanding, you can view a screenshot of the element here: , and see an example post containing the ...

Enhancing buttons with CSS styles

Check out the demo .special_button:active { box-shadow: 0px 3px 3px -2px #777; padding: 3px; width:80px; } .button_container { border: 1px solid; width: 100px; padding: 7px; } I'm experimenting with creating spec ...

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

Utilizing CSS and Vue to dynamically style elements based on hover events for rating displays

Looking for a simple solution here. I'm working on coding a 5-star rating system. I have an array set up with 5 possible ratings: const ratingsArray = [ { name: 'rating1', ratingValue: 20, isEnabled: ref(false) }, { na ...

Utilizing ASP.net style sheets to enhance the layout and positioning of web controls

Creating websites is new to me. I found a free CSS template online and incorporated it into my project. Take a look at this screenshot: . I added some ASP web controls (buttons and labels) to the page by dragging and dropping them from the toolbox, using ...

Tips for assigning unique IDs to each item in a ListView

When I fetch information from the database, each row has a unique ID that I want to associate with a string in a listview. However, I want this ID to be invisible so that when I click on an item in the listview, it will take me to another activity that dis ...

Is it possible to manipulate divs with CSS media queries for positioning?

I currently have a footer displayed on the desktop version of my website, which appears like this: https://i.sstatic.net/ZMUZj.png However, for tablets (with a width less than or equal to 960px), I need to adjust the layout using media queries to look li ...

Activate and deactivate menu buttons with PushApps

I configured my app to utilize the notifications API from , but I'm facing difficulties in setting up a button to register and unregister devices for enabling and disabling push notifications through the menu settings. <menu xmlns:android="http:// ...

Displaying a Snackbar together with a Toast

I've incorporated Google's design support library to display Snackbars. However, when I compile the apk and test it on my Nexus 5 phone, both the Snackbar and a Toast message appear. Interestingly, running the app directly from Android Studio onl ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

Creating angled text on a canvas

Is there a way for me to draw text on canvas at an angle, as shown in the image with a Green rectangle? I tried the following code.... but it only allows me to write text in a straight manner and not at an angle. Bitmap bmpLayered = Bitmap.createBitmap(b ...