In my xamarin android app I have a right navigation bar and a custom toolbar. The code for navigation bar is this
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="#+id/right_nav_view"
app:menu="#menu/menu_navigation_swipe" />
And the code for toolbar is this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/rectangle"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HomeButton"
android:layout_gravity="center"
android:src="#drawable/logo"
android:clickable="true" />
<ImageView
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_nav"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/icon_settings"
android:clickable="true" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I wanna open the navigation bar when the user press the ImageView with id = right_nav. How can i do this?
Xamarin android. Open right navigation bar with button from custom toolbar
Place your NavigationView into a DrawerLayout, for example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- I place your Toolbar in this include_list_viewpager layout -->
<include layout="#layout/include_list_viewpager"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
Then, as #Federico Navarrete has pointed out, define a click event for your ImageView:
DrawerLayout drawerLayout = FindViewById<DrawerLayout> (Resource.Id.drawer_layout);
ImageView right_nav = FindViewById<ImageView>(Resource.Id.right_nav);
right_nav.Click += (s, e) =>
{
drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.End);
};
Try This
ImageView right_nav = (ImageView)findViewById(R.id.right_nav);
right_nav.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
drawer.openDrawer(Gravity.RIGHT);
}
});
You can use this code to open it from the right side:
//You get your navigation drawer
var drawer = FindViewById<DrawerLayout>(Resource.Id.right_nav_view);
//You get the image view
var right_nav = FindViewById<ImageView>(Resource.Id.right_nav);
//You define the click event
right_nav.Click += (s, e) =>
{
//You open the navigation Drawer from the right
drawer.OpenDrawer(GravityCompat.Right);
}
Related
I am working on Android project and I've created a new Settings Activity from Android. When I created the activity, and tried running, it the Settings Activity that Android Studio created, didn't include an action bar for some reason. I googled around and found that it seems to be a common thing and add the action bar manually, so I've done the following:
private void setupActionBar()
{
getLayoutInflater().inflate(R.layout.toolbar, (ViewGroup)findViewById(android.R.id.content));
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null)
{
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I found that the first preference header is hidden under the action bar, again Googled around, found you need to add padding to the list view which I did using the following in the onCreate()
getListView().setPadding(0, 180, 0, 0);
Doing the above seems a little odd, and it only works on the initial settings activity screen with the list of preference headers. Once you click on the preference headers to view the settings, the first setting is hidden under the action bar as shown in the screenshot below:
I think I figured it out.
I created a toolbar XML as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/settings_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then in the SettingsActivity in the setupActionBar method as below:
private void setupActionBar()
{
ViewGroup rootView = (ViewGroup)findViewById(R.id.action_bar_root);
View view = getLayoutInflater().inflate(R.layout.settings_toolbar, rootView, false);
rootView.addView(view, 0);
Toolbar toolbar = (Toolbar)findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I suggest to remove your Action Bar and make a custom toolbar which will be described by other layout file and will contain a widget that cancels your current activity.
For example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relLayout1">
<include layout="#layout/snippet_comments_toolbar"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relLayout2"
android:layout_below="#+id/relLayout1"
android:layout_marginBottom="60dp">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView"></ListView>
</RelativeLayout>
and then snippet_comments_toolbar which is that toolbar I am talking about:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/white_grey_border_bottom"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profileToolBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="20dp"
android:layout_centerVertical="true"
android:id="#+id/backArrow"
android:src="#drawable/ic_backarrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:layout_toRightOf="#+id/backArrow"
android:layout_marginRight="15dp"
android:textSize="20sp"
android:textColor="#color/black"
android:layout_centerVertical="true"
android:id="#+id/tvNext"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</merge>
I has activity with the next layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayoutWidget"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/containerProgress"
android:layout_width="match_parent"
android:clickable="false"
android:layout_height="match_parent"
android:background="#4777">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/widgetRecyclerView"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/windowBackground"
android:scrollbars="vertical" />
</android.support.v4.widget.DrawerLayout>
Container containerProgress(progressBar) is show over all other elements in screen.
OK.
I need when containerProgress is show to was not possible to click any items on screen.
But I can click on drawerlayout hamburger icon.
How I can disable click on hamburger icon while containerProgress is show?
Set empty click listener to toggle
toggle.setOnClickListener(view -> {
// We ignore it
}
And whem you want to enable it again:
toggle.setOnClickListener(null);
OR
You can hide it using
toggle.setDrawerIndicatorEnabled(false);
OR
If under "disable click" you mean "prevent drawer to be opened" you can do that:
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
And when you want to enable it:
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
I have an appCompatActivity with a supportActionBar similar to whatsApp chat screen interface. Having been able to customise the actionbar with all the necessary components, I am not not able to apply padding/margin of any sort on the leftmost up/back button. However, with rest of the items I set up in the toolbar are aligned properly.
Here is how my layout of the activity looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relMainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/avatar"
android:layout_width="#dimen/action_bar_avatar_size"
android:layout_height="#dimen/action_bar_avatar_size"/>
<TextView
android:id="#+id/txtUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
...
In the activity:
mImageViewAvatar = (ImageView) findViewById(R.id.avatar);
mTextViewUserName = (TextView) findViewById(R.id.txtUserName);
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mImageViewAvatar.setBackgroundImage(Contacts.getImage());
mTextViewUserName.setText(recipientId);
I have tried to set my layout_marginLeft to a negative value as well to the image even, it does not move to left. How do I apply margin/padding alignments to only this toolbar? Not the toolbar used in the application.
I guess you're looking for app:contentInsetLeft respectively app:contentInsetStart. Setting these attributes to 0dp will remove the padding - see the following two screenshots:
Without explicity setting contentInset:
Setting contentInset to 0dp
Please note: This won't work if you're using getSupportActionBar().setDisplayHomeAsUpEnabled(true) since the drawable which will be used by the system has a padding which can't be removed. See the following Screenshot:
So if you're trying to achieve the same as WhatsApp you have to use your own "back-button" drawable and add it to your Toolbar layout.
Edit
That's how I would do it:
*.xml
<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"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id="#+id/layout_back_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_arrow_back" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/avatar" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="StackOverflow"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="20dp" />
</android.support.v7.widget.Toolbar>
Java code
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
getSupportActionBar().setTitle(null);
View view = findViewById(R.id.layout_back_button);
view.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
Result:
Notice that I wrapped the back button drawable and the avatar in an extra layout, which has the selectableItemBackgroundBorderless set as the background. Due that we achieve this ripple effect like in WhatsApp.
Hi I am looking for the sliding menu similar to the below availble in iOS, I am looking similar in android, Is there any reference code available similar to this.
https://github.com/romaonthego/REFrostedViewController/raw/master/Demo.gif
You can actually make use of this library by jfeinstein10:
https://github.com/jfeinstein10/SlidingMenu
The drawer slides in/out very similar as in iOS.
I think it is DrawerLayout in android. Just try this tutorial. For more details, you can read this document.
In the case you need a root layout in DrawerLayout instead of ListView.
For example in my case:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4" />
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="220dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#fff">
<TextView
android:id="#+id/tv_word"
android:text="New words"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_width="210dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
now, on your activiy class:
DrawerLayout mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
TextView tv_word = (TextView )findViewById(R.id.tv_word );
tv_word.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mDrawerLayout.closeDrawer(linearLayout);//don't forget it
//.....
}
});
I have created drawer layout sample application, it's working fine, my problem is drawer layout working in right to left perfectly but I am trying to move icon left side to right side but it's not working give me your suggestion..!!! This is possible or not?
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!-- The navigation drawer -->
<ListView
android:id="#+id/drawer_list"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
Maybe it's too late but you can solve this using the default Menu.
Create res/menu/my_right_side_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/btnMyMenu"
android:icon="#drawable/ic_drawer"
android:title="Right Side Menu"
myapp:showAsAction="always"/>
</menu>
Then add your menu in onCreateOptionsMenu() in your Activity
#Override
public boolean onCreateOptionsMenu(Menu menu) {
int menuToUse = R.menu.my_right_side_menu;
MenuInflater inflater = getMenuInflater();
inflater.inflate(menuToUse, menu);
return super.onCreateOptionsMenu(menu);
}
Next, in your ActionBarDrawerToggle handle the click event of your menu item
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open, R.string.drawer_close) {
#Override
public boolean onOptionsItemSelected(android.view.MenuItem item) {
if (item != null && item.getItemId() == R.id.btnMyMenu) {
if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
} else {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
return true;
}
return false;
}
};
And finally don't forget to hide your Home button from the ActionBar
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
If you use AppBarLayout and Toolbar do as below
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:layoutDirection="rtl">
<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>
notice: android:layoutDirection="rtl"
This icon represents navigation menu, which by design has to be on left side of the screen. As per the guidelines, we can although have a navigation drawer on right side, but that shall be used to modify the contents (for example filters). For all such purposes you might want to use ActionbarItem, and put up an ActionItem in right corner of the screen. Click on that action item will open or close the right navigation drawer.
But for sure, as per the design, this animated three lined menu icon, which represents navigation shall be on left hand side.
Just for the information, to put the navigation drawer on right side, you have to change the gravity of navigation drawer as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/right_drawer"
android:layout_width="280dp"
android:layout_gravity="end"
android:layout_height="match_parent"
android:orientation="vertical" />
</android.support.v4.widget.DrawerLayout>
Also, in this case you really really want the navigation menu icon, on right either use custom header layouts or a library like ActionBarSherlock to edit it.
I hope this helps!
Here is a loophole-like solution which worked in my case.
toggle = new ActionBarDrawerToggle(
this, drawer, toolbar0, R.string.open_nav, R.string.close_nav);
I made up a toolbar for it.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginRight="40dp"
android:layout_marginEnd="40dp"
android:background="#color/colorPrimary">
<!-- this is your general toolbar-->
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|end|center_vertical"
android:text="Mytitle"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar0"
android:layout_width="40dp"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="right|end"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- this is your nav-button toolbar-->
</FrameLayout>
</android.support.design.widget.AppBarLayout>
and set onclicklistener for it:
toolbar0.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (drawer.isDrawerOpen(Gravity.RIGHT)) {
drawer.closeDrawer(Gravity.RIGHT);
} else {
drawer.openDrawer(Gravity.RIGHT);
}
}
});
From Developer's Guide:
Drawer positioning and layout is controlled using the
android:layout_gravity attribute on child views corresponding to which
side of the view you want the drawer to emerge from: left or right.
(Or start/end on platform versions that support layout direction.)
Which means, you can do this by:
<DrawerLayout
android:layout_gravity="right">
</DrawerLayout>
Edit
According to Creating a Navigation Drawer,
The drawer view (the ListView) must specify its horizontal gravity
with the android:layout_gravity attribute. To support right-to-left
(RTL) languages, specify the value with "start" instead of "left" (so
the drawer appears on the right when the layout is RTL).
So you should do:
<DrawerLayout
android:layout_gravity="start">
</DrawerLayout>