Dessin bordure supérieure sur une forme sur Android

Question

Je crée une barre de progression personnalisée (positionnée sous un WebView) et ce que je voudrais dessiner est une ligne 1dp-wide entre le WebView et le ProgressBar. Je modifier drawable existante, à savoir progress_horizontal.xml, et a essayé quelque chose comme ceci:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    (...) 

    <item> 
    <shape android:shape="line"> 
     <stroke android:width="1dp" android:color="#FF000000" /> 
    </shape> 
    </item> 

</layer-list> 

Cette ligne est cependant centré verticalement mais je veux qu'il soit dessiné au-dessus de la zone de dessin. La seule idée que je pourrais trouver est d'utiliser ce gradient « aki » ci-dessous:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    (...) 

    <item> 
    <shape> 
     <gradient 
      android:startColor="#FF000000" 
      android:centerColor="#00000000" 
      android:centerY="0.01" 
      android:endColor="#00000000" 
      android:angle="270" 
     /> 
    </shape> 
    </item> 

</layer-list> 

Avez-vous des meilleures idées comment dessiner une seule forme de ligne alignée sur la partie supérieure du drawable défini avec layer-list?

Answer 1

Avez-vous essayé décalant par quelque chose comme ça

http://android.amberfog.com/?p=9

Answer 2

J'ai passé un certain temps à essayer de comprendre ce aussi bien. J'espère qu'il y a une meilleure façon de le faire, mais voici la méthode que j'ai utilisée, qui est aussi un peu hackish, mais au cas où cela aiderait quelqu'un, je pensais que je partagerais.

Le premier élément de votre liste de calques doit être un solide de la couleur de votre choix. Ensuite, ce serait la ou les choses que vous voulez avoir avec la bordure, avec le rembourrage du côté où vous voulez que la bordure soit.

Par exemple:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape android:shape="rectangle"> 
      <solid android:color="YOUR BORDER COLOR" /> 
     </shape> 
    </item> 
    <item android:top="YOUR TOP BORDER THICKNESS"> 
     THE THING YOU WANT A BORDER ON 
    </item> 
</layer-list> 

L'idée est que le rembourrage sur l'élément révèle la forme solide derrière elle, donnant l'apparence de la frontière. Vous pouvez ajouter un remplissage à n'importe quel côté pour ajouter une bordure. J'imagine que vous pourriez devenir plus compliqué et avoir des bordures de couleurs différentes de cette façon aussi.

On dirait un hack mais ça a marché pour moi.

EDIT: J'ai dit "remplissage" mais dans les listes de calques, il s'agit plutôt d'un décalage.

Answer 3

Je passais en revue tous les sujets connexes, mais personne ne pouvait résoudre mon problème. Mais certains d'entre eux ont été très utiles pour comprendre le fonctionnement de la liste des calques ou des paramètres de forme.

Mon problème était de définir un bouton avec un dégradé linéaire et dessiner une ligne supérieure et une ligne inférieure dans différentes couleurs. Après tout, j'ai piraté cette solution. J'enregistré le fichier unter res/drawable/blue_btn.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_pressed="true" >   
     <shape android:shape="rectangle"> 
      <solid android:color="@color/blue_end" /> 
      <padding 
        android:left="10dp" 
       android:top="10dp" 
       android:right="10dp" 
       android:bottom="10dp" /> 
      <stroke 
       android:width="1dp" 
       android:color="@color/bottomline_btn" />       
     </shape>  
    </item> 
    <item> 
     <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
      <item> 
       <shape android:shape="rectangle"> 
        <solid android:color="@color/blue" /> 
        <gradient 
         android:startColor="@color/blue" 
         android:endColor="@color/blue_end" 
         android:angle="270" /> 
       </shape> 
      </item> 
      <item android:top="0dp" android:bottom="-1dp" android:left="-1dp" android:right="-1dp"> 
       <shape android:shape="rectangle"> 
        <stroke 
         android:width="1dp" 
         android:color="@color/topline_btn" />      
        <solid android:color="#00000000" /> 
        <corners android:radius="0dp" /> 
       </shape> 
      </item> 
      <item android:top="-1dp" android:bottom="0dp" android:left="-1dp" android:right="-1dp"> 
       <shape android:shape="rectangle"> 
        <stroke 
         android:width="1dp" 
         android:color="@color/bottomline_btn" />       
        <solid android:color="#00000000" /> 
        <corners android:radius="0dp" /> 
       </shape> 
      </item>   
     </layer-list> 
    </item> 
</selector> 


<color name="topline_btn">#31ffffff</color> 
<color name="bottomline_btn">#31000000</color> 

<color name="blue">#449def</color> 
<color name="blue_end">#2f6699</color> 

Answer 4

Ma solution est d'ajouter 9-patch comme le dernier élément de la couche:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item> 
     <shape> 
      <solid android:color="@color/tab_button_active_layer2" /> 
     </shape> 
    </item> 
    <item android:bottom="@dimen/tab_button_active_bottom_bar_width"> 
     <shape> 
      <solid android:color="@color/tab_button_active_layer1" /> 
     </shape> 
    </item> 
    <!-- 9-patch drawable --> 
    <item android:drawable="@drawable/tab_button_border_top"/> 
</layer-list>