Embed RatingBar in AlertDialog

twlkyao picture twlkyao · Dec 23, 2013 · Viewed 12.3k times · Source

I have a ListView contains RatingBar to indicate something, if you click the item of the LisView it pop a Dialog(AlertDialog) including a RatingBar, now I wonder:

  1. How to custom the RatingBar that shown in the Dialog(The code below does not work, I think it is becase of final, that makes it can not be customiezed).
  2. How to pass the rating get from the Dialog RatingBar to the ListView RatingBar.

My current code is:

final RatingBar ratingBar = new RatingBar(getApplicationContext());
ratingBar.setRating(0);
ratingBar.setStepSize(1);
ratingBar.setNumStars(2);
builder.setTitle(R.string.alertdialog_title)
.setIcon(android.R.drawable.ic_dialog_info)
.setView(ratingBar)
.setPositiveButton("Submit", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int which) {
        // do something.
    }
})              
.setNegativeButton("Cancel", null);

Edit1
I have shown the rating on the item of listview with the fileListAdapter(an instance of FileListAdapater as code1). Now the problems are:

  1. The rating changes after the dialog clicked, but it is not the item that I have clicked, how to map the item with the rating(on Dialog) change.
  2. How to store the rating, everytime the ListView refreshs, the rating disappears.

I have put the code of dialog on the onItemClickListener as code2.
code1:

public class FileListAdapter extends BaseAdapter {
private Context context;
private ArrayList<File> files; // The ArrayList to store the files
private boolean isSDcard; // To indicate whether the file is the SDcard
private LayoutInflater mInflater; // The LayoutInflater

public FileListAdapter (Context context, ArrayList<File> files, boolean isSDcard) {
    this.context = context;
    this.files = files;
    this.isSDcard = isSDcard;
    mInflater = LayoutInflater.from(context);
}

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

@Override
public Object getItem (int position) {
    return files.get(position);
}

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

@Override
public View getView (int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder;
    /**
     * The view is not initialized,initialize the view according to the layout file,
     * and bind it to tag.
     */
    if(convertView == null) { 
        viewHolder = new ViewHolder();
        convertView = mInflater.inflate(R.layout.file_list_item, null); // Inflate from the layout file
        convertView.setTag(viewHolder);
        viewHolder.file_title = (TextView) convertView.findViewById(R.id.file_title); // Find the file_title textview
        viewHolder.file_icon = (ImageView) convertView.findViewById(R.id.file_icon); // Find the file_icon imageview
        viewHolder.file_path = (TextView) convertView.findViewById(R.id.file_path); // Find the file_path textview
        viewHolder.encrypt_level = (RatingBar) convertView.findViewById(R.id.encrypt_level); // Find the rating_bar view
    } else {
          viewHolder = (ViewHolder) convertView.getTag();
    }
    File file = (File) getItem(position);
    if(position == 0 && !isSDcard) { // Add the back to SDcard item
        viewHolder.file_title.setText(R.string.back_to_sdcard);
        viewHolder.file_icon.setImageResource(R.drawable.sdcard_icon);
        viewHolder.file_path.setText(Environment.getExternalStorageDirectory().toString());
        viewHolder.encrypt_level.setRating(0);
    }
    if(position == 1 && !isSDcard) { // Add the back to parent item
        viewHolder.file_title.setText(R.string.back_to_parent);
        viewHolder.file_icon.setImageResource(R.drawable.folder_up_icon);
        viewHolder.file_path.setText(file.getPath());
        viewHolder.encrypt_level.setRating(0);
    } else { // The current filepath is the SDcard or the position is neither 0 nor 1
          String fileName = file.getName();
          viewHolder.file_title.setText(fileName);
          viewHolder.file_path.setText(file.getPath());
          viewHolder.encrypt_level.setRating(0);
          if(file.isDirectory()) { // The variable file is a directory
              viewHolder.file_icon.setImageResource(R.drawable.folder_icon);
          } else { // The variable file is a file
              viewHolder.file_icon.setImageResource(R.drawable.file_icon);
          }
      }

 return convertView;
}
    private class ViewHolder {
        private ImageView file_icon; // The icon of the file
    private TextView file_title; // The title of the file
    private TextView file_path; // The path of the file
    private RatingBar encrypt_level; // The encrypt level of the file
    }
}

code2:

final Dialog rankDialog = new Dialog(MainActivity.this, R.style.FullHeightDialog);
rankDialog.setContentView(R.layout.rank_dialog);
rankDialog.setCancelable(true);
final RatingBar ratingBar = (RatingBar)rankDialog.findViewById(R.id.dialog_ratingbar);

TextView text = (TextView) rankDialog.findViewById(R.id.rank_dialog_text1);
text.setText("Set Rating!");

Button updateButton = (Button) rankDialog.findViewById(R.id.rank_dialog_button);
updateButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d(Tag, ratingBar.getRating() + "");
        RatingBar ratebar = (RatingBar) findViewById(R.id.encrypt_level); // The RatingBar in the ListView.
    ratebar.setRating(ratingBar.getRating()); // Change the rating.
    rankDialog.dismiss();
}
});
rankDialog.show();

Answer

Praveen Sharma picture Praveen Sharma · Dec 23, 2013

Try custom dialog with rating bar.

Like

Button rankBtn = (Button) findViewById(R.id.rank_button);
rankBtn.setOnClickListener(new View.OnClickListener() {
     public void onClick(View v) {
        rankDialog = new Dialog(MyActivity.this, R.style.FullHeightDialog);
        rankDialog.setContentView(R.layout.rank_dialog);
        rankDialog.setCancelable(true);
        ratingBar = (RatingBar)rankDialog.findViewById(R.id.dialog_ratingbar);
        ratingBar.setRating(userRankValue);

        TextView text = (TextView) rankDialog.findViewById(R.id.rank_dialog_text1);
        text.setText(name);

        Button updateButton = (Button) rankDialog.findViewById(R.id.rank_dialog_button);
        updateButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                rankDialog.dismiss();
            }
        });
        //now that the dialog is set up, it's time to show it    
        rankDialog.show();                
    }
});

and here is layout/rank_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="2dip">  

     <TextView android:text="Doctor's Name" android:id="@+id/rank_dialog_text1"
         android:textSize="24dp" android:layout_marginTop="10dp"
         android:layout_width="wrap_content" android:layout_height="wrap_content" 
         android:layout_gravity="center"/>

     <RatingBar 
         android:layout_marginTop="10dp" android:layout_marginBottom="10dp"
         android:layout_width="wrap_content" android:layout_height="wrap_content"
         android:clickable="true"
         android:id="@+id/dialog_ratingbar" android:layout_gravity="center"
         android:numStars="5" android:stepSize="1.0" android:rating="2"
         android:isIndicator="false"/>

     <Button android:id="@+id/rank_dialog_button" 
         android:layout_height="wrap_content" 
         android:text="Update"  android:focusable="false"
         android:layout_margin="5dip" android:textColor="#FFF8C6"
         android:textSize="20dip" android:layout_width="fill_parent" />

</LinearLayout>

values/my_style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="FullHeightDialog" parent="android:style/Theme.Dialog">
  <item name="android:windowNoTitle">true</item>
  </style>
</resources>

for more help visit this tutorial