Xamarin Tabhost - overlapped tab content - xamarin

I created a tabbed application using TabHost widget, from Xamarin.
When I am changing the tabs, they are overlapping.
https://imgur.com/a/cfRWlsl
This is the layout for the main page.
I have the tabs at the buttom of the screen and the content of the tabs above.
The tabs are created dynamically.
<?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"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/actualtabcontent"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#+id/tabContainer"/>
<LinearLayout android:id="#+id/tabContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TabHost android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/fullOpacityBlack">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent">
<TabWidget android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="90dp"
android:layout_weight="0"
android:layout_alignParentBottom="true"
android:background="#color/fullOpacityBlack" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
</LinearLayout>
</RelativeLayout>

Related

How to add Scroll View to a Linear Layout which is having Linear layouts again inside it

I have a Linear layout and again inside the linear layout I have some list off apps which are designed using Linear layouts, Now I want to scroll this list of Linear layouts. Please help me how to achieve this.
If you want to add scroll view in LinearLayout, but there are many LinearLayouts in LinearLayout, scroll this list of layout, you can take a look:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="fill_parent"
android:layout_height="fill_parent">
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- Content here -->
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- Content here -->
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- Content here -->
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- Content here -->
</LinearLayout>
</LinearLayout>
</ScrollView>

Change Background Color of MvxItemTemplate?

How does one change the Background Color of an MvxItemTemplate?
I can change the Background of the MvxListView, but that changes the background of all the elements.
Here's the relevant code:
<MvvmCross.Binding.Droid.Views.MvxListView
android:id="#+id/favoritesList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
local:MvxItemTemplate="#layout/template_screen"
local:MvxBind="ItemsSource FavoritesGroupedList; ItemClick ScreenSelectedCommand; ItemLongClick ShowUnFavoriteCommand" />
If I place BackgroundColor BlackOrBlueColor(IsUnFavorite) in the local:MvxBind for the ListView, it works. I tried to place the Binding in my template:
?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/screenIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
local:MvxBind="BackgroundColor BlackOrBlueColor(IsUnFavorite)"/>
<TextView
android:id="#+id/screenText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" />
</LinearLayout>
But it doesn't work.
You can't change the MvxItemTemplate background color, but you can change the background color of the root layout inside the item template:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="BackgroundColor BlackOrBlueColor(IsUnFavorite)">

Xamarin Designer throws exception

I'm working on a current project using Xamarin.Android. I got several view sthat use the same layout. I got used to define everything in a style for this while working with Android Studio. The problem is that Xamarin's Designer doesn't accept that "layout_width" and "layout_height" are defined in a style.
Of course it is a possibility to define those with the views, but it would increase the lines of XML-code quite a bit, and also I'd have to change more than one view if I'd change something.
I already looked into the topic but didn't find a workaround. Maybe someone got a similar problem and might have found a proper solution.
Fragment_Therapist.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:weightSum="7">
<RelativeLayout
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="250dp"
android:layout_height="250dp"
android:id="#+id/profile_icon"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true" />
<!-- Profile Name -->
<RelativeLayout
android:id="#+id/sublayout_I"
android:layout_marginTop="25dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#id/profile_icon">
<TextView
android:id="#+id/profile"
android:text="#string/therapistfragment_profile"
android:textColor="#000000"
android:textStyle="bold"
android:minWidth="50dp"
android:textSize="25dp" />
<TextView
android:id="#+id/profile_name"
android:textColor="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<!-- Profile Description-->
<RelativeLayout
android:id="#+id/sublayout_II"
android:layout_marginTop="25dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#id/sublayout_I">
<TextView
android:id="#+id/description"
android:textColor="#000000"
android:textStyle="bold"
android:minWidth="50dp"
android:text="#string/therapistfragment_description"
android:textSize="25dp" />
<TextView
android:id="#+id/profile_description"
android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
<!-- Edit, Info, Delete, Cancel and Save-->
<LinearLayout
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
<Button
android:id="#+id/edit"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginBottom="15dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
<Button
android:id="#+id/info"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginBottom="15dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
android:weightSum="4">
<LinearLayout
android:id="#+id/left"
style="#style/PlaceHolder" />
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="2">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginBottom="15dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginTop="15dp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/right"
style="#style/PlaceHolder" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
styles.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="PlaceHolder">
<item name="android:layout_height">match_parent</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_weight">1</item>
</style>
</resources>

How to Scroll two ListView as one?

I Have two listviews Side by side but I want to scroll both listviews as one how can i do that?
Tried using OnClickListener but it does not seem to work?
I think best approach is to put each list view inside a LinearLayout and specified width on it. This works to display list views side by side. Careful with listviews filling its parent, the layout don't display as you expect. ListView may bypass the width parameter of the parent.
After that you need to put these LinearLayouts on Scrollview and you need set fillViewport. You can reach detailed info about fillViewport from here
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:background="#000000"
android:layout_width="match_parent"
android:fillViewport="true" <!-- here -->
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linear1"
android:background="#FF0000"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:background="#00FF00"
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<ListView
android:id="#+id/ListView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#drawable/settingsMenuBorder"
android:scrollbars="none"
android:layout_marginTop="30dp"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:background="#0000FF"
android:id="#+id/linear3"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical" >
<ListView
android:id="#+id/ListView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#drawable/settingsMenuBorder"
android:scrollbars="none"
android:layout_marginTop="30dp"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

android lollipop: content above tabs: scrolling issue

I have an activity just like Google NewsStand where there is an image above tabs. When the user starts scrolling up, the image and tabs start scrolling up (as if the scrolling is disabled for the contents under the tabs) and the contents of the tab start scrolling once the image above the tabs goes past the screen. All this happens in one scroll motion. See Google NewsStand app for what I'm talking.how can this be achieved?
I'm using appcompat-21 and toolbar for the material look. Thanks a lot for answering this...
Below is the sample code (based on SlidingTabsBasic)
ACTIVITY_MAIN.XML
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sample_main_layout">
<FrameLayout
android:id="#+id/sample_content_fragment"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0px" />
FRAGMENT_SAMPLE.XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:layout_height="200dp" android:layout_width="wrap_content"
android:text="some random text"/>
<com.example.android.common.view.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white"/>
</LinearLayout>
PAGER_ITEM.XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item_subtitle"
android:layout_width="wrap_content"
android:layout_height="400dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Page:"/>
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="80sp" />
</LinearLayout>
</ScrollView>
This code as is allows you to scroll contents vertically within the tabs. I also want to scroll the content of the entire screen first before scrolling the tabs, just like in the NewsStand app, all in one scroll motion. How do I achieve this?

Resources