Static fragment over ViewPager - android

I'm trying to develope a Walkthroughs that looks like skillpages app, but I don't know how to put a static fragment with buttons a ViewPager creating the filling of button flotating over the image, someone can help me please

Use http://developer.android.com/reference/android/widget/PopupWindow.html with transparent background.Position the popup window at the bottom of the screen.
Have a look at this code:https://github.com/chiragjain/Emoticons-Keyboard
It uses popupwindow to display emoticons keyboard.

Have you tried something like this?
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button />
<Button />
</LinearLayout>
</FrameLayout>

Related

ViewPager like playstore

I am trying to make viewpager work like one in google playstore in movies,music,books section.
Below is screenshot of one:
This is screenshot of viewpager i want:
below is my xml code:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vp"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginBottom="5dp">
</android.support.v4.view.ViewPager>
below is java code:
ViewPager vp;
int mResources[]= {R.drawable.b,R.drawable.c,R.drawable.d};
vp = (ViewPager)findViewById(R.id.vp);
vp.setPageMargin(-10);
vp.setAdapter(new ViewPageAdapter(ViewPagerActivity.this,mResources));
below is xml for single item:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#eee"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="220dp">
<android.support.v7.widget.CardView
android:elevation="10dp"
app:cardCornerRadius="10dp"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/c"
android:id="#+id/imageView" />
</android.support.v7.widget.CardView>
Thanks in advance for help
If I'm not mistaken, you want a ViewPager whose next/previous items partly showing.
If so, set minus page margin to the viewPager by ViewPager.setPageMargin(int), and add (positive) margins to each item's left and right.
I hope it'll help you.
You should use RecyclerView with LinearLayoutManager with a horizontal orientation. This post should answer your question. ViewPager is typically used in conjunction with entire fragments as opposed to scrolling components within those fragments according to the documentation.

Android bottom toolbar disappears when fragment fills screen

I'm working on an android app and am using a toolbar at the top of the screen and a navigation bar at the bottom of the screen. I'm using a single activity to create the top and bottom toolbars and fragments to change the content between the toolbars. However, when the contents in the fragment go beyond the size of the screen, the bottom bar disappears.
Here is my home activity xml:
<?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:id="#+id/activity_home"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.rentables.testcenter.HomeActivity">
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<fragment android:name="com.rentables.testcenter.HomeFragment"
android:id="#+id/fragment_place"
android:layout_weight="0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_home" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="bottom">
<include
android:id="#+id/toolbar_navigate"
layout="#layout/toolbar_navigate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"/>
</LinearLayout>
</LinearLayout>
Im guessing it's because of the inner linear layout I have, but I wasn't sure how else to get the nav bar to stay static at the bottom. Any help would be awesome. Thanks
Figured it out. I just changed the whole thing to a relative layout, got rid of the inner linear layout, and instead of gravity I used alignParentBottom="true".

Android Custom TabLayout: Icon overlays content

I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>

Menu that appears from the bottom on button click Android

I am learning Android these days, and I am having some trouble implementing something. When I click on the image icon, I want a menu to appear from below. The screenshot is as below. (Sorry it's in chinese....)
There's awesome library on github to get your task done.
All you need to do is setup your layout in two part as describe in below code
part 1: Your main activity(main frame)
part 2: bottom Panel which will be shown when user swipe/click on button.
You must check how to set "anchor point true" in library document.
<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoDragView="#+id/dragView"
sothree:umanoPanelHeight="68dp"
sothree:umanoParalaxOffset="10dp">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<RelativeLayout
android:id="#+id/panel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--This is bottom layout.-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FF00"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#0000FF"
android:text="Button 1" />
</LinearLayout>
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I think what you are trying to do here is to replicate the action sheet of iOS in android. There is this library which does exactly what you are looking for, https://github.com/baoyongzhang/android-ActionSheet . You can either have it as it as it is provided by author or you can clone it and suit your need accordingly. I would prefer if you could clone it as a module in your app that way you have limitless way to re-design it. If you need help on that let us know
You can simply follow the below link , it will implement what u need :
http://trickyandroid.com/fragments-translate-animation/
This will be done through Transition Fragment Animation .

ViewPager with ImageView before tab

I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !
Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.

Categories

Resources