I want something like this: link . A little arrow and icon but in a toolbar.
EDIT:
I have tried this:
mToolbar = (CustomToolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(R.drawable.ic_ab_back_holo_light);
mToolbar.setTitle(mMatchName);
mToolbar.setLogo(R.mipmap.ic_options);
getSupportActionBar().setHomeButtonEnabled(true);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
finish();
overridePendingTransition(0, R.anim.slide_right);
}
});
But this makes a big distance between arrow icon and Logo.
Question:
How do I put an arrow and a logo next to each other?
Your link takes you to an example of the old ActionBar, but you seem to be using the new toolbar. The new toolbar design doesn't have icons like the old version, only text, so the extra space is by design. If you want to use something like you linked then you need to use the ActionBar not a toolbar.
Here is a link on the new toolbar:
https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/
vs. the old ActionBar
https://developer.android.com/training/basics/actionbar/index.html
After some experiments I've found how to achieve in a toolbar the Up Navigation like this one:
We can create a custom layout and put it in a toolbar.
1) in onCreate method:
mToolbar = (CustomToolbar) findViewById(R.id.toolbar);
setUpCustomUpNavigation();
setSupportActionBar(mToolbar);
// to disable title in a toolbar
getSupportActionBar().setDisplayShowTitleEnabled(false);
2) setUpCustomUpNavigation() method.
private void setUpCustomUpNavigation() {
LayoutInflater mLayoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View customUpNavView = mLayoutInflater.inflate(R.layout.up_navigation_layout, null);
// "ic_ab_back_holo_light.png" Located in ...android-sdk\platforms\android-14\data\res\drawable-xhdpi
ImageView backArrowImageView = (ImageView) customUpNavView.findViewById(R.id.backArrowImageView);
ImageView logoToolbarImageView = (ImageView) customUpNavView.findViewById(R.id.logoToolbarImageView);
TextView titleTextView = (TextView) customUpNavView.findViewById(R.id.titleTextView);
// set logo
logoToolbarImageView.setImageResource(R.drawable.help_toolbar_ic_selector);
// set title
titleTextView.setText(R.string.title_activity_help);
mToolbar.addView(customUpNavView);
}
3) toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<net.stargorod.dating.toolbar.CustomToolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/colorPrimary"
android:minHeight="?actionBarSize"
style="#style/MyToolbar" />
4) in style.xml create the style: MyToolbar.
<!-- Toolbar style -->
<style name="MyToolbar" parent="Widget.AppCompat.ActionBar">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
<item name="android:padding">0dp</item>
</style>
Result:
That's it!
P.S. I'm sorry for my grammar mistakes.
Related
Add back navigation to an appBarLayout, I want to add a toolbar inside an appBarLayout in xml, and then add a back arrow to that toolbar.
I have followed this and tried to adjust it for my needs, with no luck.
Display Back Arrow on Toolbar
According to Android Docs
AppBarLayout is a vertical LinearLayout
So you will need to include your toolbar and other components inside it, something like:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
Then you can add your back navigation button to the toolbar:
Toolbar toolbar = (Toolbar) findViewById(R.id.Your_Toolbar);
setSupportActionBar(toolbar);
And then calls to:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
Override method:
#Override
public boolean onSupportNavigateUp() {
onBackPressed();
return true;
}
In your activity do the following in onCreate
ActionBar bar = getSupportActionBar();
if(bar != null){
bar.setDisplayHomeAsUpEnabled(true);
}
I'm changing toolbar color like this:
MainActivity.xml
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"></Toolbar>
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#0000ff</item>
<item name="android:colorPrimaryDark">#ff0000</item>
<item name="android:textColorPrimary">#fff</item>
</style>
and MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setActionBar(toolbar);
I can change color colorPrimaryDark and textColorPrimary but can not change colorPrimary, why?
I can change toolbar color like this:
toolbar.setBackgroundColor(Color.parseColor("#0000ff"));
but cant change using style also why after removing setActionBar(toolbar); the text and title overflow menu gone why?
From XML
android:background:"your color"
From code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(Color.parse("your color"));
You may remove NoActionBar from parent theme name
put these line
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.colorPrimary)));
Use this theme Theme.AppCompat.Light.NoActionBar instead
EDIT: For those like me who just want an image locked in the upper left-hand corner of their screen, you can set a logo to replace the app launcher icon in the corner and that accomplished this easily.
I want to have an image in the upper left-hand corner of my screen in the ActionBar instead of the icon and name of the app. So far I have gotten it there but it moves and changes size depending on what other icons are in the action bar (I have icons appear and disappear). It is also centered on the remaining space and not simply in the center.
Is there a way I can lock this image to the lefthand corner? This is how fit it into the ActionBar below.
public void ActionBarCreation(){
getActionBar().setDisplayShowHomeEnabled(false);
getActionBar().setDisplayShowTitleEnabled(false);
ImageView img = new ImageView(getApplicationContext());
img.setImageResource(R.drawable.my_image);
// 7 padded on the bottoms so it does not cover the dividing line.
img.setPadding(0, 0, 0, 7);
getActionBar().setCustomView(img);
getActionBar().setDisplayShowCustomEnabled(true);
}
Put your theme for application as
<android:theme="#android:style/Theme.NoTitleBar">
-> this will get rid off your default toolbar with app name.
Next add your own toolbar layout in your activity layout
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_height="256dp"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_horizontal"
android:id="#+id/image"
//your drawable and customizations here
android:background="#android/color/transparent"
/>
</android.support.v7.widget.Toolbar>
Now set this toolbar as your activity's toolbar:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
}}
I want to make a toolbar inside one of my tabs but nothing works for me. Can this even be done? I currently have a toolbar above my tabs but i need it to appear inside the first tab.
Here's the code (with the toolbar above tabs):
import ...
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;
CharSequence Titles[] = {"Projects", "People", "Files"};
int Numboftabs = 3;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true);
tabs.setViewPager(pager);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_primary, menu);
return true;
}
final ArrayList<String> listItems = new ArrayList<String>();
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.addButton) {
final TextView noProject = (TextView) findViewById(R.id.NOPROJECT);
final ListAdapter addAdapter = new ArrayAdapter<String>(this,
R.layout.list_item, R.id.listFrame, listItems);
final ListView lv = (ListView) findViewById(R.id.lv);
lv.setAdapter(addAdapter);
noProject.setVisibility(View.GONE);
lv.setVisibility(View.VISIBLE);
listItems.add("New Project");
lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent switchToEdit = new Intent(MainActivity.this,
TeamCreate.class);
startActivity(switchToEdit);
}
});
}
return super.onOptionsItemSelected(item);
}
}
First tab:
import ...
public class Tab1 extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v =inflater.inflate(R.layout.tab_1,container,false);
return v;
}
}
I faced a similar challenge with a non-standard toolbar and tabs and got past it, though frankly the results were odd looking. You can probably get the toolbar to work under the tab using a similar technique, however it may leave your users scratching their heads. Your technique will have 2 toolbars, one holding the TabLayout widget and another one inside the fragment(s) in the ViewPager.
I was using Material Design tabs for the Detail view in my app. It looked fine until I did the 2-pane Master-Detail view for tablets. Then I had an issue with the tabs wanting to be directly under the toolbar, but no obvious way to have the Master & Detail share the toolbar with the tabs only showing up under the Detail portion of the screen.
I got it working by:
Create a "NoActionBar" style in styles.xml, then refer to it in your main layout using "android:theme="#style/AppTheme".
<!-- Turn off normal application bar so we can put our toolbars where we please.
Do this by replacing "Theme.AppCompat.Light.DarkActionBar" with NoActionBar
per http://www.truiton.com/2015/04/android-action-bar-dialog-using-toolbar/ -->
<style name="AppTheme" parent="MaterialTheme.Base"/>
<style name="MaterialTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
Toss android.support.design.widget.CoordinatorLayout and just use a LinearLayout.
Here is a snippet that has the toolbar containing the tabs only taking up part of the screen real estate rather than the entire width. Note that the toolbar has "app:layout_scrollFlags="scroll|enterAlways":
<FrameLayout android:id="#+id/detail_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_weight="2"
tools:name="com.android.bazemom.popularmovies.TabContainerFragment"
>
<!-- second toolbar that will be used for the tabs -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!-- Helps handing the Fragments to load for each Tab -->
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
Here is what the Master-Detail view looked like on wide tablet. The tabs are circled in green. The toolbar with an action is above the tabs.
I want to change the action bar background color to a custom color. This is what I currently get:
How do I get this color on the full action bar width?
My action bar xml:
<?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="60dp"
android:background="#0c555c"
android:gravity="center"
android:id="#+id/action_bar_title"
android:paddingEnd="0dp"
android:paddingStart="0dp"
android:showAsAction="ifRoom">
</RelativeLayout>
onCreate method:
RelativeLayout actionBar = (RelativeLayout)findViewById(R.id.action_bar_title);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.action_bar);
If you are designing your custom actionBar than write your code like this:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#8B58A3")));
LayoutInflater inflater = LayoutInflater.from(this);
#SuppressLint("InflateParams")
View v = inflater.inflate(R.layout.titleview, null);
actionBar.setCustomView(v);
Hope it helps !
please add this line at the end .
Toolbar parent =(Toolbar) actionBar.getParent();
parent.setContentInsetsAbsolute(0,0);