The usual app title bar looks like this:
Of course, such a title bar is not useless, it is still very convenient to use. But if you want to make a better-looking title bar, you need to customize a title bar, like this:
If you want to make a beautiful title bar and have no idea where to start, then follow this article to learn it.
1. Analyze how to achieve:
First of all, you need to write a layout file. This layout file only has the layout of the title bar you want, as in step 2. Then you block the default title bar in the code, and then put the title you just wrote. The column layout is added to the top of the Activity's layout file to complete. In addition, if you want to add buttons to the title bar or other controls to be monitored, you also need to write a java file for the title bar layout to implement it. This article is to add two buttons and write monitoring events for them.
2. The title bar you want to customize is a layout file
A title bar like the one above is defined early on:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bg"
>
<Button
android:id="@+id/mBt_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BACK"
android:textColor="#ffffff"
android:background="@drawable/back_bg"
android:layout_margin="5dp"
android:layout_gravity="center"/>
<TextView
android:id="@+id/mTv_title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="I am the title bar"
android:textColor="#ffffff"
android:gravity="center"
android:layout_marginTop="10dp"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginBottom="10dp"
/>
<Button
android:id="@+id/mBt_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more"
android:textColor="#ffffff"
android:background="@drawable/edit_bg"
android:layout_margin="5dp"
android:layout_gravity="center"/>
</LinearLayout>
The layout of this layout file is as follows:
As shown in the figure above, it's just a title bar layout, nothing else, because we don't need it, what we want is such a top layout, and finally we just add this layout to the top of the layout where we want to add a custom title bar Just go.
3. Next we will add the title bar we wrote to the layout we want to add
I just copy the main code, pay attention to the comments inside :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
When you do not customize the title bar java file, add the debate bar directly with include, remember to block the default title bar in the code
-->
<!--<include
android:id="@+id/title"
layout = "@layout/title"
android:layout_height="55dp"
android:layout_width="match_parent" />-->
<!--
When customizing the title bar java file, use the following code to add, remember to block the default title bar in the code,
-->
<com.example.lyp.myapp_layout.TitleLayout
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="55dp"
/>
<!--
The following are other controls you add in the interface, such as a TextView
-->
<TextView
android:id="@+id/mTv"
In this way, the custom title bar is added to the layout, and the effect is as follows:
Are you a little confused, why the original title bar is still there, we have to block the default title bar in the main code, so it doesn’t matter if you see it here, let’s see how to block the default title bar
4. Mask the default title bar in the main java code
It is OK to add the following code to the onCreate() function:
//mask the default status bar
ActionBar actionBar = getSupportActionBar ();
if (actionBar!=null){
actionBar.hide ();
}
This shields the default title bar, so that the custom title bar is completed, let's take a look at how it works:
5. Finally, talk about the realization of the click response of the title bar button
To realize the button of the custom title bar, you need to write a java file to realize it. Here is what I wrote:
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
//The name should correspond to the one marked in red above me
public class TitleLayout extends LinearLayout{
private Button mBt_back;
private Button mBt_more;
public TitleLayout(Context context, AttributeSet attrs){
super(context,attrs);
LayoutInflater.from ( context ).inflate ( R.layout.title,this );
mBt_back = findViewById ( R.id.mBt_back );
mBt_more = findViewById ( R.id.mBt_more );
mBt_back.setOnClickListener ( new OnClickListener () {
@Override
public void onClick(View view) {
Toast.makeText (getContext (),"Want to return, hum, naive earthlings!",Toast.LENGTH_SHORT ).show ();
}
} );
mBt_more.setOnClickListener ( new OnClickListener () {
@Override
public void onClick(View view) {
Toast.makeText( getContext(),"Nothing left",Toast.LENGTH_SHORT).show();
}
} );
}
}
This completes a custom title bar! ! !