Android App UI Design : WhatsApp like Tabs - android

How can I change the width of single Tab in a TabLayout?
setting app:tabMode="scrollable" in xml layout will change width of all tab items. But I want to change the width of individual tab items, or to be specific, the first tab item.
A good example of what I am trying to do is the camera tab in WhatsApp's home screen. Width of that tab is just enough to show the icon.
How can I achieve the same result?
Below is my layout 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="com.example.myapplication.WolfApp">
<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"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ffffff">
</android.support.design.widget.TabLayout>
</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" />
<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"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

Not the answer to your question, but, I just decompiled the WhatsApp apk, and found the layout file which I think is of the home screen,
here:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="#id/root_view" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:whatsapp="http://schemas.android.com/apk/res-auto">
<FrameLayout android:id="#id/camera_frame" android:layout_width="fill_parent" android:layout_height="fill_parent" />
<LinearLayout android:orientation="vertical" android:fitsSystemWindows="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
<RelativeLayout android:id="#id/call_notification" android:background="#drawable/call_duration_bar_background" android:paddingLeft="16.0dip" android:paddingTop="8.0dip" android:paddingRight="16.0dip" android:paddingBottom="8.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:textSize="17.0sp" android:textColor="#android:color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="#string/tap_to_return_to_call" android:layout_toLeftOf="#id/call_notification_timer" android:layout_alignParentLeft="true" />
<TextView android:textSize="16.0sp" android:textColor="#android:color/white" android:gravity="center_vertical" android:id="#id/call_notification_timer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textAllCaps="true" />
</RelativeLayout>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<FrameLayout android:id="#id/pager_holder" android:paddingTop="0.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<view android:id="#id/pager" android:layout_width="fill_parent" android:layout_height="fill_parent" class="com.whatsapp.HomeActivity$TabsPager" />
</FrameLayout>
<LinearLayout android:orientation="vertical" android:id="#id/header" android:background="?colorPrimary" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include layout="#layout/toolbar" />
<com.whatsapp.HomePagerSlidingTabStrip android:id="#id/tabs" android:background="#color/primary" android:layout_width="fill_parent" android:layout_height="#dimen/tab_height" whatsapp:pstsIndicatorColor="#color/tab_indicator" whatsapp:pstsDividerColor="#android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />
</LinearLayout>
<FrameLayout android:id="#id/search_holder" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="#dimen/abc_action_bar_default_height_material" />
<ImageView android:layout_gravity="bottom|center|right" android:id="#id/fab" android:background="#drawable/input_circle_green" android:layout_width="#dimen/submit_button_size" android:layout_height="#dimen/submit_button_size" android:layout_margin="16.0dip" android:scaleType="center" />
<ImageView android:layout_gravity="bottom|center|right" android:id="#id/fab_aux" android:background="#drawable/input_circle_grey" android:visibility="gone" android:layout_width="46.0dip" android:layout_height="46.0dip" android:layout_marginRight="21.0dip" android:layout_marginBottom="88.0dip" android:scaleType="center" android:contentDescription="#string/menuitem_new_text_status" />
</FrameLayout>
</LinearLayout>
<FrameLayout android:id="#id/preview_container" android:layout_width="fill_parent" android:layout_height="fill_parent" />
</FrameLayout>
I think the line,
<com.whatsapp.HomePagerSlidingTabStrip android:id="#id/tabs" android:background="#color/primary" android:layout_width="fill_parent" android:layout_height="#dimen/tab_height" whatsapp:pstsIndicatorColor="#color/tab_indicator" whatsapp:pstsDividerColor="#android:color/transparent" whatsapp:pstsIndicatorHeight="3.0dip" whatsapp:pstsUnderlineHeight="1.0dip" whatsapp:pstsTabPaddingLeftRight="8.0dip" whatsapp:pstsShouldExpand="true" />
Is the tab layout you have given in the question.
Also there is another layout file, which contains the custom view for tab title. The tab title in whatsapp ha badges for message counter, missed calls etc
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:layout_gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="48.0dip" android:animateLayoutChanges="true">
<TextView android:textSize="14.0sp" android:textStyle="bold" android:textColor="#android:color/white" android:ellipsize="end" android:id="#id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1.0" android:textAllCaps="true" />
<TextView android:textSize="11.0sp" android:textStyle="bold" android:textColor="#color/primary" android:ellipsize="end" android:gravity="center" android:layout_gravity="center_vertical" android:id="#id/badge" android:background="#drawable/tab_badge_background_inactive" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:minWidth="16.0dip" android:singleLine="true" />
<ImageView android:id="#id/icon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
My point is it may not be that easy to get what you are looking for. WhatsApp did that using custom views and custom tablayout.
If anyone knows a simpler solution, that would be great.

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.getChildAt(0).getLayoutParams().width = 20;

Related

Remove left space in toolbar android

I had add some view inside Toolbar but there is showing some left padding which I want to remove.
I want to remove those 'Remove this space section.
Here is my xml code:
<?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.swornimlab.swornimlab.MainActivity">
<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="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<include
layout="#layout/layout_inside_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
View which I want to add inside toolbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
>
<TextView
android:text="Hello, Asmin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="left"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"/>
<TextView
android:text="Welcome Home"
android:layout_marginTop="10dp"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:src="#drawable/ic_home_vc"
android:tint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView2" />
</LinearLayout>
Just add these two lines in your Toolbar in XML
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
Remove android:layout_gravity="center_vertical" from layout.
And add app:contentInsetStart and app:contentInsetEnd to the Toolbar :
For e.g.
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
So your code looks like this :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<include
layout="#layout/layout_inside_toolbar" />
</android.support.v7.widget.Toolbar>
layout_inside_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Hello, Asmin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="left"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"/>
<TextView
android:text="Welcome Home"
android:layout_marginTop="10dp"
android:gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
</LinearLayout>
<ImageView
android:layout_weight="1"
android:src="#drawable/ic_home_vc"
android:tint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView2" />
</LinearLayout>
android:layout_gravity="center_vertical"
This seems to be issue.
Also on another note, i would suggest you to use percentRelativelayout for your layout distribution. Using weight with your linear layout is very expensive

