Discussion :

[Jutige]

Bonjour,

Je suis développeur débutant sous Android.
Dans le cadre d'un projet, je souhaite appliquer un style à une image (avoir des coins arrondis).
Je pensais utiliser ShapeDrawable qui semble assez simple de prime abord.

Dans le layout de mon fragment :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragments.PresFragment"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/fragment_pres_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:padding="30dp"
        android:textColor="#1E609A"
 
        android:text="Présentation..." />
    <ImageView
        android:id="@+id/imageView"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image"
        android:background="@drawable/rounded_image">
    </ImageView>
 
</LinearLayout>

Je fais donc référence au XML rounded_image suivant :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="50dp" />
</shape>

Ici le cas est très simple mais j'ai fait d'autres essais.

Mon problème est donc qu'il ne se passe rien.
Comment applique-t-on un style à un image ? Dois-je nécessairement passer par du développement Java spécifique ?

J'ai "écumé" les répondes de google mais sans réponse jusqu'à présent

Merci de votre aide !

[Turvy]

Essaie ça

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
   <corners
        android:radius="50dp" />
   <stroke
      android:width="8dp"
      android:color="#01fee9" />
</shape>

Tu dis à ton image de faire de bords arrondis, mais tu ne lui donne pas de bordure.

[Jutige]

Oui merci de ta réponde; tu as raison et j'ai corrigé !
Pour autant, j'ai toujours le même résultat à savoir pas de mise en forme.
Je pense savoir d'où vient le problème. Dans le xml, j'indique à la fois src et background qui d'après la doc sont équivalents.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ImageView
        android:id="@+id/imageViewPres"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_image"
        android:src="@drawable/photo"/>

Dans une explication que j'ai pu trouver, on fait bien référence au xml drawable mais je ne vois pas comment ensuite on fait référence à l'image...
https://webdevdesigner.com/q/imagevi...corners-67801/

Merci à vous !

Jutige

[Turvy]

Le background et src ne sont pas équivalents, background prend toute la surface de l'image, avec src tu peux gérer le dimensionnement avec le scaletype.

Essai d'ajouter ça :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ImageView
        android:id="@+id/imageViewPres"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_image"
        android:outlineProvider="background"
        android:src="@drawable/photo"/>

Sinon il y a pleins de bonnes solutions ici : https://stackoverflow.com/questions/...oldest#tab-top

[Jutige]

Merci Turvy, ta dernière réponse m'a orienté vers la solution.

J'ai utilisé la technique de superposition d'image.

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewPres"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="6dp"
            android:src="@drawable/photo"/>
        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/rounded_image"/>
    </FrameLayout>

Dans le xml rounded_image :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#00ffffff" />
    <padding android:left="20dp"
        android:top="20dp"
        android:right="20dp"
        android:bottom="20dp" />
    <corners android:radius="20dp" />
    <stroke android:width="6dp" android:color="#B2B9E1" />
</shape>