TabHost on Facebook for Android - android

Anyone know how facebook did this:
From what I know we cannot change the height of tabhost. I'm guessing that they laid the "Frank Cho" view over the tabhost to give it the appearance of being shorter but I may be wrong. Anyone know what's going on?

You actually can have custom looking tab widgets. You need to set the tab indicator to some custom layout (with your drawables) and you should be good to go.
Here's an semi-example:
final TabHost host = getTabHost();
final TextView indicator = (TextView) getLayoutInflater().inflate(
R.layout.tab_indicator,
getTabWidget(), false);
indicator.setText("Tab title");
host.addTab(host.newTabSpec("The tab tag")
.setIndicator(indicator)
.setContent([put your content here]));
}
Where the tab_indicator layout can look like this:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab_label"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="38dp"
android:background="#drawable/minitab" />
The minitab drawable is a drawable item selector (so you need to have an image for selected, default, pressed, and unselected). The facebook app used some white drawable image for the default tab and the blue gradient drawable for the unselected tabs.
Check out the Google IO Schedule app for a full working example: http://code.google.com/p/iosched/ (and specifically the TrackDetailActivity.java)

Somebody else had what I think is the correct answer, but deleted it for some reason...
The height in question is not that of the TabHost, but of the TabWidget.
Try using the version of setIndicator() that takes a View instead of just a String or String plus drawable resource. While I have not played with this yet, my understanding is that it solves this problem nicely.
Be careful, though, that you don't wind up with tabs that are too tough to tap.

Related

Set width of tabs

I found a lot of questions about this topic, but no working answers. So I have to ask the same question again...
I have a Fragment in which I am displaying two Tabs. On smartphone devices everything looks fine. Just like I want to. But on tablets (or generally on larger screens) the two Tabs are centered, that there are two "gaps", left an right of the Tabs.
Now I want to get rid of these gaps. My favorite solution would be to stretch both Tabs to cover the complete screen width. If that is not possible, I at least want to change the color of the TabBar.
I create and add my tabs like this (I left out the text and TabListener creation and assignment):
Tab tabA;
Tab tabB;
final ActionBar myActionBar = ((ActionBarActivity) getActivity()).getSupportActionBar();
myActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
myActionBar.addTab(tabA);
myActionBar.addTab(tabB);
When I try something like this
myActionBar.getTabAt(0).getCustomView().getLayoutParams().width = 200;
I always have a NullPonterException. I also tried to use a CustomView for the tabs. I created a new TabWidget.xml Like this:
<?xml version="1.0" encoding="utf-8"?>
<TabWidget xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dip"
android:layout_height="match_parent"
>
</TabWidget>
But no chance. The tab size just does not change.
Just found this post: Stacked ActionBar tab bar not filling parent
It seems as if it is not possible to change the Tab width to a value bigger 160 dip. So for the moment I have to use plan b and change the color of the TabBar.
Instead of tabs, try to place image view with background image

how to change the tab widget size in TabHost

In my application i use the tabhost in linear layout, tabhost contains 4 tabs. The size of the tabwidget is very very high and it shows title very small. Can any one help me how to reduce the size of tabwidget.
I would insist to create custom Tabs using setIndicator(View). So, create a TextView of your desired size and set it to the TabWidget. Here is an Tutorial for the same with Example.
You can just inflate a TextView and set it to the TabWidget using
View view = LayoutInflater.from(context).inflate(R.layout.your_custom_tab-layout,
null);
TextView tv = (TextView) view.findViewById(R.id.my_text_view);
TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tv).
setContent(intent);
mTabHost.addTab(setContent);
I'm not clear on exactly what you're looking to do here, but I'll make a guess at it.
If you don't want space to be taken up by graphics (in other words, have text only) you can set the height and graviy of the widget to effectively remove the space that is used by the graphic, making for a much more compact tab label (vertically).
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:gravity="bottom" />

Android: Adding button to custom title bar

