Develop Reference

Android: ListView pushes out everything else below it

In my app, there is a tabbed activity with three fragments. The first fragment has a form to create a new task, the second fragment has the list of all the saved tasks, and the third fragment will show the comments on a task when selected from the list in the second fragment. The third fragment is also supposed to act like a chat activity which posts comments when you type them in and tap the send button. The XML layout of this third fragment is as follows:
<?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:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.ishita.assigntasks.CommentsFragment">
<TextView
android:id="#+id/frag_task_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dd55ff"
android:padding="10dp" />
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:transcriptMode="normal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/white">
<EditText
android:id="#+id/frag_msg_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:layout_weight="1" />
<ImageButton
android:id="#+id/frag_send_btn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:contentDescription="#string/send_btn"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</LinearLayout>
As you can see, there is a TextView and a ListView and below that is another LinearLayout. Here is how it should look (the purple bar is the TextView):
And here is how it actually looks:
The TextView shows up above the ListView, but the LinearLayout does not. It is there, though. If I do android:layout_marginBottom="20dp" on the outermost LinearLayout, it does show up, but the ActionBar scrolls up and overlaps with the notification bar so that the title on the ActionBar and the notifications on the notification bar are both visible simultaneously and neither is legible.
I searched a lot and this seemed a common issue, but none of the solutions helped me. Believe me, I tried everything I could find. I tried wrapping the whole thing in a FrameLayout, using a RelativeLayout in place of the outermost LinearLayout, using two LinearLayouts--one to wrap the TextView and the ListView and the other to wrap the EditText and the ImageButton, etc., but nothing was able to show the bottom LinearLayout below the ListView. I even tried to set focus on the EditText when the fragment launches so that the keyboard would show and I can type, but even that doesn't help.
Note: On the other hand, if I use the exact same layout on an activity, the bottom LinearLayout displays exactly as it should.
I am unable to find the bug. Please help!

It looks like your toolbar pushes fragment layout down without decreasing its height. I have no idea why this happens (there are no root layout code here).
As a workaround you can set fragments layout bottom margin to ?attr/actionBarSize

As you have given layout_weight 1 in listview layout, so it occupies the whole space available. In order to get rid of you have to give some static height or use layout_weight in right manner
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="500dp"
android:transcriptMode="normal" />
or try like this
<?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:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.ishita.assigntasks.CommentsFragment">
<TextView
android:id="#+id/frag_task_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dd55ff"
android:padding="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:background="#android:color/white">
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transcriptMode="normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#android:color/white">
<EditText
android:id="#+id/frag_msg_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:layout_weight="1" />
<ImageButton
android:id="#+id/frag_send_btn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:contentDescription="#string/send_btn"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</LinearLayout>

All,
Thank you for all your responses. I found a workaround by trial and error now and thought I should post the answer for others who face the same issue. I set android:layout_marginBottom="50dp" on the inner LinearLayout (the one wrapping the comments bar--EditText and ImageButton). Somehow, this sets the layout correctly and the fragment functions properly in both Lollipop and Jellybean OS's. I haven't tested on other OS versions.

First of all you should read this, what is layout_weight and how it works.
You assigned layout_weight to ListView as 1, it means it covers whole height. just change it to 0.7 or any proportion you want (less than 1) will solve the problem.
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:transcriptMode="normal" />

Grid layout last rows being cut off

I have a layout which holds the grid layout as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/gridview_gallery_mine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="10sp"
android:background="#color/background"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="4"
android:padding="4dip"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/empty_list" />
</RelativeLayout>
</RelativeLayout>
The problem is that, the last rows of the grid is being cut to half. I mean the last row is only half visible. I tried giving the gridview and also its parent (RelativeLayout) padding, margin but nothing works. BTW I have this layout inflated inside a fragment with the tabs.
P.S I am learning android design. Thanks.

I had used the combinations of
Android basic actionbar,
tabhost from support library.
The answer to above question was since i had no other options for implementation, Applying padding bottom on the parent node of the content made it work.
I tried another combination with the Toolbar in appcompat v7.21 (or 21), It worked without the extra padding, So i dint get time to investigate who causing the problem, actionbar or tabhost.
~ Hope it helps

Customizing LineIndicator of ViewPagerIndicator

I am new to ViewPagerIndicator. I am using LineIndicator along with my ViewPager. The default look is tiny blue lines wherever you position them.
However, if I want to, say, change the color and the width and height, how would I do that?
Update
If you look at the sample phones shown, the one in the center has red lines at the bottom. The title of the app says "Line / Styled (via layout)". That is what I am trying to achieve.

You just need to style your LinePageIndicator in your .xml layout file.
EX:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<com.viewpagerindicator.LinePageIndicator
android:id="#+id/indicator"
android:padding="5dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:strokeWidth="4dp"
app:lineWidth="30dp"
app:unselectedColor="#FF888888"
app:selectedColor="#FF880000"
/>
</LinearLayout>

Android Vertical tabhost

i want to built a vertical Tab host like the below image
i tried with the following code but the tabs are not visible
getTabWidget().setOrientation(LinearLayout.VERTICAL);
is it possible to implement tab host like below.if possible tell me the way to implement tab host like below.and also post the links if there are any built in project's to implement it like the below Image.
(or)
is it possible to add an activity to image view click similar to tab bar click like below
mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1));
because if it is possible i will put image views and change the activities on each item click
Help me out in making the vertical tab-host.

You just need to place your tab Widget in a horizontal LinearLayout in your XML file:
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/imageView3" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical">
</TabWidget>
</LinearLayout>
</TabHost>
this will place the tabs to the right of the content, if you want it to the left you need to rearrange the order in the XML file.

Better use fragments. Make a layout with vertically aligned buttons and use fragments for transition of pages on button click. Refer this to know more about fragments.

Just to complement Emil Adz answer.
When you add the control to the layout using the graphic tool, this adds all the code necessary for it, but it misses android:orientation="vertical" for every LinerLyout.
Example:
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</LinearLayout>
You have to type it down yourself
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>

Is it possible to create Horizontal Tabs in Android OS?

I'm using the TabHost and TabWidget to create some tabs for an Android application. I see that the tabs show up vertically one next to the other. Is there any way to make tabs that are aligned horizontally (one on top of the other) ?.
I'm creating the tabs like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="#+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
</FrameLayout>
</LinearLayout>
Something like this is what I need to do:

Try this one: https://code.google.com/p/themissingtabwidget/ . This is an open-source implementation based on the original tab widget that also works in horizontal mode.

I'm not certain, but I don't think there's much you can do with the default behavior. Android's tab support in general seems a bit clunky to me. But let me know if you do get this working -- I might be able to use it myself!
FWIW, I did my own tab behavior using image buttons and other control elements. In my case, I was trying to come up with tabs that didn't use so much screen real estate.