Use Ratingbar with numbering next to Android

Asked

Viewed 205 times

0

Does anyone know how to use the Rating bar with the numbering on the side? The way the ifood uses.

I tried to insert ratingBar with only one star but it doesn’t work, and as an image inside an Arraylist also didn’t work.

Tela do ifood

Listerssactivity.java distributors

package com.pedido.meu.telas_meu_pedido;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;

public class ListaDistribuidoresActivity extends AppCompatActivity {

    ItemAdapter adapter;
    ArrayList<Integer> idImages;
    ArrayList<String> nameList;
    ArrayList<Integer> starImage;

    int ids[]={R.mipmap.ic_distribuidor};
    String names[]={"DISTRIBUIDOR"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lista_distribuidores);
        ListView listViewDistribuidores = findViewById(R.id.txtListViewDistribuidores);

        idImages = new ArrayList<>();
        idImages = getList();
        starImage = new ArrayList<>();
        starImage = getListStar();
        nameList = new ArrayList<>();
        nameList = getNameList();
        ItemAdapter adapter = new ItemAdapter(ListaDistribuidoresActivity.this, idImages,nameList, starImage);
        listViewDistribuidores.setAdapter(adapter);
        listViewDistribuidores.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id)
            {
                Toast.makeText(ListaDistribuidoresActivity.this, "Distribuidor " + nameList.get(position) + "selecionado", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private ArrayList<Integer> getListStar()
    {
        starImage = new ArrayList<>();
        starImage.add(R.mipmap.ic_star_round);
        return  starImage;
    }

    private ArrayList<String> getNameList()
    {
        nameList = new ArrayList<>();
        nameList.add("DISTRIBUIDOR 1");
        nameList.add("DISTRIBUIDOR 2");
        nameList.add("DISTRIBUIDOR 3");
        nameList.add("DISTRIBUIDOR 4");
        return  nameList;
    }

    private ArrayList<Integer> getList()
    {
        idImages = new ArrayList<>();
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        return idImages;
    }

 /*   @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.activity_simple_list_distribuidores,menu);
        return super.onCreateOptionsMenu(menu);
    } */
}

Itemadapter.java

package com.pedido.meu.telas_meu_pedido;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class ItemAdapter extends BaseAdapter
{
    private Context context;
    private ArrayList<Integer> listaId;
    private ArrayList<String> listaNome;
    private ArrayList<Integer> listaStar;

    public ItemAdapter(Context context, ArrayList<Integer> listaId, ArrayList<String> listaNome, ArrayList<Integer> listaStar)
    {
        this.context = context;
        this.listaId = listaId;
        this.listaNome=listaNome;
        this.listaStar=listaStar;
    }

    public ItemAdapter(ListaProdutosActivity listaProdutosActivity, ArrayList<Integer> idImages, ArrayList<String> nameList)
    {
        this.context=listaProdutosActivity;
        this.listaId=idImages;
        this.listaNome=nameList;
    }

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

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

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

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

        if (convertView == null)
        {
            convertView = View.inflate(context, R.layout.list_item_produtos, null);
        }
        ImageView img = convertView.findViewById(R.id.imgListItemProduto);
        TextView tv =  convertView.findViewById(R.id.txtListItemProduto);
        img.setImageResource(listaId.get(position));
        tv.setText(listaNome.get(position));

        return convertView;
    }
}

Java image.

package com.pedido.meu.telas_meu_pedido;

public class Imagem
{
    private int imageId;
    private String imageName;

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getImageName() {
        return imageName;
    }

    public void setImageName(String imageName) {
        this.imageName = imageName;
    }
}

activity_lista_distribuidores.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.pedido.meu.telas_meu_pedido.ListaDistribuidoresActivity"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_distribuidor"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/txtTitleListaDistribuidores"
        android:gravity="center"
        android:textColor="@color/colorPrimary"
        android:textStyle="bold"
        android:textSize="14pt"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="20dp"
        />

    <ListView
        android:id="@+id/txtListViewDistribuidores"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>


</LinearLayout>

list_item_distributor.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <ImageView
        android:id="@+id/imgListaProdutos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@mipmap/ic_acai"
        android:layout_marginLeft="8dp"
        />

    <TextView
        android:id="@+id/txtDistribuidor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="@+id/imgListaProdutos"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_star_round"
        android:layout_alignParentTop="@+id/txtDistribuidor"
        />

</RelativeLayout>
android android-layout layout icon

2 answers

1

Whoa, whoa, whoa, whoa? ifood works as follows: in this image you have sent, it is always a static star (even an imageView), the numbering (Textview) is a return of the API (which probably returns only an int for them to set the text). The star is always static.

inserir a descrição da imagem aqui

Detailed implementation with the Rating bar

Now, click on the rating and see that a more detailed screen, with 5 stars, now yes the number of stars will be based on the INT that returns from the API, being possible to implement by the Rating bar.

inserir a descrição da imagem aqui

1


I was able to implement this solution, and as Leonardo said above, I needed a static image and a Textview to work.

