Comment créer une carte de la barre d'outils à l'aide de appcompat v7

Je veux créer une barre d'outils comme l'image suivante comme proposé dans la conception de matériel de directives:

Je peut l'atteindre par l'aide de la barre d'outils avec une relative mise en page:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Toolbar/>

        <LinearLayout android:layout_marginTop="-17dp" />

</RelativeLayout>

Je ne suis pas sûr que c'est la manière correcte ou pas. Toute aide est appréciée.

InformationsquelleAutor mudit | 2014-11-10

Merci Gabriele pour toute l'aide. Voici code du travail:

Activité :

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mai);

        Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
        if (toolbar != null) {
            //inflate your menu
            toolbar.inflateMenu(R.menu.main);
            toolbar.setTitle("Card Toolbar");
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        if (maintoolbar != null) {
            //inflate your menu
            maintoolbar.inflateMenu(R.menu.main);
            maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    return true;
                }
            });
        }
    }

}

Mise en page Fichier XML:

<RelativeLayout 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" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_main"
        android:layout_width="match_parent"
        android:layout_height="@dimen/action_bar_size_x2"
        android:background="@android:color/holo_orange_dark"
        android:minHeight="?attr/actionBarSize" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_main"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="@dimen/action_bar_size"
        android:orientation="vertical" >

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <android.support.v7.widget.Toolbar
                    android:id="@+id/card_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/action_bar_size"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@android:color/darker_gray" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:text="@string/app_name"
                    android:textSize="24sp" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>

</RelativeLayout>

Assurez-vous que votre activité thème est l'extension de Theme.AppCompat.Light.NoActionBar.

Voici à quoi ça ressemblera:

Comment créer une carte de la barre d'outils à l'aide de appcompat v7

Quelques choses à noter:

Si vous utilisez des cartes d'élévation alors vous avez besoin de modifier la marge en haut, de sorte que votre carte aligne avec la barre d'outils principale.
Je suis toujours de voir 1-2 pixels de la marge entre le fond de la barre d'outils principale et la carte de la barre d'outils. Pas sûr de savoir quoi faire dans ce cas. Pour l'instant, je suis aligner manuellement.

Salut.. qu'est-Ce que la valeur de @dimen/action_bar_size_x2 et @dimen/action_bar_size. Parce que mon cardview ne se chevauchent pas la première barre d'outils.
x2 est le double de la valeur, que vous utilisez pour la barre d'action de la taille.
Il ne rend pas comme la capture d'écran. Êtes-vous sûr de android:layout_below="@+id/toolbar_main" ? Je voudrais l'enlever pour faire le premier LinearLayout à commencer par le haut de l'écran...
oui.. c'est une capture d'écran de l'appareil.
J'ai utiliser ce lieu de manuel de réglage de la barre d'outils principale de la hauteur: la finale de ViewGroup.LayoutParams lp = mainToolbar.getLayoutParams(); lp.hauteur += ((ViewGroup.MarginLayoutParams) de la carte.getLayoutParams()).topMargin; mainToolbar.setLayoutParams(lp);

InformationsquelleAutor mudit

Vous pouvez l'obtenir à l'aide d'une Barre d'outils comme ActionBar, un CardView et un autre de la Barre d'outils(autonome) à l'intérieur de la Carte.

Pour la Barre d'outils autonomes à l'intérieur d'une Carte, vous pouvez utiliser quelque chose comme ceci:

<android.support.v7.widget.CardView>

   <LinearLayout>

        <Toolbar  android:id="@+id/card_toolbar" />

        //......

   </LinearLayout>

</CardView>

Ensuite, vous pouvez gonfler votre menu pour obtenir l'icône actions.

 Toolbar toolbar = (Toolbar) mActivity.findViewById(R.id.card_toolbar);
   if (toolbar != null) {
         //inflate your menu    
         toolbar.inflateMenu(R.menu.card_toolbar);
         toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                         //.....
                    }
                });
   }

Pour la barre d'outils utilisé comme barre d'action et la page principale, vous pouvez utiliser:

option1:

<RelativeLayout>

    <toolbar/>  //Main toolbar 

    <View
        android:background="@color/primary_color"
        android:layout_height="@dimen/subtoolbar_height"/>

    <CardView /> //described above

</RelativeLayout>

Option2: Une longue barre d'outils (comme actionbar) et un CardView comme décrit ci-dessus à jouer avec les marges.

Je veux l'opposé de ce que (je ne sais pas exactement en face de l').. ma vue carte ne devrait primer sur la barre d'outils.. la barre d'outils ne doivent pas venir à l'intérieur cardview.
Dans l'écran, vous avez une barre d'outils utilisé comme actionbar, et un autre de la barre d'outils (autonome) à l'intérieur de la carte.
ohh.. donc, fondamentalement, vous disant que je dois utiliser 2 barres d'outils.
oui. J'ai juste modifié la réponse.

InformationsquelleAutor Gabriele Mariotti

Vous devez vous connecter pour publier un commentaire.