Develop Reference

Android App UI Design : WhatsApp like Tabs

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;

When soft keyboard in fragment is viewed the top relative layout is hidden?

Like below shown image my activity is viewing like second image .How to solve this.
I am facing the issue in when the soft keyboard is pressed the the top relative layout is hidden and recycler view is placed below the relative layout is fully viewed i the screen.How to solve this. I searched all over the stack overflow but the problem was not solved.
The xml code is attached below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:layout_marginTop="?android:attr/actionBarSize">
<com.onefitstop.utility.CustomTextViewBold
android:id="#+id/chat_activity_label"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/white_partial"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="#string/chat_activity"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/text_voiletlight"
android:textSize="18sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_chat_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/chat_activity_label"
android:scrollbars="vertical" />
</RelativeLayout>
<include layout="#layout/error_screen"></include>
</RelativeLayout>
The included layout error_screen.xml
<?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:orientation="vertical"
android:visibility="gone"
android:background="#color/white"
android:id="#+id/layoutError">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="200dp"
android:layout_gravity="center"
android:src="#drawable/ic_error_1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<com.onefitstop.utility.CustomTextView
android:id="#+id/txtErrorMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/error_msg"
android:textColor="#color/text_voiletlight"
android:textSize="24sp"
android:textStyle="bold" />
<com.onefitstop.utility.CustomButton
android:id="#+id/btnRefresh"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="80dp"
android:layout_marginRight="80dp"
android:layout_marginTop="40dp"
android:gravity="center"
android:text="Refresh"
android:textColor="#color/text_grey"
android:background="#drawable/refresh_button"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Try to set android:windowSoftInputMode="adjustResize" in your <activity> in the Manifest. See more info here.

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.

Android layout_weight not working as intended

I'm trying to implement a layout which will be divided in 2 sublayouts. I want the left layout to be 1/4 of the screen, while the right one will be the remaining 3/4 of the screen. My goal is the following: if the user presses a button, then the left layout will get hidden and the right layout will take up the whole screen (not sure if this will work).
In order to achieve this, I tried using the following layout, which doesn't really seem to be as intended.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/categoriesLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#000000"
android:orientation="vertical">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/holo_blue_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FFFFFF">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
As seen in the following picture, the problem is that the left LinearLayout is only as wide as it's content and not actually taking 1/4 of the screen.

your problem is because you set the width of its parent layout to wrap_content, and if you want to have a full screen width just set it to match_parent, so it will be like that:
<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"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
.
.
.

Use
android:weightSum="4"
in your parent layout!
You can hide your layout1 programatically calling
layout1.setVisibility(View.INVISIBLE);
Hope this helps.

You need android:weightSum attribute.
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/categoriesLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:background="#000000"
android:orientation="vertical">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:layout_width="2dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#android:color/holo_blue_light" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#FFFFFF">
<!-- added a dummy button to see something -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

need android layout advise

i want to create layout as attached below.
As you see i have added fixed buttons to bottom on the layout.
and now i have problem when content part has more than 9 elements.
While it is going to scroll, last elements are hiding back of the bottom buttons and not scrolling fully as below:
Please give me advise how to do it? Please notice i am not professional android developer.
I am now going to attach my xml layout files. Here you are:
<?xml version="1.0" encoding="utf-8"?>
<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:elevation="0dp"
android:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ToolbarColoredBackArrow" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:id="#+id/ButtonsLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#F5F5F5"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#808080" />
<LinearLayout
android:id="#+id/footer_button_icons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F5F5F5"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/borderless_button"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Here is a First Fragment layout xml of ViewPager
<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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="40dp"
android:showDividers="middle"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="20dp"></GridView>
</LinearLayout>

set android:layout_above in your scrollView
<ScrollView android:layout_above="#id/ButtonsLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
your ScrollView should be above LinearLayout which consist Buttons.

There is no need to use ScrollView in view pager. Remove ScrollView for the ViewPager whose id is pager.

paddingBottom is what you want. Add paddingBottom to your ScrollView or any other layout which is the container of the items. The padding should be slightly greater than the height of the bottom strip.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="48dp">