-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add new PersistentDrawerActivity to showcase how to create a more c…
…omplex drawer with modified behavior without altering the MaterialDrawer API * This sample showcases how to create a persistent drawer like shown in the Material Design Guidelines * https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7YVdKQlF3TEo2S3M/patterns_navdrawer_behavior_persistent2.png * https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior FIX #713
- Loading branch information
Showing
7 changed files
with
318 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
169 changes: 169 additions & 0 deletions
169
app/src/main/java/com/mikepenz/materialdrawer/app/PersistentDrawerActivity.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| package com.mikepenz.materialdrawer.app; | ||
|
|
||
| import android.graphics.Color; | ||
| import android.graphics.drawable.ColorDrawable; | ||
| import android.os.Bundle; | ||
| import android.support.v7.app.AppCompatActivity; | ||
| import android.support.v7.widget.Toolbar; | ||
| import android.view.MenuItem; | ||
| import android.view.View; | ||
| import android.widget.ImageView; | ||
|
|
||
| import com.mikepenz.crossfader.Crossfader; | ||
| import com.mikepenz.fontawesome_typeface_library.FontAwesome; | ||
| import com.mikepenz.google_material_typeface_library.GoogleMaterial; | ||
| import com.mikepenz.iconics.IconicsDrawable; | ||
| import com.mikepenz.materialdrawer.AccountHeader; | ||
| import com.mikepenz.materialdrawer.AccountHeaderBuilder; | ||
| import com.mikepenz.materialdrawer.Drawer; | ||
| import com.mikepenz.materialdrawer.DrawerBuilder; | ||
| import com.mikepenz.materialdrawer.MiniDrawer; | ||
| import com.mikepenz.materialdrawer.app.utils.CrossfadeWrapper; | ||
| import com.mikepenz.materialdrawer.model.PrimaryDrawerItem; | ||
| import com.mikepenz.materialdrawer.model.ProfileDrawerItem; | ||
| import com.mikepenz.materialdrawer.model.SecondaryDrawerItem; | ||
| import com.mikepenz.materialdrawer.model.SectionDrawerItem; | ||
| import com.mikepenz.materialdrawer.model.interfaces.IProfile; | ||
| import com.mikepenz.materialize.util.UIUtils; | ||
|
|
||
| public class PersistentDrawerActivity extends AppCompatActivity { | ||
| private static final int PROFILE_SETTING = 1; | ||
|
|
||
| //save our header or result | ||
| private AccountHeader headerResult = null; | ||
| private Drawer result = null; | ||
| private MiniDrawer miniResult = null; | ||
| private Crossfader crossFader; | ||
|
|
||
| @Override | ||
| protected void onCreate(Bundle savedInstanceState) { | ||
| super.onCreate(savedInstanceState); | ||
| setContentView(R.layout.activity_persistent_drawer); | ||
|
|
||
| //Remove line to test RTL support | ||
| // getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL); | ||
|
|
||
| //example how to implement a persistentDrawer as shown in the google material design guidelines | ||
| //https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7YVdKQlF3TEo2S3M/patterns_navdrawer_behavior_persistent2.png | ||
| //https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior | ||
|
|
||
| // Handle Toolbar | ||
| final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); | ||
| setSupportActionBar(toolbar); | ||
| getSupportActionBar().setTitle(R.string.drawer_item_persistent_compact_header); | ||
|
|
||
| // Create a few sample profile | ||
| final IProfile profile = new ProfileDrawerItem().withName("Mike Penz").withEmail("mikepenz@gmail.com").withIcon(R.drawable.profile); | ||
| final IProfile profile2 = new ProfileDrawerItem().withName("Max Muster").withEmail("max.mustermann@gmail.com").withIcon(R.drawable.profile2); | ||
| final IProfile profile3 = new ProfileDrawerItem().withName("Felix House").withEmail("felix.house@gmail.com").withIcon(R.drawable.profile3); | ||
| final IProfile profile4 = new ProfileDrawerItem().withName("Mr. X").withEmail("mister.x.super@gmail.com").withIcon(R.drawable.profile4); | ||
| final IProfile profile5 = new ProfileDrawerItem().withName("Batman").withEmail("batman@gmail.com").withIcon(R.drawable.profile5); | ||
|
|
||
| // Create the AccountHeader | ||
| headerResult = new AccountHeaderBuilder() | ||
| .withActivity(this) | ||
| .withCompactStyle(true) | ||
| .withTranslucentStatusBar(true) | ||
| .withHeaderBackground(new ColorDrawable(Color.parseColor("#FDFDFD"))) | ||
| .withHeightPx(UIUtils.getActionBarHeight(this)) | ||
| .withAccountHeader(R.layout.material_drawer_compact_persistent_header) | ||
| .withTextColor(Color.BLACK) | ||
| .addProfiles( | ||
| profile, | ||
| profile2, | ||
| profile3, | ||
| profile4, | ||
| profile5 | ||
| ) | ||
| .withSavedInstance(savedInstanceState) | ||
| .build(); | ||
|
|
||
| //Create the drawer | ||
| DrawerBuilder builder = new DrawerBuilder() | ||
| .withActivity(this) | ||
| .withAccountHeader(headerResult) //set the AccountHeader we created earlier for the header | ||
| .addDrawerItems( | ||
| new PrimaryDrawerItem().withName(R.string.drawer_item_home).withIcon(FontAwesome.Icon.faw_home).withIdentifier(1), | ||
| new PrimaryDrawerItem().withName(R.string.drawer_item_free_play).withIcon(FontAwesome.Icon.faw_gamepad), | ||
| new PrimaryDrawerItem().withName(R.string.drawer_item_custom).withIcon(FontAwesome.Icon.faw_eye), | ||
| new SectionDrawerItem().withName(R.string.drawer_item_section_header), | ||
| new SecondaryDrawerItem().withName(R.string.drawer_item_settings).withIcon(FontAwesome.Icon.faw_cog), | ||
| new SecondaryDrawerItem().withName(R.string.drawer_item_help).withIcon(FontAwesome.Icon.faw_question).withEnabled(false), | ||
| new SecondaryDrawerItem().withName(R.string.drawer_item_open_source).withIcon(FontAwesome.Icon.faw_github), | ||
| new SecondaryDrawerItem().withName(R.string.drawer_item_contact).withIcon(FontAwesome.Icon.faw_bullhorn) | ||
| ) | ||
| .withSavedInstance(savedInstanceState); | ||
|
|
||
| //set the back arrow in the toolbar | ||
| getSupportActionBar().setDisplayHomeAsUpEnabled(true); | ||
| getSupportActionBar().setHomeButtonEnabled(false); | ||
|
|
||
| // build only the view of the Drawer (don't inflate it automatically in our layout which is done with .build()) | ||
| result = builder.buildView(); | ||
| // create the MiniDrawer and define the drawer and header to be used (it will automatically use the items from them) | ||
| miniResult = new MiniDrawer() | ||
| .withDrawer(result) | ||
| .withIncludeSecondaryDrawerItems(true) | ||
| .withAccountHeader(headerResult); | ||
|
|
||
| //get the widths in px for the first and second panel | ||
| int firstWidth = (int) com.mikepenz.crossfader.util.UIUtils.convertDpToPixel(300, this); | ||
| int secondWidth = (int) com.mikepenz.crossfader.util.UIUtils.convertDpToPixel(72, this); | ||
|
|
||
| //create and build our crossfader (see the MiniDrawer is also builded in here, as the build method returns the view to be used in the crossfader) | ||
| crossFader = new Crossfader() | ||
| .withContent(findViewById(R.id.crossfade_content)) | ||
| .withFirst(result.getSlider(), firstWidth) | ||
| .withSecond(miniResult.build(this), secondWidth) | ||
| .withSavedInstance(savedInstanceState) | ||
| .build(); | ||
|
|
||
| //define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close | ||
| miniResult.withCrossFader(new CrossfadeWrapper(crossFader)); | ||
|
|
||
| //define and create the arrow ;) | ||
| ImageView toggle = (ImageView) headerResult.getView().findViewById(R.id.material_drawer_account_header_toggle); | ||
| //for RTL you would have to define the other arrow | ||
| toggle.setImageDrawable(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_keyboard_arrow_left).sizeDp(16).color(Color.BLACK)); | ||
| toggle.setOnClickListener(new View.OnClickListener() { | ||
| @Override | ||
| public void onClick(View view) { | ||
| crossFader.crossFade(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| @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 accountHeader to the bundle | ||
| outState = headerResult.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 boolean onOptionsItemSelected(MenuItem item) { | ||
| //handle the click on the back arrow click | ||
| switch (item.getItemId()) { | ||
| case android.R.id.home: | ||
| onBackPressed(); | ||
| return true; | ||
|
|
||
| default: | ||
| return super.onOptionsItemSelected(item); | ||
| } | ||
| } | ||
|
|
||
| @Override | ||
| public void onBackPressed() { | ||
| //handle the back press :D close the drawer first and if the drawer is closed close the activity | ||
| if (result != null && result.isDrawerOpen()) { | ||
| result.closeDrawer(); | ||
| } else { | ||
| super.onBackPressed(); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <RelativeLayout 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:gravity="center"> | ||
|
|
||
| <LinearLayout | ||
| android:id="@+id/crossfade_content" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent" | ||
| android:orientation="vertical"> | ||
|
|
||
| <LinearLayout | ||
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content" | ||
| android:background="?attr/colorPrimary" | ||
| android:paddingTop="@dimen/tool_bar_top_padding"> | ||
|
|
||
| <android.support.v7.widget.Toolbar | ||
| android:id="@+id/toolbar" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="?attr/actionBarSize" | ||
| android:background="?attr/colorPrimary" | ||
| android:elevation="4dp" | ||
| android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" | ||
| app:popupTheme="@style/ThemeOverlay.AppCompat.Light" | ||
| tools:ignore="UnusedAttribute" /> | ||
| </LinearLayout> | ||
|
|
||
| <TextView | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent" | ||
| android:layout_gravity="center" | ||
| android:gravity="center" | ||
| android:text="@string/drawer_item_embedded_drawer" | ||
| android:textSize="16sp" /> | ||
| </LinearLayout> | ||
| </RelativeLayout> |
95 changes: 95 additions & 0 deletions
95
app/src/main/res/layout/material_drawer_compact_persistent_header.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="wrap_content"> | ||
|
|
||
| <ImageView | ||
| android:id="@+id/material_drawer_account_header_background" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent" | ||
| android:scaleType="fitXY" /> | ||
|
|
||
| <RelativeLayout | ||
| android:id="@+id/material_drawer_account_header" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent"> | ||
|
|
||
| <TextView | ||
| android:id="@+id/material_drawer_account_header_email" | ||
| android:layout_width="1px" | ||
| android:layout_height="1px" | ||
| android:visibility="gone" /> | ||
|
|
||
| <com.mikepenz.materialdrawer.view.BezelImageView | ||
| android:id="@+id/material_drawer_account_header_small_first" | ||
| android:layout_width="1px" | ||
| android:layout_height="1px" | ||
| android:visibility="gone" /> | ||
|
|
||
| <com.mikepenz.materialdrawer.view.BezelImageView | ||
| android:id="@+id/material_drawer_account_header_small_second" | ||
| android:layout_width="1px" | ||
| android:layout_height="1px" | ||
| android:visibility="gone" /> | ||
|
|
||
| <com.mikepenz.materialdrawer.view.BezelImageView | ||
| android:id="@+id/material_drawer_account_header_small_third" | ||
| android:layout_width="1px" | ||
| android:layout_height="1px" | ||
| android:visibility="gone" /> | ||
|
|
||
| <LinearLayout | ||
| android:id="@+id/material_drawer_account_header_text_section" | ||
| android:layout_width="match_parent" | ||
| android:layout_height="match_parent" | ||
| android:layout_alignParentBottom="true" | ||
| android:layout_centerVertical="true" | ||
| android:gravity="center_vertical" | ||
| android:orientation="horizontal" | ||
| android:paddingEnd="@dimen/material_drawer_vertical_padding" | ||
| android:paddingLeft="@dimen/material_drawer_vertical_padding" | ||
| android:paddingRight="@dimen/material_drawer_vertical_padding" | ||
| android:paddingStart="@dimen/material_drawer_vertical_padding"> | ||
|
|
||
| <com.mikepenz.materialdrawer.view.BezelImageView | ||
| android:id="@+id/material_drawer_account_header_current" | ||
| android:layout_width="@dimen/material_drawer_persistent_height_icon" | ||
| android:layout_height="@dimen/material_drawer_persistent_height_icon" | ||
| android:layout_marginEnd="@dimen/material_drawer_vertical_padding" | ||
| android:layout_marginLeft="0dp" | ||
| android:layout_marginRight="@dimen/material_drawer_vertical_padding" | ||
| android:layout_marginStart="0dp" | ||
| android:clickable="true" | ||
| android:elevation="2dp" /> | ||
|
|
||
| <TextView | ||
| android:id="@+id/material_drawer_account_header_name" | ||
| android:layout_width="wrap_content" | ||
| android:layout_height="wrap_content" | ||
| android:fontFamily="sans-serif-medium" | ||
| android:lines="1" | ||
| android:singleLine="true" | ||
| android:textSize="@dimen/material_drawer_account_header_text" /> | ||
|
|
||
| <ImageView | ||
| android:id="@+id/material_drawer_account_header_text_switcher" | ||
| android:layout_width="@dimen/material_drawer_account_header_dropdown" | ||
| android:layout_height="@dimen/material_drawer_account_header_dropdown" | ||
| android:layout_marginEnd="@dimen/material_drawer_padding_half" | ||
| android:layout_marginLeft="@dimen/material_drawer_padding_half" | ||
| android:layout_marginRight="@dimen/material_drawer_padding_half" | ||
| android:layout_marginStart="@dimen/material_drawer_padding_half" /> | ||
|
|
||
| <!-- Sorry but this is the fastest way to move it right inside this layout --> | ||
| <LinearLayout | ||
| android:layout_width="0dp" | ||
| android:layout_height="match_parent" | ||
| android:layout_weight="1" /> | ||
|
|
||
| <ImageView | ||
| android:id="@+id/material_drawer_account_header_toggle" | ||
| android:layout_width="24dp" | ||
| android:layout_height="match_parent" | ||
| android:scaleType="centerInside" /> | ||
| </LinearLayout> | ||
| </RelativeLayout> | ||
| </FrameLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <resources> | ||
| <dimen name="material_drawer_padding_half">4dp</dimen> | ||
| <dimen name="material_drawer_persistent_height">48dp</dimen> | ||
| <dimen name="material_drawer_persistent_height_icon">32dp</dimen> | ||
| </resources> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters