I want to create a second toolbar with all the menu items directing to different activities instead of creating a viewpager with different fragments. I tried to look for example online but all the examples I found are related to viewpager with fragments or collapsing toolbar. Is it possible to have a "swipeable" toolbar so that all menu items can be displayed instead of putting some of the items on overflow button? The layout I have right now is as follows. Thank you so much.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ken.android_gam24.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_bar_layout"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.Toolbar
android:id="#+id/supportToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/colorAccent"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/include2"
layout="#layout/content_main"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="159dp"
android:layout_marginEnd="159dp" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
You can nest a HorizontalScrollview inside your Toolbar layout:
<android.support.v7.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Buttons -->
</LinearLayout>
</HorizontalScrollView>
</android.support.v7.widget.Toolbar>
I am thinking of using navigationview. The example of its implementation is in this link.
Or you can use the one suggested by mrsegev: use HorizontalScrollview in your Toolbar as it is also a view group.
Related
I'm using Umano SlidingUpPanel to set a view like the following:
But no matter what I do, It can't be shown hidden. Instead, it's "peeking":
I need it to hide completely. This is my XML resource
<?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:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:sothree="http://schemas.android.com/tools"
android:id="#+id/coordinator_layout"
tools:context="com.pocket.poktsales.activities.InventoryActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
app:layout_anchorGravity="center_vertical|center_horizontal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_box_add" />
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
sothree:umanoDragView="#+id/sliding_up_panel"
android:gravity="bottom"
sothree:overlay="false"
sothree:umanoPanelHeight="0dp"
sothree:umanoParalaxOffset="100dp"
sothree:umanoShadowHeight="4dp">
<include
android:id="#+id/include"
layout="#layout/content_inventory" />
<include android:id="#+id/sliding_up_panel"
layout="#layout/content_product_detail"/>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</android.support.design.widget.CoordinatorLayout>
I have tried:
use 0 dp for panel height, no results. Actually it'snot even affected by that attribute no matter what's the value.
Wrap it inside a frame Layout with no result.
Can anyone help me to hide it completely?
In my particular case, I added the panel height programatically:
panel.setPanelHeight(0);
And now it's working!
This is the activity_main.xml layout for Androids default tab application:
<?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=".activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?
You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>
I am setting the CircularPagerIndicator underneath ViewPager using CoordinatorLayout but it is not displaying. Below is the XML
<?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="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Below method is called my Activity from onCreate Method
private void displayCarts(){
mSectionPagerAdapter = new SectionPagerAdapter(getSupportFragmentManager(), mCartCount, cartMap);
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionPagerAdapter);
mCartCountIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
mCartCountIndicator.setViewPager(mViewPager);
}
Not Sure what's going wrong.
I followed the suggestion from this link : Android CirclePageIndicator not working
but adding an extra Relative or linear layout within coordinator layout jusr to show CircularPagerIndicator does not fit my need. Any suggestions?
In a CoordinatorLayout, the actual scrollable view expands under the screen so on scroll it will shift up as toolbar hides. Anything below that won't be visible. You can try android:layout_gravity="bottom|center_horizontal" to place it at bottom of screen
<application.payrange.com.payrage.ui.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000" />
Moreover you can place this inside a container an give it a background color to make it look better. Also you can use Behavior to give it scroll effect just like Toolbar
well, for now I am falling back to adding linearlayout for View Pager and PagerIndicator. I added topmargin to the Linearlayout to display the whole view pager. Not the best possible solution , but will do the trick for now.
<?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="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout android:layout_width="match_parent"
android:orientation="vertical" android:layout_gravity="center_horizontal"
android:layout_height="match_parent"
android:layout_marginTop="70dp">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#color/default_circle_indicator_stroke_color"
app:pageColor="#color/circlepageindicator_fill_color"
android:layout_margin="#dimen/fab_margin"/>
</LinearLayout>>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
I am using floating action button with slidingtablayout, but when i use fab in fragments every tab will have its own fab, and transition looks bad like this video from google design
http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm
When i use fab in the viewpager it shrinks fragments like in the link
https://drive.google.com/file/d/0By6vpKpg_w4tcEJQUUlRazd0VEk/view?usp=sharing
Here is my code activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.smooth.www.smooth.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/ColorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
/>
</LinearLayout>
and one of my tabs
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#f0f0f0"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/tab_main_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.RecyclerView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/main_recycler"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:id="#+id/main_fab"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:transitionName="#string/fab_transition_name"
android:src="#drawable/fab_image"
app:layout_anchor="#id/main_recycler"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
what can i do to for transitions to look good??
Looks like you ar using a LinearLayout or something, instead of RelativeLayout. Can you post code snippets?
Trying to use the new support design library. In my layout I want the ToolBar to stay at the top of the screen, but have the TabLayout go off the screen when the user scrolls down. But it looks like the ViewPager goes underneath the AppBarLayout. I used this blog post for reference
https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
This is the layout, within the ViewPager holds Fragments that consist of recycler views
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/material_grey50"
android:clickable="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabLayout" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_list"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar_list"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:elevation="3dp"
android:src="#drawable/ic_videocam_white_36dp"
app:backgroundTint="#color/accent"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
Don't forget to set this in the viewpager:
app:layout_behavior="#string/appbar_scrolling_view_behavior"