I have been looking for about a day for a way to get my android application have tabs in the bottom of the screen.
On the Android Developer website in the Styles and Themes section, they seem to have the exact example of what I am trying to do, however they did not find it necessary to provide a decent example of this:
All the tips/solutions I find on the web are failing. I always seem to get the following butt-ugly layout where the tabs are very misplaced in the top of the screen next to the application name :-(
Does anyone have a clue how to accomplish this ?
Thank you so much in advance for any tips !
I think these examples will be useful to you: Android Bottom tab bar example AND THIS
Here is the two link of github that has implemented tab at bottom.
https://github.com/AdilSoomro/Iphone-Tab-in-Android
https://github.com/AdilSoomro/Raised-Center-Tab-in-Android
I use this layout for locate Tabs in bottom of screen:
?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+android:id/realtabcontent"
android:background="#drawable/bg_main_app_gradient"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TabWidget
android:id="#android:id/tabs"
android:background="#EAE7E1"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
examle of code: https://stackoverflow.com/a/23150258/2765497
I think you have not search enough for your problem because you are searching using the wrong keyword.
What you are showing in 1st image at bottom of gmail app there are 4 menu and 5th overflow menu and upper at top action bar
You can place a menu at the bottom using a simple property in the manifest; one single line on main activity which showing action bar
android:uiOptions="splitActionBarWhenNarrow"
Like this :
<activity
android:name="com.example.HomeActivity"
android:screenOrientation="portrait"
android:uiOptions="splitActionBarWhenNarrow"
android:theme="#style/Theme.Sherlock.Light" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Google does not recommend to have Tabs at the bottom.
See the following official design pattern guide from Android,
And look for the section "Don't use bottom tab bars"
http://developer.android.com/design/patterns/pure-android.html
I wanted to post an update here. Bottom nav bars are now Android Canon. The main take-aways from this are:
1) Use bottom nav bars only for 3-5 icons. Any less, use tabs. Any more, use scrollable tabs (page down on that same link).
2) Avoid using a bottom nav bar and tabs together, and be sure the responsibilities of both are clearly separated if you do.
3) Bottom nav bars should be used for navigation not actions (use the ActionBar for those)
With the introduction of Bottom navigation.
https://material.google.com/components/bottom-navigation.html
You can do this
https://stackoverflow.com/a/36033640/6207502
Its very simple....
For simple tab bar we use
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
But in Bottom Tab bar we use
**
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</RelativeLayout>
</TabHost>**
The main thing is
android:layout_alignParentBottom=”true”;
I came across your question seeking to do the same thing, however according to androids development guidelines, you should not ever have a tab bar at the bottom, since this is an iOS feature...
Android Development Standards
You seem to have the bottom bar a bit confused. That's not a tab bar. The bottom bar is for actions, not navigating screens. For example, in the screenshot of the Gmail app you posted above, the bottom bar allows the user to: Compose Email, Search, Tag, Refresh and More. Refer: http://developer.android.com/design/patterns/actionbar.html
Technically these buttons do navigate the user to other screens but, the tab bar is usually used to "switch" screens. For example viewing content by category.
Hmm, but in the latest version of the Gmail app they have these action buttons on top. Sigh...
Related
I have a view which has a TabLayout in it. But the action bar is twice the height that it normally is.
I don't know if this is related to the TabLayout. The other views in the app which do not have a tabLayout, the action bar is the correct height
Has anyone experienced this? and if so what was the solution?
Here is a cut down version of my view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/tabFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
local:tabMode="fixed"
local:tabGravity="fill"
style="#style/Theme.AppCompat" />
</LinearLayout>
Update - I have since removed all the TabLayout code, and the ActionBar is still double the height it should be. I'm completely stumped on this one.
I can only think this has something to do with InvalidateOptionsMenu. I have tried changing it to use SupportInvalidateOptionsMenu.
I found out that in one of our base classes it was deciding whether the action was a tabbed mode or a navigation mode. I needed to remove the code which set it as the tabbed mode.
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.
I'm using ViewPagerIndicator Library by Jake Wharton and I'm trying to have the same browsing as Tinder and a lot of recent android apps(Talking about the starting screen)...I mean only the top part of the layout is swipeable, and a smaller part at the bottom shows Fb/Twitter/G+ login buttons.
here is a screenshot of what I wish to have : http://i.imgur.com/QK91rBW.png
I already read this Question, but I think it does not answer my need.
Can you guys help me please ?
Well since you'll be using a ViewPager you don't have to think about the region which is swipeable since the height / width of the ViewPager determines this.
Layout example:
<?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" >
<!-- Static content -->
<LinearLayout
android:id="#+id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#color/holo_blue_light"
android:orientation="vertical" />
<!-- ViewPager Indicator -->
<com.viewpagerindicator.LinePageIndicator
android:id="#+id/view_pager_indicator"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_above="#id/ll_bottom"
android:background="#color/holo_orange_light"
app:lineWidth="10dp"
app:selectedColor="#fff"
app:strokeWidth="10dp"
app:unselectedColor="#888888" />
<!-- ViewPager containing fragments with different views -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/view_pager_indicator"
android:layout_alignParentTop="true"
android:background="#color/holo_red_light" />
</RelativeLayout>
Result:
Explanation: In the blue region you place your static content which doesn't change like the Facebook-Button in your example. The orange region is used by the ViewPagerIndicator and finally the red region is the one of the ViewPager. As previously said only this area is swipeable.
I'm currently trying to create an application according the customer's specs, and these include a double tab set.
Meaning that the user needs to click in a tab at the bottom, and for example in the first tab, he will also see a set of tabs at the top where he can click (but when clicking in these, only the ones at the top will change, while the tabs at the bottom will remain the same).
How could I perform this with Android?
So far I could only implement the normal tabs creating a root item 'TabHost' just like this:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</TabHost>
Thanks a lot in advance!
I found this, thanks to the ActionBar (and SherlockActionBar for pre-Honeycomb devices):
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/app/ActionBarTabs.html
and also this:
http://www.youtube.com/watch?v=gMu8XhxUBl8
In iPhone we can create a view that has a tab bar and make it the root view of the application then use the tab bar to navigate through sub views.
what is the most close approach to this in Android?
Is it to use a Tabbed Control? but this includes using just one activity.
what is the approach to use in Android to create an activity with a navigation control to other activities in a way similar to that of the iPhone?
There's a tutorial for creating a "Tab Layout" on the android dev site:
You can implement your tab content in
one of two ways: use the tabs to swap
Views within the same Activity, or use
the tabs to change between entirely
separate activities
(source: android.com)
Sorry, I really don't know the iPhone, but may a QuickAction Dialog help you??
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
I imagine a list of some activities in that dialog.
I hope this is close to what you want.
There are a couple of examples around
http://www.anddev.org/code-snippets-for-android-f33/iphone-tabs-for-android-t14678.html
This one is scrollable
http://code.google.com/p/mobyfactory-uiwidgets-android/
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="0dp"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
</LinearLayout>
</TabHost>