web-dev-qa-db-fra.com

Comment puis-je définir la couleur de Android? (Pas la couleur des étoiles mais la FRONTIÈRE)

Je suis un Android débutant et je veux faire ma barre de notation personnalisée.

Avertissement: ce n'est pas un doublon. parce que tous les messages que j'ai lus demandent comment changer les couleurs de l'étoile et comment supprimer le trait. Ce n'est PAS ce que je veux. Je veux avoir le trait et pouvoir changer la couleur de la bordure.

Avec un trait transparent et jaune à vide, et un fond jaune et un trait pour moitié et rempli.

Je ne veux PAS utiliser pngs. J'ai déjà les miennes mais elles sont trop petites. Je ne veux tout simplement pas demander au concepteur d'en créer de nouveaux si je peux faire des étoiles en utilisant uniquement des attributs XML et des dessinables.

<RatingBar
          Android:id="@+id/thread_rating"
          Android:layout_width="wrap_content"
          Android:layout_height="wrap_content"
          Android:isIndicator="true"
          Android:numStars="5"
          Android:progressBackgroundTint="@color/gray"
          Android:progressTint="@color/gold"
          Android:rating="2.5"
          Android:secondaryProgressTint="@color/gray"
          Android:stepSize="0.5"
          style="?android:attr/ratingBarStyleSmall"
          />

J'y travaille avec un autre ingénieur. Il a également écrit du code dans un fichier Java

private void setRatingBarStart(RatingBar rating_bar) {
LayerDrawable stars = (LayerDrawable) rating_bar.getProgressDrawable();
stars.getDrawable(2)
    .setColorFilter(getResources().getColor(R.color.gold),
        PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for empty stars

[Alors maintenant, il a un fond gris, jaune pour rempli et PAS de trait maintenant.

enter image description here

Et je veux qu'il ait un fond transparent, un trait jaune et un jaune pour rempli. Ressemble à ça enter image description here

Je sais déjà comment rendre le fond transparent et le rendre jaune. Je ne sais tout simplement pas comment définir la couleur du trait. Merci beaucoup!!!!

javaandroidxmldrawableratingbar
29
husky love

Mettez toutes les couleurs dessinables en jaune ( dans votre cas getResources().getColor(R.color.gold) pour tous ) pour définir les traits et l'arrière-plan. (pour le contexte, les progrès secondaires et les progrès) 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);

supprimer les attributs progressBackgroundTint, progressTint, secondaryProgressTint de RatingBar pas besoin.

<RatingBar
        Android:id="@+id/ratingBar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:numStars="5"
        Android:rating="2.5"/>

et le résultat est ::

image1

J'espère que cela vous aidera (la couleur rose n'est que la couleur de fond)

après avoir mis les tirables 1 et 0 en rouge: 

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);

image2

19
KDeogharkar

N'utilisez pas de bibliothèque ou de style pour cela. Utilisez l'étape ci-dessous pour obtenir le résultat.

créer un fichier dans un dossier dessinable en tant que custom_ratingbar.xml

    <?xml version="1.0" encoding="utf-8"?>
 <layer-list 
 xmlns:Android="http://schemas.Android.com/apk/res/Android">
 <item Android:id="@Android:id/background"
Android:drawable="@drawable/star_empty" />
 <item Android:id="@Android:id/secondaryProgress"
Android:drawable="@drawable/star_empty" />
 <item Android:id="@Android:id/progress"
Android:drawable="@drawable/star_full" />
</layer-list>

puis utilisez ce qui suit dans votre barre de notation:

  <RatingBar
    Android:id="@+id/ratingBarChef"
    style="?android:attr/ratingBarStyleSmall"
    Android:numStars="5"
    Android:stepSize="0.2"
    Android:rating="3.0"
    Android:progressDrawable="@drawable/custom_ratingbar"
    Android:isIndicator="false"
    />
7
Daxesh Vekariya

Une autre façon consiste à créer une barre de notation personnalisée si vous n'avez pas d'images, suivez les étapes ci-dessous. Ce tout créer dans un dossier dessinable.

emptystar.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#F1C332" Android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</vector>

full_star.xml

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#F1C332" Android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

half_star.xml

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" >
</path>
</vector>

food_ratingbar_full_empty.xml

<?xml version="1.0" encoding="utf-8"?>

<item Android:state_pressed="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:state_focused="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:state_selected="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:drawable="@drawable/empty_star" />

food_ratingbar_full_filled.xml

<?xml version="1.0" encoding="utf-8"?>

<item Android:state_pressed="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:state_focused="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:state_selected="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:drawable="@drawable/full_star" />

food_rating_bar.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@Android:id/background"
    Android:drawable="@drawable/food_ratingbar_full_empty" />

<item Android:id="@Android:id/secondaryProgress"
    Android:drawable="@drawable/food_ratingbar_full_empty" />
<item Android:id="@Android:id/progress"
    Android:drawable="@drawable/food_ratingbar_full_filled" />

style.xml

   <style name="foodRatingBar" parent="@Android:style/Widget.RatingBar">
    <item name="Android:progressDrawable">@drawable/food_rating_bar_full</item>
    <item name="Android:minHeight">23dip</item>
    <item name="Android:maxHeight">25dip</item>
   </style>

Dans votre mise en page

<RatingBar
Android:id="@+id/ratingBarDish"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="@dimen/dp10"
Android:layout_marginStart="@dimen/dp10"
style="@style/foodRatingBar"
Android:isIndicator="true" />
3
Daxesh Vekariya

Je pense que j'ai trouvé ce dont vous avez besoin. Vous devrez créer un RatingBar personnalisé comme expliqué dans cette réponse MAIS vous devrez utiliser des dessinables vectoriels et non standard.

Vous pouvez télécharger les 3 tirages (pleins, à moitié et vides) sur ce site:

https://materialdesignicons.com/

Ou en faisant un clic droit sur votre dossier res: -> Nouveau -> Actif vectoriel sur Android Studio.

Voici les 3 XML dessinables au cas où vous ne les trouveriez pas:

Étoile complète:

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />

Demi étoile:

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" />

Étoile vide:

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />

Pour changer leur taille, il suffit de mettre à jour les attributs height et width.

Pour changer leur couleur, mettez simplement à jour l'attribut fillColor et définissez votre couleur jaune.

3
Yoann Hercouet

salut essayez d'utiliser ceci et utilisez l'image de bordure comme une étoile https://github.com/ome450901/SimpleRatingBar comme icon_starempty et icon_starfilled sont vos images respectives

<com.willy.ratingbar.ScaleRatingBar xmlns:app="http://schemas.Android.com/apk/res-auto"
                    Android:id="@+id/deals_ratingbar"
                    Android:layout_width="0dp"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center"
                    Android:layout_marginLeft="@dimen/_10dp"
                    Android:layout_toRightOf="@+id/txt_newprice"
                    Android:layout_weight=".4"
                    Android:gravity="center|right"
                    Android:outlineProvider="none"
                    app:srb_drawableEmpty="@drawable/icon_starempty"
                    app:srb_drawableFilled="@drawable/icon_starfilled"
                    app:srb_isIndicator="true"
                    app:srb_numStars="5"
                    app:srb_starHeight="@dimen/_10dp"
                    app:srb_starPadding="@dimen/_3dp"
                    app:srb_starWidth="@dimen/_10dp" />
0
Muhammad Haroon