web-dev-qa-db-fra.com

Comment créer une barre d'outils avec des coins arrondis et une élévation à l'intérieur de la barre d'applications? Comme cette photo

C'est mon code que j'essaie de créer une barre d'outils avec des coins arrondis montrés dans l'image.

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appBar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="12dp"
    Android:background="@Android:color/transparent">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@drawable/bg_actionbar" />

</Android.support.design.widget.AppBarLayout>

bg_actionbar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape Android:shape="rectangle"
xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<solid Android:color="@color/white" />
<corners Android:radius="16dp" />
</shape>

This what I'm trying to createThis is what I'm getting

androidandroid-layoutandroid-actionbarandroid-toolbar
7
SANDIP CHAUDHARI

Ensemble app:elevation="0dp" dans AppBarLayout

Et mettre Android:elevation="4dp" à Toolbar

Et définissez également 'Android: layout_margin = "4dp"' sur la barre d'outils qui vous aidera à afficher l'ombre.

Donc, votre mise en page sera comme ça

<Android.support.design.widget.AppBarLayout
 Android:id="@+id/appBar"
 app:elevation="0dp"
 Android:layout_width="match_parent"
 Android:layout_height="wrap_content"
 Android:layout_margin="12dp"
 Android:background="@Android:color/transparent">

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar"
    Android:elevation="4dp"
    Android:layout_margin="4dp"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@drawable/bg_actionbar" />
4
Jay Thummar

Vous pouvez l'essayer:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="8dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="0dp">

    <Android.support.v7.widget.CardView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_margin="20dp"
        app:cardCornerRadius="14dp"
        app:cardElevation="20dp">

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

            <TextView
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="ElementApp"
                Android:textSize="24sp"
                Android:textStyle="bold" />
        </Android.support.v7.widget.Toolbar>
    </Android.support.v7.widget.CardView>
</Android.support.design.widget.AppBarLayout>

Et la sortie sera comme: L'image de sortie

0
Gourango Sutradhar

Pourquoi ne pas envelopper avec cardview

0
moumenShobakey

Vous pouvez utiliser la barre d'outils sans appbarlayout

<Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        app:elevation="4dp
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@drawable/bg_actionbar" />
0
Kourosh

vous pouvez utiliser le fichier xml suivant comme arrière-plan et donner un rayon spécifique selon vos besoins:

shadowfile.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#18000000" />
            <corners Android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#05000000" />
            <corners Android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#10000000" />
            <corners Android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#15000000" />
            <corners Android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding Android:top="1dp" Android:right="1dp" Android:bottom="1dp" Android:left="1dp" />
            <solid Android:color="#20000000" />
            <corners Android:radius="4dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid Android:color="#FFFFFF" />
            <corners Android:radius="0dp" />
        </shape>
    </item>
</layer-list>

Remarque: Ici, un élément équivaut à une couche, vous pouvez ajouter ou supprimer selon vos besoins

Utilisation dans la disposition ou la barre d'outils:

Android:background="@drawable/shadowfile"
0
amit