I'm trying to get the right layouts for a screen I am building:
Basically from what I have read, it seems that the best approach would be to split the screen in two using a TableLayout and within each place a LinearLayout.
I've tried to get something done, but given that I have no background on Xamarin development things are a bit more tricky, I'm mainly a BE developer.
Basically from what I have read, it seems that the best approach would be to split the screen in two using a TableLayout and within each place a LinearLayout.
It is not a must to use a TableLayout. You can also use a LinearLayout as the base panel and two LinearLayouts as sub panels:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<!--You contents here-->
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<!--You contents here-->
</LinearLayout>
</LinearLayout>
Notes: the tricky thing is by setting the sub LinearLayouts' layout_width to 0dp and layout_weight to 1 to let them share a ratio of width by 1:1.
Related
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.
So, I'm a new Xamarin developer and got stuck with something very basic. The compiler gives an error at android:inputType="textEmailAddress" line. The error is Error parsing XML: unbound prefix
I have tried adding all of these in the root element (Linear Layout in my case) but it doesn't work:
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
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"
Here's the complete code:
<?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">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1">
<ImageView
android:src="#drawable/loginbgandbtnldpi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/LoginBGImgView" />
<EditText
android:inputType="textEmailAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/LoginEmailEditText"
android:width="300"
android:layout_marginTop="295"
android:layout_marginLeft="30"
android:text="Email"
app:paddingStart="20"
android:paddingLeft="35"/>
<EditText
android:inputType="textPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/LoginPassEditText"
android:text="Password"
android:width="300"
android:paddingLeft="35"
android:layout_marginLeft="30"
android:layout_marginTop="348" />
<Button
android:id="#+id/LoginButton"
android:clickable="true"
android:layout_marginTop="432"
android:layout_marginLeft="100"
android:width="160"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="invisible" />
</RelativeLayout>
</LinearLayout>
EDIT:
Error Parsing XML: unbound prefix solved by removing app:paddingStart="20"
Updated Code:
<?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">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1">
<ImageView
android:src="#drawable/loginbgandbtnldpi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/LoginBGImgView" />
<EditText
android:inputType="textEmailAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/LoginEmailEditText"
android:width="300"
android:layout_marginLeft="30"
android:text="Email"
android:paddingLeft="35"
android:layout_marginRight="30"
android:layout_marginTop="295" />
<EditText
android:inputType="textPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/LoginPassEditText"
android:text="Password"
android:width="300"
android:paddingLeft="35"
android:layout_marginLeft="30"
android:layout_marginTop="348"
android:layout_marginRight="30" />
<Button
android:id="#+id/LoginButton"
android:clickable="true"
android:layout_marginTop="432"
android:layout_marginLeft="100"
android:width="160"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="invisible" />
</RelativeLayout>
</LinearLayout>
New errors list:
Severity Code Description Project File Line Suppression State
Error Integer types not allowed (at 'layout_marginLeft' with value '100').
Error Integer types not allowed (at 'layout_marginLeft' with value '30').
Error Integer types not allowed (at 'layout_marginLeft' with value '30').
Error Integer types not allowed (at 'layout_marginRight' with value '30').
Error Integer types not allowed (at 'layout_marginRight' with value '30').
Error Integer types not allowed (at 'layout_marginTop' with value '295').
Error Integer types not allowed (at 'layout_marginTop' with value '348').
Error Integer types not allowed (at 'layout_marginTop' with value '432').
Error Integer types not allowed (at 'paddingLeft' with value '35').
Error Integer types not allowed (at 'paddingLeft' with value '35').
Error Integer types not allowed (at 'width' with value '160').
Error Integer types not allowed (at 'width' with value '300').
Error Integer types not allowed (at 'width' with value '300').
EDIT 2:
Issue resolved by specifying 'dp' with the integer values.
Here is the Support different pixel densities from android's document.
To preserve the visible size of your UI on screens with different densities, you must design your UI using density-independent pixels (dp) as your unit of measurement. One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density). Android translates this value to the appropriate number of real pixels for each other density.
For example, when you specify spacing between two views, use dp:
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clickme"
android:layout_marginTop="20dp" />
When defining text sizes, however, you should instead use scalable pixels (sp) as your units (but never use sp for layout sizes). The sp unit is the same size as dp, by default, but it resizes based on the user's preferred text size.
When specifying text size, always use sp:
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
So here solution should add dp for layout in axml.
Use SP for Text size (Scale independent pixel)
and DP for Everything else(Density independent pixel)
I am going to post the answer I gave in comments:
its because you need to give a unit, just 300 wont do: android:width="300dp"
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"
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>
My problem is I can't make the button I added in my custom listview to be clickable.
Here is the XML file of my custom listview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="335dp"
android:layout_height="100dp"
android:minHeight="80dp"
android:maxHeight="250dp"
android:background="#ffffff"
android:id="#+id/list"
android:baselineAligned="false"
android:longClickable="false"
android:descendantFocusability="blocksDescendants"
android:clickable="false">
<Button
android:background="#drawable/grbgCan"
android:layout_width="15dp"
android:layout_height="20dp"
android:id="#+id/deleteMemo"
android:layout_gravity="start"
android:layout_marginLeft="270dp"
android:layout_marginTop="5dp"
android:duplicateParentState="false"
android:clickable="true" />
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/id"
android:layout_marginLeft="290dp"
android:layout_marginTop="-20dp"
android:layout_marginRight="15dp"
android:clickable="true" />
<TextView
android:id="#+id/top"
android:text="Title"
android:textColor="#ff7e7777"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="255.5dp"
android:layout_height="19.9dp"
android:paddingLeft="10dp"
android:layout_marginTop="-20dp" />
<TextView
android:id="#+id/bottom"
android:textColor="#ff7e7777"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="63.3dp"
android:paddingLeft="50dp"
android:layout_gravity="left"
android:text="Note" />
<TextView
android:text="Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/date"
android:layout_marginLeft="250dp"
android:layout_marginRight="5dp" />
</LinearLayout>
In my main activity I tried the Btn.Click event but it only produces an error. And from what I've read in similar problems, their button was initialize in their Array Adapter but I'm using SimpleCursorAdapter because I'm fetching data from my sqlite database.
What should I do then? Please don't give me java codes because some them aren't applicable in xamarin studio since it's c#. Thanks.
You can't do it this way because you have a lot of same items in ListView with same ids
You must set OnClickListener to your button in your Adapter's getView() method like this
(this is java code for android studio, so it can differ from c# code, but gist is the same)
Button btn = (Button) convertView.findViewById(R.id.deleteMemo);
btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//here you go
}
});
Try something like this (If you don't have Fragments delete the view. below)
var _view = view.FindViewById<ListView>(Resource.Id.listView1);
if (_view.ChildCount > 0){
Button _button = (Button)_view.GetItemAtPosition(0).GetChildAt(0);
}
Because you have a lot of similar objects on a list this is the only way i think to access them,
Remember that item position is relative to the current visible items on the screen and you cant access items that are not visible