Làm thế nào để tạo ra một thanh công cụ sử dụng thẻ appcompat v7

Question

Tôi muốn tạo ra một thanh công cụ như hình sau như đề xuất trong hướng dẫn thiết kế vật liệu:

tôi có thể đạt được điều này thông qua việc sử dụng thanh công cụ với một tương đối bố cục:

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

     <Toolbar/> 

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

</RelativeLayout> 

Tôi không chắc đây có phải là cách chính xác hay không. Bất kỳ trợ giúp được đánh giá cao.

Answer 1

Cảm ơn Gabriele cho tất cả sự giúp đỡ. mã ở đây đang làm việc:

Hoạt động:

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; 
       } 
      }); 
     } 
    } 

} 

Layout XML File:

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

Hãy chắc chắn rằng chủ đề hoạt động của bạn được mở rộngTheme.AppCompat.Light.NoActionBar.

Dưới đây là những gì nó sẽ giống như thế:

Vài điều cần lưu ý:

• Nếu bạn đang sử dụng độ cao thẻ thì bạn cần phải thay đổi lề trên để thẻ của bạn căn chỉnh với thanh công cụ chính.
• Tôi vẫn thấy lề 1-2 pixel giữa dưới cùng của thanh công cụ chính và thanh công cụ thẻ. Không chắc chắn về việc phải làm gì trong trường hợp này. Bây giờ, tôi sắp xếp nó theo cách thủ công.

Answer 2

Bạn có thể lấy nó bằng Thanh công cụ dưới dạng ActionBar, một CardView và một Thanh công cụ khác (độc lập) bên trong Thẻ.

Đối với độc Toolbar bên trong một thẻ, bạn có thể sử dụng một cái gì đó như thế này:

<android.support.v7.widget.CardView> 

    <LinearLayout> 

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

     //...... 

    </LinearLayout> 

</CardView> 

Sau đó, bạn có thể thổi phồng thực đơn của bạn để có được những hành động biểu tượng.

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) { 
         //..... 
        } 
       }); 
    } 

Đối với thanh công cụ sử dụng như thanh hành động và cách bố trí chính bạn có thể sử dụng:

option1:

<RelativeLayout> 

    <toolbar/> //Main toolbar 

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

    <CardView /> //described above 

</RelativeLayout> 

OPTION2: Một mở rộng toolbar (như actionbar) và một CardView như mô tả ở trên chơi với lợi nhuận.