I am very new in Android. I want to put a header on the top of the activity, similar to UINavigationBar in iOS. I need to put an icon on the left side of the header and a title (either text or an image with logo & title). Please find the image link to know how I want the header.
https://www.dropbox.com/s/onsc3klzc0bafia/Screen%20Shot%202016-12-08%20at%201.00.13%20PM.png?dl=0
User this in your 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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
and then in the activity onCreate(); add this
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("YOUR_TITLE");
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
This line will add the arrow at the left corner of the toolbar
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Related
I just included an options menu in my app, but in one of my activities it seems to create a white empty space- can anyone tell me why??
It work in other activities in the same app, but not this single activity.
I Hope anyone can help :-)
public class GifsActivity extends OptionsMenu {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gifs);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ImageView gifImageView = (ImageView) findViewById(R.id.iv_gif);
Glide.with(this)
.load("http://i.imgur.com/Vth6CBz.gif")
.asBitmap()
.placeholder(R.drawable.ic_cloud_off_red)
.error(R.drawable.ic_cloud_off_red)
.into(gifImageView);
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center_vertical"
android:orientation="vertical"
tools:context="com.example.examand1.GifsActivity">
<include layout="#layout/toolbar_layout"
/>
<ImageView
android:id="#+id/iv_gif"
android:layout_width="match_parent"
android:layout_height="220dp" />
</RelativeLayout>
Picture of the activity
Remove android:gravity="center_vertical" from your layout. Then your layout will be as below:
<?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="match_parent"
android:orientation="vertical">
<include
android:id="#+id/include"
layout="#layout/toolbar_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:layout_below="#id/include"
android:id="#+id/iv_gif"
android:layout_width="match_parent"
android:layout_height="220dp" />
</RelativeLayout>
I restarted to develop now after years so there were many changes.
Now I'm trying to modify the AppBar (Toolbar), for the activity. (I also see the CoordinatorLayout, but i don't know what differences have with the Linear and Relative).
So in the MainActivity.class i have:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView)
toolbar.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
mTitle.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
mTitle.setTextColor(Color.parseColor("#ff0000"));
and in activity_main.xml:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
And it works fine, the color and the title (or it seems).
Then i also created two other activity (that i open from a button (i will explain one...they made similar problems):
SecondActivity.class:
public class ActivityMappa extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mappa);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarmappa);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbarmappa_title);
setSupportActionBar(toolbar);
mTitle.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
mTitle.setTextColor(Color.parseColor("#ff0000"));
toolbar.setBackgroundColor(Color.parseColor("#fafad2"));
}
and activity_second.xml:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ActivityMappa">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarmappa"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_mappa"
android:layout_gravity="center"
android:id="#+id/toolbarmappa_title" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.constraint.ConstraintLayout>
In this second activity, the toolbar color it's right, but the text not change when i run the app (in the android studio preview it was changed), and the text it is in the #string/title_mappa and it exists.
So why the text does not change? The code is the same.
An other thing, when i add stuff in the content_main.xml, the position start under the Toolbar, and if i set the margin/padding, it starts from it, but from the other 2 activity, when i add other stuffs (like imageview), they starts from the app start at the top, above the toolbar, why?
Thank you so much for the help.
Your issue is that you are setting the text of toolbarmappa_title to the title of toolbarmappa but the title of toolbarmappa is null therefore you are setting the text to null. You need to set the text with a predefined string or set the title of toolbarmappa before you get the title.
It would be something like this:
public class ActivityMappa extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mappa);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarmappa);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbarmappa_title);
setSupportActionBar(toolbar);
toolbar.setTitle("insert title here");
mTitle.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
mTitle.setTextColor(Color.parseColor("#ff0000"));
toolbar.setBackgroundColor(Color.parseColor("#fafad2"));
}
Also, general pratice to change the text of a toolbar is not to add a TextView. You can remove the TextView and call toolbar.setTitle("insert text here"); and that eliminates the need of the TextView.
So I'm done with my app and doing final tests. On Android 5.0+ it runs fine, but on pre Lollipop devices i get strange bug.
At first, action bar was not visible on activities with ScrollView and I fixed it by putting ScrollView inside of RelativeLayout. But that solves only half of the problem. Action bar color is transparent and I can tell that because background color in my activities is #f2f2f2 and text on Action bar is white.
I see action bar title, back button and all images I put in action bar, but just can't set the color of it to ColorPrimary which is material light blue.
Here's the ACTIVITY code (not content)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="hr.app.liftme.liftmehr.VjezbeTricepsTricepsEkstenzijaKablovima">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:elevation="10dp"
app:elevation="10dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_vjezbe_triceps_triceps_ekstenzija_kablovima" />
</android.support.design.widget.CoordinatorLayout>
And here's java file where i declare
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vjezbe_triceps_triceps_ekstenzija_kablovima);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Can anyone please help me with this?
/** In your xml,color/background ,change according to your Requirement **/
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="55dp"
android:padding="#dimen/appbar_padding"
android:background="#color/appbarColor">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/place_order"
android:layout_gravity="center"
android:textSize="#dimen/appbar_txt_size"
android:textStyle="bold"
android:textColor="#color/white"
android:layout_marginTop="15dp"
android:id="#+id/toolbar_title"/>
</android.support.v7.widget.Toolbar>
/** In your java file **/
toolbar.setBackgroundColor(Color.parseColor("#617191"));
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getActivity().getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(getActivity().getResources().getColor(R.color.toolbar));
}
I want to add shadow to ToolBar and I use the following link:
ToolBar Shadow
but running app show me this error in LogCat :
java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.support.v7.widget.Toolbar
Toolbar code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="200dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/MyCustomToolbarTheme"
android:background="#drawable/main_header">
</android.support.v7.widget.Toolbar>
MainActivity XML :
<RelativeLayout 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"
tools:context=".MainActivity">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar_main"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/app_bar"
android:text="ytkbhjk"/>
MainActivity Java :
public class MainActivity extends ActionBarActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
please help me
You are going to need to make one more xml file which contains your toolbar:
Name of this xml is toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"/>
Now change your relative layout's include tag like this
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
And in your activity, do something like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
Where you use the <include /> in your MainActivity XML, you should not put the android:id="#+id/app_bar", but instead in the tag <android.support.v7.widget.Toolbar />.
I have removed relativeLayout instead just use android.support.v7.widget.Toolbar. And ts work.
Try downloading android_m2repository_r29.zip repository from https://developer.xamarin.com/guides/android/troubleshooting/resolving-library-installation-errors/ with instruction given in same.
I am trying to split the toolbar so I get a Bottom bar.
I got the Toolbar to work, but cant find how to split it.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#FF4444" />
and here is my .java.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
EDIT:
This is what I did, I got 2 toolbars, one in top, one in bottom, but I dont know if it is the right way to go.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#FF4444" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarBottom"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="#FF4444" />