I have created an application using Fragments to show List on the left and details on the right.
Following is my layout in layout-large Appointments.xaml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include
android:id="#+id/cust_toolbar"
layout="#layout/tool_bar" />
<fragment
class="com.myapp.blue.Fragments.ListFragment"
android:id="#+id/frg_list"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/frg_detail"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>
And this is the Appointments.xaml from layout Folder
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFFFF"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include
android:id="#+id/cust_toolbar"
layout="#layout/tool_bar" />
<fragment
class="com.myapp.blue.Fragments.ListFragment"
android:id="#+id/frg_list"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
Here is the code for my Activity
public class AppointmentActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
//Set Content
SetContentView(Resource.Layout.Appointments);
Toolbar toolbar = FindViewById<Toolbar>(Resource.Id.cust_toolbar);
//Set Action bar
SetActionBar(toolbar);
}
}
The application runs flawlessly on Mobiles but when I run this application with Tablets None of my fragments show. I followed the instructions on this Xamarin walkthrough and have seen other stackoverflow posts where they say that the width should be 0px or dp. But I cannot get the list fragment to show up on my Tablet. What am I missing here?
The problem is that the toolbar you include most likely has layout_width=match_parent, and as such occupies the entire linear layout with horizontal orientation. If you want your toolbar to be at the top, just make your linear layout vertical, and insert another horizontal linear layout inside with your fragments:
<?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">
<include
android:id="#+id/cust_toolbar"
layout="#layout/tool_bar" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<fragment
class="com.myapp.blue.Fragments.ListFragment"
android:id="#+id/frg_list"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/frg_detail"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
Mention width property in dp like 200dp
Related
I have implemented a navigation drawer. In the FrameLayout of navigation drawer I have added a fragment which contains 2 ViewPagers taking exactly half the screen each. Now I want to add a FAB button at the junction of these two viewpagers as shown here.
In my case both viewpagers occupy exactly half screen which is slightly different from what is shown in image. Can somebody help me in getting the FAB at the junction.
The code for the fragment containing the 2 viewpagers is below:
<?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">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shirt_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pant_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
You could enclose your linear layout into FrameLayout and add your button like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
<ImageButton
android:layout_gravity="center_vertical|right"
...
/>
</FrameLayout>
I have this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="fill_parent"
android:layout_height="155dp" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/titles"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
and this code to attach the indicator in the ViewPager
CirclePageIndicator circleIndicator = (CirclePageIndicator)view.findViewById(R.id.titles);
circleIndicator.setViewPager(viewPager);
The code is working properly but is not doing exactly what i want.
The indicator is displayed at the bottom of my viewPager (below the 3 images i'm using)
is it possible to move the indicator inside the images?? So the result should be an image with the indicator "embeded".
You could try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="155dp" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/titles"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/view_pager" />
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/view_pager"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Explanation: The ViewPager will automatically be aligned top-left within the RelativeLayout. The ListView is is anchored between the bottom of the ViewPager and the bottom of the RelativeLayout (the layout_width="0dp" is intentional). The CirclePagerIndicator has its bottom aligned with the bottom of the ViewPager.
In app, I want to embed a MapFragment in a ScrollView and put a custom fragment above a SupportMapFragment
Works like a charm on smaller screens, but on a large enough display, the map is not taking up all the size it could.
Instead of the fixed layout_height below, I tried match_parent, wrap_content, fiddling with the gravity of the LinearLayout.
Any other tricks I could try?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/mapParent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal|bottom">
<fragment
android:name="SomeCustomFragment"
android:id="#+id/details_fragment"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="480dp">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="480dp"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_alignParentBottom="true"/>
<View
android:id="#+id/imageView123"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Here is my layout. The problem is that either the PageViewer contents are visible and nothing else. If I see PageViewer to gone than I see everything above it. Also tried root layout as frame layout but it does not help. Main thing is only the view pager is visible. What I want is 2/3 ViewPager contents which contains data, and above some header material that is 1/3. I don't want to use weights as the upper part is already sized correctly. I just want to guarantee that both the top and pageviewer display properly. Is it a characteristic of pageviewers that they switch everything? or can they not be applied below another element?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mHeaderHeader"
android:visibility="visible"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<include
android:id="#+id/myInclude"
layout="#layout/myInclude_layout" />
<include
android:id="#+id/myInclude2r"
layout="#layout/myInclude2" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</FrameLayout>
<include
android:id="#+id/myInclude3"
layout="#layout/myinclude3layout" />
<ImageView
android:id="#+id/myImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<include layout="#layout/myinclude4" />
</LinearLayout>
You can try something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mHeaderHeader"
android:visibility="visible"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="vertical">
<include
android:id="#+id/myInclude"
layout="#layout/myInclude_layout" />
<include
android:id="#+id/myInclude2r"
layout="#layout/myInclude2" />
<include
android:id="#+id/myInclude3"
layout="#layout/myinclude3layout" />
<ImageView
android:id="#+id/myImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<include layout="#layout/myinclude4"
android:id="#+id/myinclude4" />
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBelow="#id/mHeaderHeader"
android:layout_alignAbove="#id/myinclude4" />
</RelativeLayout>
I suppose that ViewPager takes all space, so I placed it below header and above footer using RelativeLayout
I know this is a bit odd but bear with me.
I have a custom view, that extends TabHost and inflates a XML.
It includes several views, it is aligned to bottom and everything works great.
The problem is when I put the TabHost in a different activity, where I don't want to see any of the TabHost views. Only the TabHost tabs on top of the activity layout. Basically, I want the TabHost to be there as a disabled bottom bar.
here's the TabHost XML (which works great and aligned to bottom, as long as I toggle between one of the custom views):
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<CustomView#1
android:id="#+id/tab_watch_me"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#2
android:id="#+id/tab_messages"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#3
android:id="#+id/tab_search_results"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#4
android:id="#+id/tab_my_profile"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#5
android:id="#+id/tab_user_profile"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</TabHost>
Here's the activity XML (the one that I don't want the tabhost views to be shown, only to align the tabhost buttons to the bottom):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<customview.HeaderView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
**//Notice that I don't want to show any of the customViews the tabhost hold. only the tabhost tabs/buttons**
<customview.MyTabHost
android:id="#+id/settings_tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Let me know if you need more code in order to help!
Thank you!
My RelativeLayout solution in case this helps anyone. I'm still looking for a better solution if anyone has to offer.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<customview.HeaderView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Any other view
android:layout_below="#+id/header_view"
/>
<customview.MyTabHost
android:id="#+id/settings_tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
</RelativeLayout>