Android Custom Titleview Title Development Example _android

Source: Internet
Author: User
Tags getcolor gettext

Android development process, often encountered a project needs to repeat the definition of the same style title bar, Android has launched Actionbar, ToolBar, believe that useful friends will also encounter some bad times, such as the title bar centered, Need to customize XML files to toolbar and so on, do not understand Actionbar,toolbar can go to find the appropriate article to understand, here is a custom titlebar to meet the domestic theme style style.

To see the effect in advance, first the effect chart:


1. Titleview predefined IDs for the title bar, in Ids.xml under values

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <item name= "Tv_title_name"
type= "id"/ >
<item name= "Tv_left_text" type= "id"/> <item "name=" iv_left_image "
id" type=
/> Name= "Iv_right_image" type= "id"/> <item name= "iv_right_image_two" type= "
id"/> <item name=
"tv_ Right_text "type=" id "/> <item name=" tv_right_text_two "type="
id "/>

Here you can see the definition of the left hand back button ID, Title ID, the Back button ID, the left is divided into two cases: Imageview/textview, the right can exist at the same time two buttons, picture buttons, Text button combination.

2. Custom title bar Properties, in Attr.xml under Valuse

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <!--title Properties--> <declare-styleable name= " Titleattr "> <attr name=" title_name "format=" reference|string "/>" <attr name= "Title_text_color" format= " Reference|color "/> <attr name=" title_drawable_right "format=" reference "/> <attr name=" Title_drawable_ Left "format=" reference "/> <attr name=" title_text_size "format=" reference|dimension "/>" <attr name= "Left_" Text "format=" reference|string "/> <attr name=" left_image "format=" "Reference"/> <attr name= "Small_text_" Size "format=" reference|dimension "/> <attr name=" title_gravity "> <enum name=" Left "value=" 3 "/> < Enum name= "center" value= "/> <enum name=" right "value=" 5 "/> </attr> <attr name=" Right_image " format= "Reference"/> <attr name= "Right_text" format= "reference|string"/> <attr name= "Right_image_two" format= "Reference"/> <attr name= "right_text_two" format= "reference|string"; attr name= "Title_height" format= "Dimension"/> <attr name= "right_text_drawable_right" format= "Reference"/> <attr name= "Right_text_drawable_left" format= "reference"/> <attr name= "Right_text_two_drawable_right" format= "Reference"/> <attr name= "right_text_two_drawable_left" format= "reference"/> "<attr name=" Left_ Text_drawable_right "format=" reference "/> <attr name=" left_text_drawable_left "format=" reference "/> </ Declare-styleable> </resources>

• Coding Implementation

• With the previous preparation, you can start coding now, and here's a look at how to introduce our custom controls in XML:

android:id= "@+id/title_main"
android:layout_width= "Match_parent"
Android:background= "#0093fe"
title:title_name= "title"
title:right_text= "@string/more"
title:title_ Text_color= "@android: Color/white"
title:right_image_two= "@mipmap/icon_crop_rotate"
title:title_text_ Size= "20SP"
title:small_text_size= "15sp"
title:left_text= "returns"
title:left_text_drawable_left= "@ Mipmap/back_normal "
title:right_text_drawable_right=" @mipmap/bar_button_right "
android:layout_height = "50DP"/>

The title tag here is our custom, first creating a class to inherit from the Relativelayout, where the relativelayout is chosen as the parent class container, which is designed to relativelayout to control the relative position.

First we want to get the Typedarray object, and the values of all the custom attributes are obtained by it:


After you get the Typedarray object, you can start adding buttons to the container, first look at the first return button on the left. If added, look at the code first:

int lefttext = Typearray.getresourceid (r.styleable.titleattr_left_text, 0);
Charsequence charsequence = lefttext > 0? Typearray.getresources (). GetText (Lefttext): typearray.getstring (R.styleable.titleattr_left_text);