I have created a custom title bar as shown in this example
http://staticallytyped.wordpress.com/2011/03/18/android-dynamic-and-custom-title-bars/
"A custom title bar" - half way down.
On some activities I would like to place a button on the right hand side of the titlebar (same as facebook app). I have attempted to add a button to the view as follows, but it doesn't appear.
Custom title bar is displayed as follows
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.maintabhost);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.headerbar_include);
Attempting to add button as follows. The button will eventually be an ImageButton and aligned to right of custom titlebar-if I get it working. (just realised I've too many layoutparams now, but this isnt affecting the button display)
LinearLayout layout = (LinearLayout) findViewById(R.id.headerbar);
Button searchButton = new Button(this);
searchButton.setText("info");
LayoutParams layoutParams = new LinearLayout.LayoutParams
(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
searchButton.setLayoutParams(new LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
layout.addView(searchButton, layoutParams);
layout.invalidate();
I could just create another custom titlebar with the button already embedded, but a dynamic solution would be better.
Cheers
First of all, thanks for the link to my blog. Second, let me see if I can't answer that for you. One of the reasons you're having trouble adding another button when you want to add a button is that in that example I left you with no way of retrieving the Title Bar View through the usual channels. Hence, let's fix it (and potentially let me write another blog post this coming weekend.)
Starting with the xml file, add an id attribute:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:id="#+id/title_complex">
<!-- Stuff -->
</LinearLayout>
and here's code to show you how to get that button in there within your Activity (you'll have to add all the flair later):
LinearLayout layout = (LinearLayout) getWindow().findViewById(R.id.title_complex);
layout.addView(new Button(this));
and if you take a look, there's a non-descript button in the Title Bar (like I said, you'll have to add your own flair):
Due note, however, that I can't guarantee that the button will remain or won't remain on subsequent Activities. I haven't investigated it yet but this should get you started. And if you have any more questions, feel free to ask them here (more eyeballs) or on my blog.
Here's one approach to make sure the button(s) remain in the title bar:
How to Create Custom Window Title in Android
Essentially, wrap the android Activity class, and then extend from that new class.

How to display load progress animation for some image?

I would like to show progress bar (in form of rotating circle or something similar) when loading image from remote location.
I don't want standard ProgressBar that gets shown in the middle of the screen. I would like to have it in the middle of the imageView (or Layout that holds ImageView). Is there easy way to do this? For example, do I have option to attach progressBar to some View?
I was reading about FrameAnimation. I think I will do that, but first I want to make sure that I am not reinventing the wheel.
Thanks.
Do you mean like a spinner ?
Yes you can do that:
heres a sample code:
<!--Grey Spinner-->
<ProgressBar
android:id="#android:id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<!--Black Spinner-->
<ProgressBar
android:id="#android:id/progress"
style="?android:attr/progressBarStyleSmallInverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
Here are some other style attributes you can use, just replace above style attributes with one of these, e.g. style=?android:attr/<one of the attribute from below list>
progressBarStyleSmallTitle
progressBarStyleLarge
progressBarStyleLargeInverse
progressBarStyleHorizontal
progressBarStyleSmallTitle
You must also note that if you are downloading image from internet do not use UIThread. And you can also add progress bar in the title bar.
Add spinner to title bar with following code(call request.. in onCreate()):
requestWindowFeature(Window.FEATURE_PROGRESS);
//calling setContentView() after requesting
setContentView(R.layout.main);
setProgressBarVisibility(true);
//call setProgressBarVisibility(false); to turn it off
Hope this helps.
Cheers!
you can attach a ProgressBar into ImageView layout holder,
RelativeLayout
-> ImageView
->ProgressBar
then you can set layout align params to the progress bar to show it where you want.
you can do this in a xml layout and inflating later programatically, so, when you start/stop the image download process you can set the ProgressBar visibility on/off

Displaying popup images on button click

Please refer the image given in the url
http://docs.google.com/Doc?docid=0AQhgDtGvE2HgZGZ6cmtua185M2RneG5nYmNm&hl=en
My query is, How can I display the messages corresponding to the rounded buttons and the table row , when I click on the rounded button with question mark.
I know, I have to use listener for the ? button , but what should I do in listener exactly, such that when I click, it shows those alerts(images) and when I click again, it disappears.
For this UI, I have used Relative layout as was suggested here -- Aligning components at desired positions -- and it worked perfect for me.
So, do I need to change my base layout altogether for accomplishing this?
You can use a FrameLayout as the base for your ui layout and then add an ImageView overlay. For example:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MainFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Put your normal layout stuff here -->
</FrameLayout>
Then in your code you can create the ImageView and add it to the MainFrame and it will overlay your UI, like this:
FrameLayout mainFrame = (FrameLayout)findViewById(R.id.MainFrame);
ImageView overlay = new ImageView(this);
overlay.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.overlay));
mainFrame.addView(overlay);
Then later you can call:
mainFrame.removeView(overlay);
to have it go away.

Categories

Resources