How to set android TabLayout in the bottom of the screen?
I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:
<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"
tools:context=".MainActivity"
android:orientation="vertical">
<include layout="@layout/toolbar" android:id="@+id/main_toolbar"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/white"/>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
/>
</LinearLayout>
And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().
Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Android TabLayout on the bottom of the screen
This is how I achieved it:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="in.mylo.pregnancy.baby.app.FAB">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPagerHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomNavigation" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/white"
android:elevation="80dp">
<android.support.design.widget.TabLayout
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:clickable="true"
app:tabBackground="?attr/selectableItemBackground"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
how to set the tabs in the bottom of the screen in android?
or just use a custom one from:
http://code.google.com/p/androidtabs/
it allows tabs on the bottom
Layout with tabs with ad on bottom and a button above it
Change the root of your main layout to vertical LinearLayout
instead of RelativeLayout
.
Now you have two children in LinearLayout
i.e CoordinatorLayout
and AdView
.
Since you want AdView
to lie below CoordinatorLayout
and CordinatorLayout
to occupy the rest of the space,
set the height of CoordinatorLayout
as android:layout_height="match_parent"
with android:layout_weight="1"
and the issue should be fixed.
Also change the height of AppBarLayout
and TabLayout
to match_parent
.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
ads:adSize="SMART_BANNER"
ads:adUnitId="@string/ad_id">
</com.google.android.gms.ads.AdView>
</LinearLayout>
There is no need to change in the other layout. But I would recommend you use LinearLayout
as the root layout instead of RelativeLayout
So here are the changes that I would recommend doing in your tab layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/image_section"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/text"
android:gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</LinearLayout>
Edit: Attaching images for better understanding:
Related Topics
On Android, How to Switch Activities Programmatically
Inconsistency Detected in Recyclerview, How to Change Contents of Recyclerview While Scrolling
How to Take Pictures from The Camera Without Preview When My App Starts
End Incoming Call Programmatically
Not Able to Debug App in Android Studio
Android Viewpager Padding/Margin Between Page Fragments
Sqlite Insert into Table Select * From
Install_Failed_Cpu_Abi_Incompatible on Device Using Intellij
What Is The Different Between Explicit and Implicit Activity Call in Android
User Does Not Have Permission to Access This Object . Firebase Storage Android
Onclick Method Not Working Properly After Nestedscrollview Scrolled
Android Wsdl/Soap Service Client
Adb Shell Su Works But Adb Root Does Not
Error "Package Android.Support.V7.App Does Not Exist"
Android 4.3: Ble: Filtering Behaviour of Startlescan()
Android: How to Get a Modal Dialog or Similar Modal Behavior