I have been developing a project that requires the usage of swipe-able tab along with a notification text for each tab, the design goes like this. How do I achieve this ?
My thoughts :
I had an idea about adding a custom layout for the tab layout and adding two textviews below each other but it wont come over the tab line !!
Any ideas on how to achieve it ? A small hint would mean so much, thanks in advance.
CODE :
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("In Circle"));
tabLayout.addTab(tabLayout.newTab().setText("You"));
tabLayout.addTab(tabLayout.newTab().setText("Request"));
XML :
<android.support.design.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="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/bottom_item"
layout="#layout/swipe_tab_header"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_above="#+id/tabs"
android:layout_alignParentTop="true" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/viewpager"
android:layout_marginBottom="5dp"
app:tabGravity="fill"
app:tabMaxWidth="0dp" />
<RelativeLayout
android:id="#+id/horizontal_slide_relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_item"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
android:id="#+id/bottom_item"
layout="#layout/tab_like_view_new"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I guess the easiest way would be to have a LinearLayout on top of the TabLayout.
Something like following pseudo-xml, and you use the "margin_top" to properly adjust the numbers:
<FrameLayout>
<android.support.design.widget.TabLayout height=48dp/>
<LinearLayout margin_top=24dp>
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
<TextView
layout_weight = 1
background="circle"/> // add here your floating numbers
</LinearLayout>
</FrameLayout>
Related
The following buttons display_current_month and display_current_year in a fragment nested in coordinator layout are not clickable in the upper half.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_custom_calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp">
<Button
android:id="#+id/display_current_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"/>
<Button
android:id="#+id/display_current_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/display_current_month"
android:layout_marginTop="15dp"/>
<LinearLayout
android:id="#+id/calendar_days_of_week"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/display_current_month"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
The coordinator layout :
<android.support.design.widget.AppBarLayout
android:id="#+id/reminders_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_rounded_rectangle">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/reminders_collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="380dp"
android:layout_margin="5dp"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Attached screenshot with actual buttons. Any help is much appreciated.
P.S. The buttons seem to have a bottom padding, which allows the buttons to be clicked with ~ 10 dp below their border.
your view pager is located under your toolbar, that's why you can't click on your buttons and your toolbar will get your screen's touchs.
you can put below code inside your ViewPager tag in your xml.
android:layout_marginTop="?android:attr/actionBarSize"
By default buttons are clickable and should get click events callback in java file as well untill you are not setting clickListener dynamically to null.
I'm looking for a way to put a view in my ViewPager below the TabBar.
I don't want it to be inside each fragment, because obiouvsly it would scroll every time I change the current fragment; I need that view to be fixed there without animations.
This is what I have now putting the View inside my TabLayout [code + img]
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#drawable/background_accent_fading"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:text="RIPASSO"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textStyle="bold" />
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
This, instead, is what I'm looking for
As you can see, RIPASSO is below my tabs, but it is fixed there.
Is there a way of obtaining it? I didn' find anything
Your TabLayout mustn't be a child of your ViewPager.
<LinearLayout
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"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
style="#style/AppTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabGravity="fill"/>
<!--here put your view, the one you want to appear in all pages.-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/popup_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
</FrameLayout>
</LinearLayout>
you can use the default android tabs, follow this :
Right click on app > New > Activity > Tabbed Activity.
and it will create everything for you.
if you want to change the color of the background color - underline color or text color.
you can do it in the XML or user
TabLayout tabLayout = binding.tabs;
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.white));
I'm using Support Android Percentage Library's RelativeLayout AKA android.support.percent.PercentRelativeLayout but it has extra margin on the left edge same as RelaytiveLayout I didn't set any margin or padding but it's still has it, Search a lot and done anything which worked for other people... but NOT SOLVED!
Activity Main Layout codes :
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainCoordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainAppbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/mainToolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<TextView
android:id="#+id/mainTitle"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/mainFlexibleSpace"
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/mainPercentRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/mainEnterLink"
android:text="#string/str_mainMessageText"
android:gravity="center"
android:textColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Any Help? See This Image of my rendered Layout Code
Check if it's a issue with the toolbar too (mainFlexibleSpace). If yes then,
Declare the toolBar in java and do this.
toolBar.setContentInsetsAbsolute(0,0);
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>
The question is simple: How to set (any) layout bellow navigation bar in a coordinatorLayout?
If I use a frameLayout in a RelativeLayout, the RelativeLayout height fill the whole screen include the navigationBar.
Here is my code:
<RelativeLayout
android:id="#+id/drawer_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/MaterialDrawerTheme.Light.DarkToolbar"
app:theme="#style/ToolbarTheme">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:textColor="#color/icons" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
And the problem (after I added a fragment the frameLayout):
image 1
And the Android Studio preview screen:
image 2
(Sorry for the images, currently i haven't got enough repulation to post directly here :( )
Change android:fitsSystemWindows to false:
android:fitsSystemWindows="false"