Vertical tabLayout on Android (Xamarin) - c#

Issue
Make a vertical tablayout but it uses more spaces than it need.
In addition, I want tabItem's text be horizonal.
I couldn't paste an image so I paste a link that I asked at other website.
She told me that make a vertical tab with tablayout is impossible.
Screen I want to make
First image is the display what I want to make. Second image is the display at now.
https://teratail.com/questions/0p99tlvnpzqpoj
Code
XML file
<?xml version="1.0" encoding="utf-8"?>
<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">
<!--AppBar
#+id/appBar-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expanded="false">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<!--Tab & Content-->
<LinearLayout
android:id="#+id/linLay_TabContent"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/linLay_EventRep"
app:layout_constraintTop_toBottomOf="#+id/appBar">
<!--Tab & image
#+id/Tab-->
<LinearLayout
android:id="#+id/Tab"
android:layout_width="300dp"
android:layout_height="300dp"
android:rotation="-90"
app:layout_constraintEnd_toStartOf="#+id/Content"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:tabTextAppearance="#style/TabLayoutTextAppearance"
app:tabMinWidth="79dp"
app:tabMode="scrollable">
<com.google.android.material.tabs.TabItem
android:text="test1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:text="test2"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabItem
android:text="test3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.tabs.TabLayout>
<ImageButton
android:id="#+id/image"
android:layout_width="60dp"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingRight="19dp"
android:paddingLeft="17dp"/>
</LinearLayout>
<!--Content
#+id/Content-->
<LinearLayout
android:id="#+id/Content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/Tab">
<TextView
android:id="#+id/txt1"
android:text="data"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linLay_EventRep"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:text="text1"
android:layout_width="78dp"
android:layout_height="48dp"
android:layout_gravity="bottom"/>
<TextView
android:id="#+id/txt2"
android:text="text2"
android:layout_width="78dp"
android:layout_height="48dp"
android:layout_gravity="bottom"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Version
Microsoft Visual Studio 2019 Version 16.11.19
Microsoft .NET Framework Version 4.8.04084
MonoAndroid, Version=v9.0
remarks
I checked this site but couldn't understand the meaning of code Setup in Code thus couldn't write with C#.
Vertical Android TabLayout not scroll vertically

I test the code you provided and link provided. Unfortunately, TabLayout can't achieve the effect you want. And here is my screenshot of test effect. As the second answer in the link said:
TabLayout provides a horizontal layout to display tabs.
You can choose this case's method.

Related

MaterialSpinner label/hint not showing when running the app

The materialspinner is not showing any hints or labels.
This is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://shcemas.android.com/apk/res-auto"
android:orientation="vertical"
android:minWidth="300dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fr.ganfra.materialspinner.MaterialSpinner
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/eventnameSpinner"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelText="Select Event"
app:ms_hint="Select Event"
app:ms_alignLabels="true"/>
<fr.ganfra.materialspinner.MaterialSpinner
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/eventpackageSpinner"
app:ms_enableFloatingLabel="true"
app:ms_floatingLabelText="Select Package"
app:ms_hint="Select Package"
app:ms_alignLabels="true"/>
</LinearLayout>
With the code
app:ms_floatingLabelText="Select Package"
app:ms_hint="Select Package"
it is supposed to show when running the app, instead it only shows the content inside it. It is supposed to show a hint "Select Event" and "Select Package" for both spinners but it did not, and when clicking the spinner, the label would hover on top same as the EditTexts. Is there something missing?
This is the layout
Are you using nuget Nivaes.Droid.Ganfra.MaterialSpinner,right?
I found that this nuget hasn't been updated for several years and is not recommended.
But you can use Xamarin.Android Spinner as an alternative.
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Similarly, when setting property prompt, the spinner does not display the value of prompt.
But when we set property style="#android:style/Widget.Spinner" for spinner, if we set data resource for the Spinner and click the Spinner, the prompt will display in a dialog.
<Spinner
style="#android:style/Widget.Spinner"
android:tooltipText="abc"
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Of course, you can also add a TextView to display the prompt,just as document Xamarin.Android Spinner says.
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="#string/planet_prompt"
/>
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/planet_prompt"
/>
Note:
You can check the following threads for more ideas:
How to make an Android Spinner with initial text "Select One"?
Spinner prompt not showing

