Adding fab Button at the junction of two ViewPager widgets - android

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>

Related

Removing the extra top space in CoordinatorLayout- Android

I am trying to use BottomSheetBehavior to make a layout similar to what google maps is providing. I am successful in using the BottomSheetBehavior and create slide up layout. The problem I am having now is CordinatorLayout takes extra space even when my layout is collapsed.
Below is a screenshot of my layout.
White background in my main activity layout
Pink is my collapsed layout with peekHeight
And the grey background is the one which should be transparent but takes the extra space.
My main layout file
<?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">
<FrameLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content">
<include layout="#layout/sample_coordinator" />
</FrameLayout>
CordinatorLayout with BottomSheetBehavior
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/common_google_signin_btn_text_light_disabled">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/colorPrimary" />
</FrameLayout>
You have to use CoordinatorLayout in your activity layout.
Then in your bottom sheet layout insert these lines:
app:behavior_hideable="true"
app:behavior_peekHeight="Xdp"

Hiding View in Fragment on Scroll of Other View

I am using Navigation drawer activity in content_main there is one linear layout which will be inflate with fragment.
content_main.xml
<?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/content_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="net.techdesire.khabargujarat.HomeActivity"
tools:showIn="#layout/app_bar_home">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_container"/>
</RelativeLayout>
fragment_home.xml
<android.support.percent.PercentRelativeLayout
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"
tools:context="fragment.HomeFragment">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
app:layout_heightPercent="40%"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
app:layout_heightPercent="60%"
android:layout_below="#+id/viewpager">
<TextView
android:id="#+id/about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:text="#string/about_khijadiya"
android:textAppearance="#style/TextAppearance.AppCompat.Large"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/about"
android:text="#string/dummy"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"/>
</RelativeLayout>
</android.support.percent.PercentRelativeLayout>
I have large content in textview named about. I want to make it scrollable,like in image.First scroll relativelayout to full screen and if content of about is still overflow then make only about textview scrollable. When scroll reach to top and if user swipe down from there then re-display viewpager.
I think, your requirement is collapsing the view while scrolling.
So you can use
"android.support.design.widget.CollapsingToolbarLayout".
It is implemented in material design.
You can refer this link:
http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/

Android Fragment doesn't show on Large Layout

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

Android ViewPager Indicator layout

Hi Have a a VewPager indicator that will show what Fragment I am currently Viewing. I need to add a button under the circles but when I do i don't see any button at all.
My xml looks like this:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.kassisdion.library.ViewPagerWithIndicator
app:arrow.enable="true"
app:arrow.width="10dip"
app:arrow.height="500dip"
app:round.enable="true"
app:round.size="15dip"
app:round.drawable="#drawable/background_rounded"
app:round.color.default="#android:color/white"
app:round.color.selected="#android:color/holo_blue_light"
android:id="#+id/viewPagerWithIndicator"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.kassisdion.library.ViewPagerWithIndicator>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Skip"/>
</LinearLayout>
I tried changing the Layout but that just threw exceptions.
How can I do this?
Thanks

ScrollView as a first element in Navigation Drawer

I'm trying to create a navigation drawer that looks like google play store. What I've noticed in google play store drawer is that it's scrollable top to bottom (not only the listview). I managed to create a beautiful drawer that opens and closes correctly. But when I use a scrollview as a first element in drawer layout, navigation drawer glitches and shows up always on the screen as a scattered layout.
I use this code (I removed scrollview content for clarity, plus, even just one LinearLayout with 2-3 simple buttons in it, is enough to show the glitch, so it's irrelevant):
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Main Layout -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/screen"
android:layout_height="wrap_content"
tools:context=".Intro"
android:weightSum="1">
</LinearLayout>
<!-- Drawer Layout -->
<ScrollView
android:layout_width="270dp"
android:layout_height="match_parent">
....
....
...
</ScrollView>
Note that I used fixed height elements in the scroll view, and also removed ALL the listviews & expandable list views (views with auto scrolling) without any luck.
I used navigation drawer as following:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left"
android:name="com.xxx.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
And inside the fragment layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/white"
tools:context=".com.xxx.NavigationDrawerFragment">
<ScrollView
android:id="#+id/list_drawer_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Categories

Resources