how to set tab bar like the one given in image - android

i m trying to set the tabbar like the one given in the figure
here is my xml file `
<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: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="wrap_content"
android:layout_weight="1" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="30sp"
android:layout_marginBottom="40sp"
android:layout_marginLeft="70sp"
android:layout_marginRight="70sp"
android:layout_weight="0"
android:background="#drawable/rounded_corners_white_bg"
android:tabStripEnabled="false" >
</TabWidget>
</LinearLayout>
</TabHost>`
by setting left, right and bottom margins i've got this uptill now.
in this figure the tabbar is shown at the bottom with BLACK background color that's wht i don't want.
because of it's black background color my activity's content are not visible
can anyone help me???????????

I tried your layout file its giving space left side,right side and bottom. here its working fine. Are you using any other layout out side..?or may be due to your #drawable/rounded_corners_white_bg. in background take any other color like "#cd9089".

Related

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>

Forcing Android Fast Scroll Bar on ListViews to draw within padding

I am interested in creating a screen composed of a transparent header and a listview that scrolls behind the header. I have this working with one flaw; the FAST scroll bar also draws underneath header.
For some reason, the fastscrollbar doesn't seem to respect the scrollbarStyle applied to the list view. You'll notice in the image below that the normal scroll bar works fine, but the powerscroll bar is behind the transparent header.
Unfortunately the listviews I am using will often have hundreds of items, so the fastscrollbar is a necessity. Is there some way to set the "fastscrollStyle" that is not documented? I am open to any suggestions! Thank you.
Here is the layout XML for reference:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
This was fixed in KitKat for ListView, however GridView still appears to exhibit this problem. Google?
The best solution is to separate your listview from the other layouts, where the main relativelayout view is the parent and other layouts are the children.
EX.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id"#+id/layoutHeader"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true">
<TextView android:text="My Header"
android:gravity="center"
android:background="#8fff0000"
android:layout_width="fill_parent"
android:layout_height="50dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="+id/layoutHeader">
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipToPadding="false"
android:fastScrollEnabled="true"
android:scrollbars="vertical"
android:scrollbarStyle="insideOverlay"
android:paddingTop="50dp"/>
</RelativeLayout>
</RelativeLayout>
This bug appears to be fixed in 4.4. In older versions however, there appears to be no known workaround other than leaving padding at 0.

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>

tab widget text below the tab

i am new to android and had create the tabhost with two tabwidget all thing goes ok and fine and now i am displaying two different activity with two tab also.but the question is the text which i am specifying for two different tab is coming below while running the app.Below i am putting the screenshot for understanding
Screenshot:
the text are mark as red so is there any way to align that text to the center.
one more thing i m also using the drawable image for different state of user click.
thanks for any help.
the xml file for the tabhost
<?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"
>
<include layout="#layout/top_portion_layout"/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
>
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#808080">
</FrameLayout>
</LinearLayout>
</TabHost>
the portion is another layout which having two button sync all and home
which i am including in this layout
inspite of
android:textAlignment="center"
you should use
android:gravity="center"
android:layout_gravity="center_vertical"
inside tab_host element

Tab Host Issue in android

I want to display a tab at bottom of screen , so i use
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#android:id/tabcontent" />
</RelativeLayout>
</TabHost>
but also want to display a button below tab widget . At bottom of screen , we have a button and a tab widget which is above button but should be at bottom of screen .
There is any way for doing it.
Please suggest me usable link or sample code.
use linear-layout and put the tabhost and button in it
I am not sure but take one Linear or Relative Layout.
Put TabHost first and then put a button in that new Layout below TabHost.
I have not used it but I think it will work

Categories

Resources