How to put button, edittext etc below custom toolbar

I have created a custom toolbar. But when I put things like imageview, button etc it wont be below toolbar. I also tried android:layout_below but i either its not working or I put wrong id (i tried multiple ids). Its just mixing with the toolbar.
In the code the imageview is merging with the toolbar and i want the imageview to be below it.
Thanks for anyone who answers
code:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ImageView
android:id="#+id/icon"
android:layout_below="#id/toolbar"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<android.support.design.widget.TextInputLayout
android:layout_below="#+id/icon"
android:id="#+id/forgot_input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/forgot_email"
android:hint="Enter groceries"
android:inputType="textCapWords"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.TextInputLayout>
P.s.
include is just the normal toolbar settings
I got my answer! I had to put on image view tag android:layout_marginTop="?attr/actionBarSize", it just do it below the height of the toolbar/actionbar Like that:
<ImageView
android:layout_marginTop="?attr/actionBarSize"
android:id="#+id/icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/shoppingcart"
android:layout_width="100dp"
android:layout_height="100dp"

Xamarin - Image Not Displaying

I'm trying to display an image in my Xamarin app but it does not seem to be displaying on the screen. The app complies and runs without any warnings or errors, and a separate image is displaying successfully as a long toolbar along the top of the app.
The images are held within my Resources -> Drawable directory.
XAML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="25px"
android:rowCount="5"
android:columnCount="2">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_height="150px"
android:layout_width="match_parent" />
<ImageView
android:id="#+id/cardOne"
android:layout_width="wrap_content"
android:layout_height="150px"
android:src="#drawable/m1"
android:layout_row="3"
android:layout_column="1" />
</GridLayout>
MainActivity
var imageView = FindViewById<ImageView>(Resource.Id.cardOne);
imageView.SetImageResource(Resource.Drawable.m1);

How to disable all touches for a Layout in Android

I am trying to implement a bottom sheet in Xamarin.Android and I want to disable all touches on everything that is not the bottom sheet (i.e. main layout), when the bottom sheet is active.
Main.axml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/main_layout">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<!-- Main Layou -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/main_content"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<Button
android:id="#+id/btn_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/logout"
android:layout_gravity="center" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_plus" />
</FrameLayout>
<FrameLayout
android:id="#+id/tint"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Bottom sheet -->
<FrameLayout
android:id="#+id/bottom_fragment_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#E0E0E0"
android:layout_gravity="bottom"
android:elevation="16dp"
android:translationY="160dp" />
I tried iterating over all the children and disabling them, but that changes the appearance of the button and I want to avoid that. I also tried setting the Enabled property of the layout to false, but the button was still touchable.
I think i need to somehow intercept all touches before they reach the button (and everything else that will be there later), but I don't know how to do that. By intercepting all touches I could also implement hiding of the bottom sheet after those touches.
Create a transparent RelativeLayout that covers the entire screen and use the android:clickable="true" property in it to make sure it intercepts all the click events.
Then add android:layout_alignParentBottom to your bottom sheet and put it inside this newly created RelativeLayout. This way it'll appear at the bottom and everything else won't be clickable.
<FrameLayout>
<!-- Main Layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:clickable="true">
<FrameLayout
android:id="#+id/bottom_fragment_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#E0E0E0"
android:layout_alignParentBottom="true"
android:elevation="16dp"
android:translationY="160dp" />
</RelativeLayout>
</FrameLayout>

Visual studio, Xamarin, WebView

I'm making application for android using Visual Studio and Xamarin but I have problem with WebView when I create a WebView and try to see it in android emulator i get an error:
Android.Views.InflateException: Binary XML file line #1: Error inflating class android.webkit.WebView
Anybody knows where is problem?
The Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="schemas.android.com/apk/res/android";
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webView1" />
</LinearLayout>
After trying out the Layout xml the compiler throws an error becouse of a semicolon at the end of xmlns:android="schemas.android.com/apk/res/android";. If you remove that the layout should build.
Another thing is that the url in xmlns:android attribute is missing http:// in front of the url. Without that the inflater doesn't understand the attributes correctly.
Here is a fixed Layout for you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webView1" />
</LinearLayout>

Categories