Sherlock Actionbar custom design - android

I will be very thankfull if anyone will help me find out some details about customizing sherlock actionbar.
To be more concrete: I need an action bar with four buttons. Two small buttons on the sides of the bar (on on the left side and second on the right), and one "paired" radiobutton in the middle of the bar.
When I say "paired" I mean something like in iOS when there are two buttons positioned near each other and when I press one - the second is unpressed and vice versa.
All in all it should look like this.
Is it even possible to make this or I should forget about using the wonderful sherlock creature?

I would personally abandon the idea of using ActionBarSherlock and instead just implement this using your own layout resource.
As a user of ActionBarSherlock I can say it's a fantastic library, as it essentially allows you to use the ActionBar API across all devices, including pre-Honeycomb, meaning you don't have to code a separate UI to suit pre-Honeycomb device. But the point of ActionBarSherlock is that it just provides APIs that are equivalent to those of the native ActionBar. And the problem is that the ActionBar is restrictive in what you can creatively do with it, because it is designed to offer specific functionality and controls that kind of fit around how Google want you to implement your UI. In a nutshell, you can specify a custom layout View that appears somewhere within the bar. You can also control which menu items appear as action items placed on the right-hand side of the bar (though it is ultimately still up to the system, based on screen space, if such items are made visible on the bar). The bar also allows you to implement some very special functionality (Action Views, Action Providers, etc.)
But if you're looking to create a very customised layout like the one you've pictured, and you don't need the special functionality that the ActionBar (or ActionBarSherlock) provides, then you might be better off doing it from scratch.

Yes you can make your Sherlock ActionBar like you show above. you have to set custom View to your SherLock ActionBAr. Just few lines of code
getSupportActionBar()
.setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(
R.layout.your_custom_layout);
and you custom layout should be RelativeLayout something like this
<?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="72dp" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/icon" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/icon" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/icon" />
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon" />
</RelativeLayout>

Related

Arrows for list view in Android

Is there any way where I can have default arrows in a list view,without reading them as an array from the xml? If I use ImageViews for arrows,then they might become really ugly. I am bad in graphic design.
Thank you.
EDIT
I found this site that could be useful to many people.
material design icons
You can always use this Unicode codes to draw arrows as text (if that is what you want)
U+2192 →
U+25B6 ▶
U+2794 ➔
More codes here: http://unicode-table.com/en/sets/arrows-symbols/
You can use custom layout to make the arrow as a part of the background of the list view row, look here
you will be able to do something like this:
Just follow the instructions
If you are bad at graphic design you can use free resources from net instead.
Here you have the Google free icon resources you can use with material style where you can find some arrows
Google icon pack
Look at this for android icons for different uses https://romannurik.github.io/AndroidAssetStudio/. You can use it for your list item row. If you want arrow like ios then create row ui and take imageview for arrow.
Row XML :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Your Text"/>
<ImageView
android:id="#+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/arrow" >
</ImageView>
</RelativeLayout>

android layout with fixed top and bottombar

I'm trying to build an application with a fixed top and bottombar (bars should host other controls like buttons, progressbar,...).
The content (space between top/bottombar) should be able to host activities and navigates to other activies, which also could be resulting in also changing the content of both bars (also load other activities for bars).
I've started a sample with actionBar, had this issue with fullscreen mode (Is there a theme for Holo, full screen but with Action Bar?). Resolves my problem but setting it in code behind isn't a recommended way.
What do you think? Is there a better way to reach this kind of layout, maybe is it better to use a more simple control then actionbar?
If yes, it would be great if someone knows a starting point for layouting this (example, tut) and how to realize the navigation for the content.
I'm coming from wpf with regions, I also read posts about similar functionality on stackoverflow, but I only found examples where I missed the functionality of a dynamic content (for the bars and the content between the bars).
Tons of thanks for replies
This should work (Replace middle button with say a scrollview) :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/topbutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true" >
</Button>
<Button
android:id="#+id/bottombutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true" >
</Button>
<Button
android:id="#+id/middlebutton"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_above="#id/bottombutton"
android:layout_below="#id/topbutton" >
</Button>
</RelativeLayout>
Reason why the bottom button has to be above the middle button in XML's order is that a view can only refer(e.g. android:layout_above) to views above itself.

Android 4.0 Tabbed Activity Layout

I have 2-3 Activities in my app that all share data in a memory pool. I want to be able to easily switch between these activities while keeping them all simultaneously running. In addition, I am developing for Android 4.0. I would like to use TabActivity, but it has been deprecated and replaced with ActionBar, which I have tried but I don't think it's what I'm looking for. I want large tabs, similar to the classic "Artist/Playlist/All" tabs found in the stock Android Music Application, or like the Tab Bar seen at the bottom of the screenshot below. Does anyone know of a library to create these tabs or a way to make ActionBar more customizable? Or is using TabActivity a perfectly good solution, even on ICS devices?
ActionBar is what you're looking for, actually.
You should convert your Activites to Fragments. Assuming they're not too complex, this shouldn't be hard at all. There are tons of examples out there. You need one Activity, preferably a FragmentActivity, to hold all of them.
This should help:
http://arvid-g.de/12/android-4-actionbar-with-tabs-example
There are several subquestions to this, I'll try to address them all:
-In order to use the top tabs, you want to use an ActionBar.
-If you were to do it in the style of the music app, where you swipe sideways between views and the label of the current one is always front and center... For that, the class you'd want to use is called ViewPager
You can see all of these methods by creating a new Activity in eclipse, and going through the wizard. Under "Navigation Type" you can select "Tabs", "Tabs + Swipe", "Swipe Views + Title Strip". Create any one of those Activities to see how it looks, and then look at the code to see how it's implemented & how to customize it.
-Navigation along the bottom is discouraged- See the Android Design Guide, spec the section "Don't use Bottom Tab Bars"
You have probably found an answer by now, but I thought I'll share another way you could create something like that tab bar using images and xml:
<?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"
android:orientation="vertical"
android:id="#+id/main">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tabackground"
android:layout_alignParentBottom="true"
android:id="#+id/llBottom">
<ImageButton
android:src="#drawable/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
</LinearLayout>
<ImageView
android:layout_height="24dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#10ffffff"/>
<ImageView
android:layout_height="1dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#30ffffff"/>
</RelativeLayout>
Is not perfect but with some creativity and changing some values it can look very good.
Hope it helps in some way.

Android TabWidget default style

I have a problem that sounds like this:
I have a TabHost and I want to change it's size (height and width) so I used inflate to do this
TextView tabContent = (TextView)getLayoutInflater().inflate(R.layout.tab_content,tab.getTabWidget(),false);
and my xml:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab_label"
android:layout_width="80dp"
android:layout_height="fill_parent"
android:gravity="center"
android:textSize="14sp"
android:background="#color/green"
/>
This is working, but the problem is:
How do I inherit the old style of the tab since this is canceling it.
I mean i want this to be on the grey background and if i click it, to take focus and be yellow and so on, like the default tabs?
Thanks
Arkde
When you coose to customize your tabs, the standard tab behaviour is not accessible anymore.
Here is a very good example about customizing Tabs:
http://joshclemm.com/blog/?p=136

Is there a view for a button bar? (Image link describing the view)

I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/
I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.
I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.
From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>

Categories

Resources