Как реализовать MiniDrawer с помощью mikepenz/MaterialDrawer

Question

Я пытаюсь реализовать MiniDrawer, используя mikepenz/MaterialDrawer github library. Я мог бы получить результат, как показано ниже. но верхняя часть MiniDrawer скрыта панелью инструментов. Как я могу решить эту проблему.

Это MainActivity.Java

public class MainActivity extends AppCompatActivity { 

    private Drawer result = null; 
    private MiniDrawer miniResult = null; 
    private Crossfader crossFader; 

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

     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
     fab.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 
         .setAction("Action", null).show(); 
      } 
     }); 

     result = new DrawerBuilder() 
       .withActivity(this) 
       .withToolbar(toolbar) 
       .withTranslucentNavigationBar(false) 
       .addDrawerItems(
         new PrimaryDrawerItem().withName(R.string.drawer_item_compact_header).withIcon(GoogleMaterial.Icon.gmd_wb_sunny).withIdentifier(1), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_action_bar_drawer).withIcon(FontAwesome.Icon.faw_home).withBadge("22").withBadgeStyle(new BadgeStyle(Color.RED, Color.RED)).withIdentifier(2).withSelectable(false), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_multi_drawer).withIcon(FontAwesome.Icon.faw_gamepad).withIdentifier(3), 
         new PrimaryDrawerItem().withName(R.string.drawer_item_non_translucent_status_drawer).withIcon(FontAwesome.Icon.faw_eye).withIdentifier(4), 
         new PrimaryDrawerItem().withDescription("A more complex sample").withName(R.string.drawer_item_advanced_drawer).withIcon(GoogleMaterial.Icon.gmd_adb).withIdentifier(5), 
         new SectionDrawerItem().withName(R.string.drawer_item_section_header), 
         new SecondaryDrawerItem().withName(R.string.drawer_item_open_source).withIcon(FontAwesome.Icon.faw_github), 
         new SecondaryDrawerItem().withName(R.string.drawer_item_contact).withIcon(GoogleMaterial.Icon.gmd_format_color_fill).withTag("Bullhorn"), 
         new DividerDrawerItem(), 
         new SwitchDrawerItem().withName("Switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener), 
         new ToggleDrawerItem().withName("Toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener) 
       ) // add the items we want to use with our Drawer 
       .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() { 
        @Override 
        public boolean onItemClick(View view, int position, IDrawerItem drawerItem) { 
         if (drawerItem instanceof Nameable) { 
          Toast.makeText(MainActivity.this, ((Nameable) drawerItem).getName().getText(MainActivity.this), Toast.LENGTH_SHORT).show(); 
         } 
         return false; 
        } 
       }) 
       .withGenerateMiniDrawer(true) 
       .withSavedInstance(savedInstanceState) 
       .buildView(); 

     miniResult = result.getMiniDrawer(); 

     int firstWidth = (int) UIUtils.convertDpToPixel(300, this); 
     int secondWidth = (int) UIUtils.convertDpToPixel(72, this); 

     crossFader = new Crossfader() 
       .withContent(findViewById(R.id.main_content)) 
       .withFirst(result.getSlider(), firstWidth) 
       .withSecond(miniResult.build(this), secondWidth) 
       .withSavedInstance(savedInstanceState) 
       .build(); 

     miniResult.withCrossFader(new CrossfadeWrapper(crossFader)); 

     //define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one 
     crossFader.getCrossFadeSlidingPaneLayout().setShadowResourceLeft(R.drawable.material_drawer_shadow_left); 
    } 

    private OnCheckedChangeListener onCheckedChangeListener = new OnCheckedChangeListener() { 
     @Override 
     public void onCheckedChanged(IDrawerItem drawerItem, CompoundButton buttonView, boolean isChecked) { 
      if (drawerItem instanceof Nameable) { 
       Log.i("material-drawer", "DrawerItem: " + ((Nameable) drawerItem).getName() + " - toggleChecked: " + isChecked); 
      } else { 
       Log.i("material-drawer", "toggleChecked: " + isChecked); 
      } 
     } 
    }; 

    @Override 
    protected void onSaveInstanceState(Bundle outState) { 
     //add the values which need to be saved from the drawer to the bundle 
     outState = result.saveInstanceState(outState); 
     //add the values which need to be saved from the crossFader to the bundle 
     outState = crossFader.saveInstanceState(outState); 
     super.onSaveInstanceState(outState); 
    } 

    @Override 
    public void onBackPressed() { 
     //handle the back press :D close the drawer first and if the drawer is closed close the activity 
     if (crossFader != null && crossFader.isCrossFaded()) { 
      crossFader.crossFade(); 
     } else { 
      super.onBackPressed(); 
     } 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.menu_main, menu); 
     menu.findItem(R.id.menu_1) 
       .setIcon(new IconicsDrawable(this, FontAwesome.Icon.faw_repeat) 
       .color(Color.WHITE).actionBar()); 
     return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 

     switch (item.getItemId()){ 
      case R.id.menu_1: 
       crossFader.crossFade(); 
       return true; 
      case R.id.act_settings: 
       return true; 
      default: 
     } 

     return super.onOptionsItemSelected(item); 
    } 
} 

Это activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="com.sldroids.minidrawer_v3.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

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

    <include layout="@layout/content_main" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_dialog_email" /> 

</android.support.design.widget.CoordinatorLayout> 

Answer 1

@sendtodilanka проблема заключается в том, что вы добавляете Crosssfader в качестве родителя main_content зрения , который является прямым ребенком вашего CoordinatorLayout.

Как CoordinatorLayout похож на FrameLayout и делает перекрываться просмотров.Кроме Crossfader просто будет отображаться ниже AppBarLayout, которые вы определили, чтобы быть над main_content.

Чтобы получить Crossfader ниже Toolbar вы должны добавить новый View вокруг вашего main_content, давайте выбрать FrameLayout, который имеет атрибут (не забудьте определить appBarLayout идентификатор к вашему AppBarLayout) xml app:layout_behavior="@string/appbar_scrolling_view_behavior"

После это Crossfader будет накачан как ребенок из FrameLayout, который мы добавили выше, который отображается ниже AppBarLayout.

Более подробную информацию об этом можно найти here.

---

Так что ваш макет будет выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="com.sldroids.minidrawer_v3.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

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


    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <include layout="@layout/content_main" /> 
    </FrameLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_dialog_email" /> 

</android.support.design.widget.CoordinatorLayout>