Here Left_text is a custom attribute, indicating that the text is displayed on the left side of the TextView, the text can be a predefined string in the application resource file, or it can be directly input text, take the corresponding styleable, first judge whether it is greater than 0, A greater than 0 representation is defined in a string, and the value is obtained by Typearray.getresources () GetText (), equal to 0, which indicates that the value may be given directly by way of assignment. How to assign value to TextView, where you need to first give him the width, this is all the controls need

* Layout params of relativelayout
* @return layoutparams
/private Layoutparams Initlayoutparams ( ) {return
new Layoutparams (Layoutparams.wrap_content, layoutparams.match_parent);

We write a separate method, the follow-up can be directly through


To get the preset width high, where you can see that all the parent controls are highly populated, and the width is adaptive. And then there's the new one TextView:

* Create TextView
* @param context
* @param ID of the ID of TextView
* @param charsequence text t O Show
* @param params relative params
* @return The TextView which is inited
Private Text View Createtextview (context context, int ID, charsequence charsequence, layoutparams params) {
TextView TextView = NE W TextView (context);
Textview.setlayoutparams (params);
Textview.setgravity (;
Textview.setid (ID);
Textview.setminwidth ((int) GETPIXELSIZEBYDP (minviewwidth));
Textview.settext (charsequence);
return textView;

Here you can see that we passed in the preset ID value, what needs to be displayed, and the layoutparams given above. After you create the TextView, you can also set the TextView drawable, which is set by the custom attribute Left_text_drawable_right,left_text_drawable_left settings, Up and down corresponding can be set:

* drawable of TextView
* @param typearray TypedArray
* @param leftdrawablestyleable Leftdrawablestyleable
* @param rightdrawablestyleable rightdrawablestyleable
* @param textView which TextView To set
/private void settextviewdrawable (TypedArray typearray, int leftdrawablestyleable, int Rightdrawablestyleable, TextView TextView) {
int leftdrawable = Typearray.getresourceid (leftdrawablestyleable, 0) ;
int rightdrawable = Typearray.getresourceid (rightdrawablestyleable, 0);
Textview.setcompounddrawablepadding ((int) GETPIXELSIZEBYDP (drawablepadding));
Textview.setcompounddrawableswithintrinsicbounds (leftdrawable, 0, rightdrawable, 0);

Here is also a method of extracting a way out, and then through:


You can set the drawable for the specified textview. After creating the TextView, we used a relative layout, and we need to specify the location rules:


Here the left shows. You can also set the font size by customizing properties: Small_text_size (both sides of text size), Title_text_size (caption text size) to set the font:

* Get the dimension pixel size from Typearray which-defined in attr
* @param typearray TypedArray
* @pa Ram stylable stylable
* @param defaultsize defaultsize
* @return the dimension pixel size */
private Floa T Getdimensionpixelsize (TypedArray typearray, int stylable, int defaultsize) {
int sizestyleable = Typearray.getresourceid (stylable, 0);
Return sizestyleable > 0? Typearray.getresources (). Getdimensionpixelsize (sizestyleable): Typearray.getdimensionpixelsize (stylable, (int) GETPISELSIZEBYSP (defaultsize));

, here is also a separate method to do, Typedarray usage is not much to say, you can view other articles to understand. Then set the font size as follows:

float textsize = getdimensionpixelsize (Typearray, R.styleable.titleattr_small_text_size, defaultSmallTextSize);

Text color, the same reason:

* Get textcolor
* @param typearray TypedArray
* @return textcolor
private int Gettextcolorfromattr (TypedArray typearray) {
int textcolorstyleable = Typearray.getresourceid ( R.styleable.titleattr_title_text_color, 0);
if (textcolorstyleable > 0) {return
typearray.getresources (). GetColor (textcolorstyleable);
} else { Return
Typearray.getcolor (R.styleable.titleattr_title_text_color, TextColor);

Then call the method to set the color:


So far, the first text button on the left. or the text with a picture of the button to create a good, and finally a step:


Other buttons, the same truth, can be added to the container in turn, it is not much to say, so far we need the titleview to create a good, later use can be directly called, do not need to repeat each place to coding.

Project address: GitHub source Download

The above is a small set to introduce the Android custom Titleview title Development example, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.