as pointed out in the google guidelines: https://www.google.com/design/spec-wear/components/action-drawer.html#action-drawer-usage
at 'Single Action', an ActionDrawer should not be expandable.
My question is, how to achieve that behaviour?
I've tried an WearableActionDrawer and WearableDrawerView..
I've also tried the method lockDrawerClosed() but the drawer still opens on click.
Thanks for your help! :)
Edit:
Ok, I found the solution to stop the drawer from opening. I'm using the WearableActionDrawer now and calling lockDrawerClosed(). But now I'm not sure how to change the peek_view properly.
I made a custom view - LinearLayout - which is containing an ImageView. I'm using this view for mWearableActiondrawer.setPeekView(myView). But the problem is, that the view will not be shown properly. It just shows me an empty ActionDrawer at the bottom.
But the clicklistener is working..
Here is my code:
// Bottom Action Drawer
mWearableActionDrawer = (WearableActionDrawer) findViewById(R.id.bottom_action_drawer);
mWearableActionDrawer.lockDrawerClosed();
LayoutInflater layoutInflater =
(LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
LinearLayout view =
(LinearLayout) layoutInflater.inflate(R.layout.action_drawer_peek_view, null);
mWearableActionDrawer.setPeekContent(view);
view.setOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
}
});
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_drawer_peek_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/wearable_primary"
android:orientation="vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:src="#drawable/fill_1_copy"
/>
</LinearLayout>
Any thoughts of what I'm doing wrong here? Thanks!
I don't see any error as compared to this sample code. It stated that if you only have a single action for your Action Drawer, you can use a (custom) View to peek on top of the content by calling mWearableActionDrawer.setPeekContent(View). Just make sure you set a click listener to handle user clicking on your View.
You may also try using mWearableDrawerLayout.peekDrawer(Gravity.BOTTOM);. Check again your implementation based on this documentation which shows how to initialize the contents of your drawers.
Related
Summary
I need to have 3 Tabs right below the App's Toolbar, preferably without a line separating the Tabs and the Toolbar. But they are shown in front of the bar, hiding it nearly completely.
Context
I´m working on an Android App, with a DrawerLayout/NavigationView opening up from the side, where you can navigate between pages, with one of them containing a few Tabs at the top, right below the Toolbar.
I've tried putting the TabLayout into the page, but the tabs always end up behind or in front of the Toolbar.
Putting the TabLayout into the AppBarLayout where the Toolbar is didn't seem to work as well, the tabs were correctly shown below the Toolbar, but that Tab's content was shown inside the Toolbar as well.
Toolbar and FragmentContainer in main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/main_fragment_container"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sample TabLayout in page1.xml
<androidx.constraintlayout.widget.ConstraintLayout
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">
<com.google.android.material.tabs.TabLayout
android:id="#+id/home_content_tab_layout"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:showIn="#layout/app_bar_main">
<com.google.android.material.tabs.TabItem
android:text="News"/>
<com.google.android.material.tabs.TabItem
android:text="NoNews"/>
<com.google.android.material.tabs.TabItem
android:text="Dreams"/>
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout >
Kept looking around for a solution to my problem and stumbled upon this answer to a similar question.
I moved the Toolbar, Tablayout ( its visibility set to "gone") and the Fragment Container into its own xml called app_bar_main.
Then I included it in my Main Layout:
<include
layout="#layout/app_bar_main"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
The Fragment which is supposed to show the Tabs implements the following overrides:
public override void OnViewCreated(View view, Bundle savedInstanceState)
{
viewPager = view.FindViewById<ViewPager>(Resource.Id.home_content_pager);
viewPager.Adapter = new HomeAdapter(ChildFragmentManager);
tabLayout = Activity.FindViewById<TabLayout>(Resource.Id.tablayout);
tabLayout.Visibility = ViewStates.Visible;
tabLayout.SetupWithViewPager(viewPager);
base.OnViewCreated(view, savedInstanceState);
}
public override void OnDestroyView()
{
tabLayout.Visibility = ViewStates.Gone;
base.OnDestroyView();
}
The OnDestroyView override sets the TabLayout's Visibility to Gone, so all the other Fragments are not displaying the Tabs.
This way, the Tablayout exists across all of the Fragments, and can be displayed and filled with the chosen Tabs and be hidden when not needed.
I'm using com.google.android.material and the AndroidX NuGet Packages and am fairly new to Xamarin.Android, but I hope this helps someone with a similar problem.
How do i make a page slide into the Content section when i choose the menu options ?
Currently when i select a menu option it opens a brand new page on top of my main page(page on the right).
I want it to work like html IFrame. So i want the page to load without refreshing the Menu toolbar on the right page - and of course the menu must disappear when the new page slide in.
Here is the code i use to call my another page from the menu option :
C#
[Activity(Label = "FlyInMenu", MainLauncher = true, Theme = "#android:style/Theme.Holo.Light.NoActionBar")]
public class Activity1 : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//for calling the menu opiton
var menu = FindViewById<FlyOutContainer>(Resource.Id.FlyOutContainer);
var menuButton = FindViewById(Resource.Id.MenuButton);
menuButton.Click += (sender, e) =>
{
menu.AnimatedOpened = !menu.AnimatedOpened;
};
//redirect
var myProfileOption = FindViewById(Resource.Id.linearLayout11);
myProfileOption.Click += delegate {
var intent = new Intent(this, typeof(MyProfileActivity));
StartActivity(intent);
};
}
}
AXML
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:layout_margin="8dp"
android:duplicateParentState="true">
<ImageView
android:src="#drawable/user_icon"
android:layout_width="29.0dp"
android:layout_height="44.0dp"
android:id="#+id/imageView1"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:text="Option1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:textColor="#878787"
android:textSize="18dp" />
</LinearLayout>
Another question is that how do i implement a loading page between the calls ? I.e when i click on a menu option
i would like to see a loading page an then the destination page.
You are looking for a NavigationView and DrawerLayout which is provided by the Android Design Support Library.
Xamarin provides bindings for this library. They also have a example on how to use this NavigationView (see section "Effective Navigation in Android")
I found the solution here : http://www.appliedcodelog.com/2016/01/navigation-drawer-using-material-design.html
This tutorial switch pages smoothly, without flickering or affecting the toolbar.
I am currently using the master-detail page in xamarin.forms using MVVMlight and it renders based on the default behavior of os it renders perfectly what I wanted but in android master page starts below the navigation bar. I wanted master page to cover full height of screen just like ios do so is there any way or solution for it without custom renderer or is it necessary to write custom renderer for this
Use FormsAppCompatActivity instead of FormsApplicationActivity.
define your own toolbar.axml
toolbar.axml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
Set your own ToolbarResource
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
ToolbarResource = Resource.Layout.toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
}
Yes you can. Check these links. They all use the MasterDetail page to create a Navigation Drawer. Only the Detail page becomes the main page view and the Master page becomes the sliding Menu. It is actually fairly simple. There are a couple of other good example out there also. However I think you can get the job done from the 3 links I listed. If not try a Search like How can I create a Navigation Drawer in Xamarin Forms.
http://www.meritsolutions.com/mobile-development/implementing-navigation-drawer-in-xamarinforms/
https://www.syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/
http://blog.falafel.com/xamarin-creating-a-sliding-tray/
I Want to Create a List View with a Custom layout which will contain A image and text
But all the tutorials i find all extend List Activity but i cant extend List Activity because i need to add buttons and other things to the layout.
I need to use the ListView using a custom item layout
any ideas on how to do it?
You are not bound to use ListActivity in order to have a ListView in your layout. All the samples using ListActivity are there because people are lazy ;)
So just use a regular Activity and then you simply have to add the ListView to the layout you are setting as content view. This could look something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0"
android:layout_weight="1" />
<Button
android:id="#+id/somethingButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something" />
<Button
android:id="#+id/elseButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Do something else" />
</LinearLayout>
Then in like any other Activity in your OnCreate method you do:
SetContentView(Resource.Layout.myLayout); // myLayout.axml
var listView = FindViewById<ListView>(Resource.Id.listView);
listView.Adapter = new MyAdapter(context, itemsSource);
var somethingButton = FindViewById<Button>(Resource.Id.somethingButton);
var elseButton = FindViewById<Button>(Resource.Id.elseButton);
... more code ...
ListView is just a layout just like any other, so there is nothing magic about it. MyAdapter in this sample is ofcourse something you implement, which takes your data and presents it in the desired image and text layout.
For more information about ListView and Adapter please refer to the excellent documentation which Xamarin provides.
I have an AsyncTask linked to a refresh Button (when I click on my refresh button my AsyncTask is called).
I have on my Layout a LinearLayout field for my ProgressBar :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/grey">
<Button android:id="#+id/refresh_p"
android:text="#string/refresh_promo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_button1"/>
<LinearLayout android:id="#+id/linearlayoutProgressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#color/tabTransparent"
android:cacheColorHint="#00000000"/>
<!-- <ListView android:id="#+id/list_promo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>-->
</LinearLayout>
In my AsyncTask :
#Override
protected void onPreExecute()
{
super.onPreExecute();
pb = new ProgressBar(context);
LinearLayout ll = (LinearLayout) ((Activity) context).findViewById(R.id.linearlayoutProgressBar);
ll.addView(pb);
pb.setVisibility(View.VISIBLE);
}
#Override
protected void onPostExecute(ArrayList<HashMap<String, String>> promoList)
{
...
if (pb!=null)
{
pb.setVisibility(View.GONE);
((LinearLayout)pb.getParent()).removeView(pb);
}
}
The problem I have is when I make more than 2 clicks on my Refresh Button then Multiple ProgressBar are displaying into the screen.. I just want that the new ProgressBar replace the old at the same position ..
My guess is that you are probably starting your AsyncTask in a manner similar to this:
new RefreshTask().execute(params);
Instead of that, create an instance variable in your activity. Let's say this is named mTask and substitute the above code for the following call:
if(mTask != null && mTask.getState != AsyncTask.State.RUNNING){
mTask = new RefreshTask();
mTask.execute(params);
}
This way you will ensure that only one instance of your task is running at a given time and the user will have to wait until the refresh is finished before he can start a new refresh.
If you want the user to be able to cancel an existing refresh task and run a new one, you will have to cancel the old one before starting a new one:
if(mTask != null){
if(mTask.getStatus() == AsyncTask.Status.RUNNING){
mTask.cancel(true);
}
mTask = new RefreshTask();
mTask.execute(params);
}
This way the old task and it's ProgressBar will be properly replaced by the new one.