Follow functional code below:

Listerssactivity.java distributors

package com.pedido.meu.telas_meu_pedido;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;

public class ListaDistribuidoresActivity extends AppCompatActivity {

    ItemAdapter adapter;
    ArrayList<Integer> idImages;
    ArrayList<String> nameList;
    ArrayList<Integer> starImage;

    int ids[]={R.mipmap.ic_distribuidor};
    String names[]={"DISTRIBUIDOR"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lista_distribuidores);
        ListView listViewDistribuidores = findViewById(R.id.txtListViewDistribuidores);
        idImages = new ArrayList<>();
        idImages = getList();
        starImage = new ArrayList<>();
        starImage = getListStar();
        nameList = new ArrayList<>();
        nameList = getNameList();
        ItemAdapter adapter = new ItemAdapter(ListaDistribuidoresActivity.this, idImages,nameList, starImage);
        listViewDistribuidores.setAdapter(adapter);
        listViewDistribuidores.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id)
            {
                Toast.makeText(ListaDistribuidoresActivity.this, "Distribuidor " + nameList.get(position) + "selecionado", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private ArrayList<Integer> getListStar()
    {
        starImage = new ArrayList<>();
        starImage.add(R.mipmap.ic_star_round);
        return  starImage;
    }

    private ArrayList<String> getNameList()
    {
        nameList = new ArrayList<>();
        nameList.add("DISTRIBUIDOR 1");
        nameList.add("DISTRIBUIDOR 2");
        nameList.add("DISTRIBUIDOR 3");
        nameList.add("DISTRIBUIDOR 4");
        return  nameList;
    }

    private ArrayList<Integer> getList()
    {
        idImages = new ArrayList<>();
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        idImages.add(R.mipmap.ic_distribuidor);
        return idImages;
    }
}

Itemadapter.java

package com.pedido.meu.telas_meu_pedido;

import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class ItemAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<Integer> listaId;
    private ArrayList<String> listaNome;
    private ArrayList<Integer> listaStar;

    public ItemAdapter(Context context, ArrayList<Integer> listaId, ArrayList<String> listaNome, ArrayList<Integer> listaStar) {
        this.context = context;
        this.listaId = listaId;
        this.listaNome = listaNome;
        this.listaStar = listaStar;
    }

    public ItemAdapter(ListaProdutosActivity listaProdutosActivity, ArrayList<Integer> idImages, ArrayList<String> nameList) {
        this.context = listaProdutosActivity;
        this.listaId = idImages;
        this.listaNome = nameList;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        int view = 0;

        if (convertView == null)
        {
            if(view == R.layout.list_item_produtos)
            {
                convertView = View.inflate(context, R.layout.list_item_produtos, null);
                ImageView imgProducts = convertView.findViewById(R.id.imgListItemProduto);
                TextView textViewProducts = convertView.findViewById(R.id.txtListItemProduto);
                imgProducts.setImageResource(listaId.get(position));
                textViewProducts.setText(listaNome.get(position));
            }
            else
            {
                convertView = View.inflate(context, R.layout.list_item_distribuidor, null);
                ImageView imgDistributor = convertView.findViewById(R.id.imgStarDistributor);
                TextView textDistribuidor = convertView.findViewById(R.id.txtDistribuidor);
                imgDistributor.setImageResource(listaStar.get(0));
                textDistribuidor.setText(listaNome.get(position));
            }
        }
        return convertView;
    }
}

Java image.

package com.pedido.meu.telas_meu_pedido;

public class Imagem
{
    private int imageId;
    private String imageName;

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getImageName() {
        return imageName;
    }

    public void setImageName(String imageName) {
        this.imageName = imageName;
    }
}

activity_lista_distribuidores.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.pedido.meu.telas_meu_pedido.ListaDistribuidoresActivity"
    >

    <ImageView
        android:id="@+id/imgTitleListDistributor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_distribuidor"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:contentDescription="@string/txtTitleListaDistribuidores"
        />

    <TextView
        android:id="@+id/txtTitleDistributor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/txtTitleListaDistribuidores"
        android:gravity="center"
        android:textColor="@color/colorPrimary"
        android:textStyle="bold"
        android:textSize="14pt"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="20dp"
        />

    <ListView
        android:id="@+id/txtListViewDistribuidores"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>

</LinearLayout>

list_item_distributor.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <ImageView
        android:id="@+id/imgListaDistribuidor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@mipmap/ic_distribuidor"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        />

    <TextView
        android:id="@+id/txtDistribuidor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="122dp"
        android:layout_marginLeft="122dp"
        android:layout_marginRight="-150dp"
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/imgStarDistributor"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@mipmap/ic_star_round"
        android:layout_marginLeft="295dp"
        android:layout_marginTop="35dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4.2"
        android:layout_marginLeft="320dp"
        android:layout_marginTop="35dp"
        android:textStyle="bold"
        />

</RelativeLayout>

Browser other questions tagged android android-layout layout icon

You are not signed in. Login or sign up in order to post.