I'm using a custom titlebar in my app, but everytime I create a new layout I have to call:
<include
android:id="#+id/titlebar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="#integer/titlebar_weight"
layout="#layout/titlebar" />
Instead calling this in all the layouts how can I define it in a theme (in other words: define a default layout for the theme)?
My default layout:
Although the old title bar can be customized a bit via a theme (windowTitleStyle, windowTitleSize, windowTitleBackgroundStyle), you cannot set your own layout. Also the title bar was replaced by the ActionBar in Android 3.0, so that won't help you anyway.
Setting a default layout in a theme is not possible, at least I could not find a way to do it. But you still have several options to reduce repetition when adding your header layout:
Create a master layout with your header and a ViewStub for your content, then set the inflatedId by code.
Consider building your screens with fragments and add/remove them programmatically from your master layout.
Add the header programmatically in a base activity (suggested by user1527136)
Include it (that is what you are already doing, and it is not that bad imho)
I would recommend against creating the actionbar yourself, you can either try:
Actionbar Sherlock or ActionbarCompat (from the Google samples in your SDK).
<resources>
<style name="Theme.Transparent" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
</resources>
<activity
android:theme="#style/Theme.Transparent"
</activity>
I don't think this can be achieved through theming alone. You would need to create an abstract Activity that will include your title bar and wrap the content view set by the extended Activity classes. Here's an example:
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" >
<include
android:id="#+id/titleBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/titlebar" />
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Abstract Activity
public abstract class TitleBarActivity extends Activity {
#Override
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
super.setContentView( R.layout.title_bar_activity );
}
#Override
public void setContentView( int layoutResId ) {
FrameLayout contentFrameLayout = (FrameLayout) findViewById( R.id.content );
contentFrameLayout.removeAllViews();
getLayoutInflater().inflate( layoutResId, contentFrameLayout );
}
}
This is a very simple implementation, but should give you the general idea of what you need to do. Now for any Activity that extends TitleBarActivity, you'll already have the title bar at the top by default. Any customization of the title you want your activities to control, add methods in TitleBarActivity to do so.
Related
I'm having trouble implementing a Toolbar in my Android application. I have several problems, really.
First off, here's my MainActivity.java:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_Main);
toolbar.setLogo(R.drawable.logo);
toolbar.setTitle(R.string.app_name);
toolbar.inflateMenu(R.menu.main_actions);
setActionBar(toolbar);
}
}
activity_main.xml:
<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=".MainActivity"
android:nestedScrollingEnabled="false">
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/toolbar_Main"
android:background="?android:attr/colorPrimary" />
<!-- There's an EditText here, but I think that's not the problem -->
</LinearLayout>
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
</style>
</resources>
The problems I'm having are:
the menu is gone;
the logo and title text are centered in the Toolbar, even though I'm pretty sure I haven't set any property to center or whatever.
Now the first problem I can fix by removing the setActionBar part (not sure if that's good practice though), but second one, not so much. The logo and text remain centered no matter what I try. I've tried setting the Toolbar's gravity to top|left, as well as some other things, all to no avail.
When searching on Google (or StackOverflow), all I get are results asking to center the text, which is what I don't want.
I should also mention that I'm developing the app only for API level 21, so no AppCompat and all that fancy stuff, just a Toolbar that I wish to use as the app's main ActionBar.
I'm probably just missing some tiny thing, so thanks in advance.
To me:
You should not remove the setActionBar() call;
Your menu might be disappearing because maybe you have a hardware menu button on your device. Try tapping and see what happens. To fix however, try deleting the inflateMenu() line and inflate the menu during onCreateOptionsMenu(), as usual;
Title and logo issues, as well as menu disappearing, might be due to:
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
Why these lines? Just remove them if you don't need.
If this doesn't fix, try calling setActionBar(toolbar) first, and then set title using getActionBar().setTitle() . However I'm pretty sure that removing the two window lines from your style will be enough, so do that first.
I'm flollowing next tutorial:
https://chris.banes.me/2014/10/17/appcompat-v21/
I want do that similar design:
I know i need use Two toolbars.
values/themes.xml
<resources>
<style name="Theme.MiThema" parent="Theme.AppCompat.Light">
<!-- Here we setting appcompat’s actionBarStyle -->
<!--<item name="actionBarStyle">#style/MyActionBarStyle</item>-->
<!-- ...and here we setting appcompat’s color theming attrs -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
</style>
</resources>
class.java
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.Toolbar;
public class RegistrarInciTraActivity extends ActionBarActivity
{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.registrar_inci_traf_layout);
//ocultamos ActionBar
getSupportActionBar().hide();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
layout
<?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="horizontal">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- drawer view -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">
<!-- drawer content -->
</LinearLayout>
<!-- normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The rest of content view -->
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
Tha code report one error on "setSupportActionBar(toolbar);":
(first problem) ¿What is the problem about that? (SOLVED)
(Second problem)
On my layout appear
"?attr/actionBarSize" and "?attr/colorPrimary"
Where do I have to declare those attributes?
(Third problem)
When I do two toolbars only appear once of them and I want one inside the other to display content.
What I do have to display both toolbars?
Thanks
I can give you an answer for your first problem. It is very simple - you only have to read the message given by your IDE. You're using the wrong toolbar. The toolbar you're trying to pass to the setSupportActionBar-Method is from the package android.widget. But you've to use the toolbar from the package android.support.v7.widget. So your imports are wrong - correct them and your code should work.
As 1st Problem is solved, let me try Second one,
First of all, you do not have to define these values anywhere, they are pre-defined.
"?attr/actionBarSize" : this is a default value provided by Android. You will get it at android.support.v7.appcompat/R,but it will give you an int reference. If you want to know the actual height of the Actionbar, you have to resolve the attribute actionBarSize at runtime. Follow this Link : Get ActionBar Size(answer given on other SO Q.).
Also Now with Material Design, Google shared some standards to be used while designing new Apps (or upgrading old one) in Material Design. You can follow those norms here : LayoutMetrics & keylines
"?attr/colorPrimary" : This is also a pre-defined value. You can get it at android.support.v7.appcompat/R, but it will give you an int reference. But if you want a custom background color to your ToolBar then just add an appropriate color palette, android:background="#color/colorPrimary" and define colorPrimary value in color.xml. Use this site to get different color values : Material Palette (I prefer this site).
I have a problem to implement this situation, Seen here that natively has let the entire layout as belowlayout below.
But I would like to do this, this rectangle Should be a single and clickable item
How to do this ?
If you need to display something over the main content aPopupWindow will be the best choice.
First, you need to create a custom theme that extends an existing action bar theme and set the android:windowActionBarOverlay property to true.
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
And add the following in your layout:
android:paddingTop="?android:attr/actionBarSize"
Example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize"> // <==== add this one
...
</RelativeLayout>
Read more about this.
I want to display custom search in actionbar (I'm using ActionBarSherlock for that).
I got that:
But I want make custom layout (edittext field) to occupy the entire available width.
I've implemented custom layout as suggested here.
There is my custom layout search.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?attr/actionButtonStyle"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:focusable="true" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|fill_horizontal" >
<EditText
android:id="#+id/search_query"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:background="#drawable/bg_search_edit_text"
android:imeOptions="actionSearch"
android:inputType="text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:src="#drawable/ic_search_arrow" />
</FrameLayout>
</LinearLayout>
And in MyActivity:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setIcon(R.drawable.ic_action_search);
LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflator.inflate(R.layout.search, null);
actionBar.setCustomView(v);
How can I make custom layout to occupy all the available width of actionBar?
Help, please.
There is a trick for this. All you have to do is to use RelativeLayout instead of LinearLayout as the main container. It's important to have android:layout_gravity="fill_horizontal" set for it. That should do it.
I struggled with this myself, and tried Tomik's answer.
However, this didn't made the layout to full available width on start, only when you add something to the view.
You'll need to set the LayoutParams.FILL_PARENT when adding the view:
//I'm using actionbarsherlock, but it's the same.
LayoutParams layout = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
getSupportActionBar().setCustomView(overlay, layout);
This way it completely fills the available space. (You may need to use Tomik's solution too).
This is how it worked for me (from above answers it was showing both default title and my custom view also).
ActionBar.LayoutParams layout = new ActionBar.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
// actionBar.setCustomView(view); //last view item must set to android:layout_alignParentRight="true" if few views are there
actionBar.setCustomView(view, layout); // layout param width=fill/match parent
actionBar.setDisplayShowCustomEnabled(true);//must other wise its not showing custom view.
What I noticed is that both setCustomView(view) and setCustomView(view,params) the view width=match/fill parent. setDisplayShowCustomEnabled (boolean showCustom)
The answers from Tomik and Peterdk work when you want your custom view to occupy the entire action bar, even hiding the native title.
But if you want your custom view to live side-by-side with the title (and fill all remaining space after the title is displayed), then may I refer you to the excellent answer from user Android-Developer here:
https://stackoverflow.com/a/16517395/614880
His code at bottom worked perfectly for me.
For example, you can define a layout file which contains a EditText element.
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/searchfield"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textFilter" >
</EditText>
you can do
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
// add the custom view to the action bar
actionBar.setCustomView(R.layout.actionbar_view);
EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
search.setOnEditorActionListener(new OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
Toast.makeText(MainActivity.this, "Search triggered",
Toast.LENGTH_LONG).show();
return false;
}
});
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
| ActionBar.DISPLAY_SHOW_HOME);
}
There is an example in the launcher app of Android (that I've made a library out of it, here), inside the class that handles wallpapers-picking ("WallpaperPickerActivity") .
The example shows that you need to set a customized theme for this to work. Sadly, this worked for me only using the normal framework, and not the one of the support library.
Here're the themes:
styles.xml
<style name="Theme.WallpaperPicker" parent="Theme.WallpaperCropper">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowShowWallpaper">true</item>
</style>
<style name="Theme.WallpaperCropper" parent="#android:style/Theme.DeviceDefault">
<item name="android:actionBarStyle">#style/WallpaperCropperActionBar</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="WallpaperCropperActionBar" parent="#android:style/Widget.DeviceDefault.ActionBar">
<item name="android:displayOptions">showCustom</item>
<item name="android:background">#88000000</item>
</style>
value-v19/styles.xml
<style name="Theme.WallpaperCropper" parent="#android:style/Theme.DeviceDefault">
<item name="android:actionBarStyle">#style/WallpaperCropperActionBar</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
<style name="Theme" parent="#android:style/Theme.DeviceDefault.Wallpaper.NoTitleBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
EDIT: there is a better way to do it, which works on the support library too. Just add this line of code instead of what I've written above:
getSupportActionBar().setDisplayShowCustomEnabled(true);
I am making a custom titlebar using the following xml file:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myTitle"
android:text="custom title bar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background" />
And inside my activity's onCreate() i have the following code:
public class CustomTitleBar extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.mytitle);
}
}
The title bar is coming no problem.The image i am setting as background(the name of image is background too as u can see in above xml) is also coming.But the problem is in both right and left side of the image there is remaining a little gap i.e the image is not covering the whole width of parent though the layout_width has been set to "fill_parent".
Anyone any idea.plz help.
The little gap to the left/right is added by the framework since the default windowTitleBackgroundStyle in the standard theme used a 9-patch drawable with that padding. Here's an example on how to override this:
In AndroidManifest.xml, add an android:theme for your Activity:
<activity
android:theme="#style/MyCustomTitlebar"
android:label="Custom Titlebar"
android:name=".CustomTitlebar" />
Then define the custom theme somewhere in your resources (for example in res/values/themes.xml):
<?xml version="1.0" encoding="UTF-8"?>
<resources
xmlns:android="http://schemas.android.com/apk/res/android">
<style
name="MyCustomTitlebar"
parent="#android:style/Theme">
<item
name="android:windowTitleBackgroundStyle">#style/MyBackground</item>
</style>
<style
name="MyBackground">
<item
name="android:background">#drawable/background</item>
</style>
</resources>
Since we move the background to the style, we can modify your mytitle.xml layout to the following:
<?xml version="1.0" encoding="UTF-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="custom title bar" />
You might need to adjust either your background (so it has some padding if it's a 9-patch) or just set the padding in the mytitle.xml layout (using paddingLeft/Right/Top/Bottom).
Check this post for Custom Header that is Designed for Different Device densities.
Also design you Header using Styles and themes . Custom Header for Multiple Devices