Hide Toolbar on scrolling tab content

I have an implementation of five tabs and a toolbar. I have used fragments for the tabs. Everything works fine except that I want to hide my toolbar whenever a tab is scrolled down and show it one it is scrolled up. Here is a graphic of my layout.
I would like help in achieving this behavior. I have tried to follow this tutorial but my toolbar is still showing on scroll.
Here is my layout code for the activity.
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/ollamoments_background"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<android.support.v7.widget.Toolbar
android:id="#+id/ollamoments_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<include layout="#layout/ollamoments_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/appBarLayout"
android:background="#color/ollamoments_background">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ProgressBar
android:id="#+id/ollamoments_upload_progress"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_centerInParent="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:indeterminate="true"
android:max="100"
android:visibility="gone" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/ollamoments_loading_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:baselineAligned="true"
android:gravity="center"
android:minHeight="25dp"
android:orientation="horizontal"
android:padding="12dp"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyle"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_centerInParent="true"
android:indeterminate="true"
android:indeterminateDrawable="#drawable/progress_background" />
</LinearLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/ollamoments_splitactionbar_background"
android:showDividers="none" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Please help me achieve this behavior. Thank you.

Navigation Drawer (SlidingMenu) is not working properly

I'm using DrawerLayout in my Activity .xml is given below :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The first child in the layout is for the main Activity UI-->
<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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#09436B"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#F1F1F1"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/tab_selected_text_color"
app:tabTextColor="#color/tab_text_color" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tab_layout"></android.support.v4.view.ViewPager>
</RelativeLayout>
<!-- Side navigation drawer UI -->
<LinearLayout
android:id="#+id/layout_navigation_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/imgUser"
android:layout_width="100dp"
android:layout_height="100dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/txtNameUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtEmaiIDUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/margin10"></View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/profile" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtAccount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/accounts" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtNotification"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/notification" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtContacts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/contacts" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtChats"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/chats" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtHelp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/help" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/margin10" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtLogout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/logout" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
But I'm getting the correct Navigation drawer.No hamburger icon is shown
I want to implement the following screen:
Please guide me where i am doing mistake.I know that inside DrawerLayout one view is for the main content of the screen and other is for Navigation Drawer items.I have studied various examples which shows i have to use the list view for the items of navigation drawer but i can not use list view here as i have to fix my design .
I would suggest you to use navigation view (put it on the bottom of drawer layout) and put your items in it.
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start">
<include layout="#layout/your navigation view layout"/>
</android.support.design.widget.NavigationView>

Add Footer to CoordinatorLayout

I want to add a Footer to CoordinatorLayout which contains a TabView + ViewPager.
Here is the main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.entree.entree.activity.StoreActivity">
<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="#android:color/black"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_tray"
android:layout_gravity="right"
android:layout_marginRight="15dp"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_find"
android:layout_gravity="right"
android:scaleType="centerInside"
android:layout_marginRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:background="#android:color/white"
app:tabIndicatorColor="#00000000"
style="#style/MyCustomTabLayout"
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"
android:layout_above="#+id/llTray" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:visibility="gone"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_search"
app:menu="#menu/activity_search_drawer" />
</android.support.v4.widget.DrawerLayout>
And here is the Xml Content:
<RelativeLayout 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:layout_below="#+id/container"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.entree.entree.activity.StoreActivity$PlaceholderFragment">
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:numColumns="1"
android:stretchMode="columnWidth">
</GridView>
<LinearLayout
android:id="#+id/llTray"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
android:visibility="gone"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:background="#color/divider"
android:layout_alignParentBottom="true">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_gravity="left"
android:gravity="left"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/btnTray"
android:src="#drawable/ic_action_tray_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
android:text="#string/view_tray" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:layout_marginRight="10dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTotalPrice"
android:layout_width="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="#string/Rs"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
The footer is in xml content.
If i remove:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in the main Xml View Pager, footer appears , else it's not shown.
How can i get the footer visible?
You already have:
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:numColumns="1"
android:stretchMode="columnWidth" />
With match_parent for both height and width which it doesn't seems to be good.
Also, Perhaps you will need to show that ViewPager with NestedScrollView for scrolling the content in future.(needs a trick, but you can achieve this).
So, my suggest is, you should be able to show that footer all the time in the below of that ViewPager by adding it like this:
<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"
android:layout_above="#+id/llTray" />
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FC0"
android:gravity="center"
app:layout_anchor="#id/main_content"
app:layout_anchorGravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Footer"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
This should show the footer all the time (even when ViewPager is collapsing).
Or if you want to show it in your ViewPager:
you should add this in your contents:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Which means, it will put the contents below the AppbarLayout
Anyways, your contents problem is coming from that GridView like i said, it will match all the content and you don't have ScrollView or even NestedScrollView to show the other contents.

Android TabHost transparent background and show underneath list

I searched a lot about this issue and applied those solutions but couldn't succeed. I need to apply transparency to FragmentTabHost and show whatever underneath that TabHost.
I also applied transparent color to all the five tabs 1 by 1, but that doesn't effect.
Thanks in advance.
XML Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/home"
android:textColor="#ffffff"
android:textStyle="normal" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:background="#color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:background="#drawable/tab_background"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

Categories

Resources