The title bar Effect of toutiao.com on Android and toutiao.com on android

The title bar Effect of toutiao.com on Android and toutiao.com on android
I have been learning about Android Application Development for some time and have some basic knowledge about application development, the blog I wrote during the learning process was compiled into a column "Android Application Development basics". But basically the code written is a Demo of a single knowledge point, which is far from a complete product. To develop complex product-level applications, the best way is to imitate the excellent applications developed by others. In the process of imitation, we gradually look at how each APP is implemented from the programmer's perspective. What are the advantages and disadvantages of each APP and how to improve itself. Exemplary others' applications are actually a Learning Method for development. If you develop your own applications without the UI and there is no interaction process, it may be difficult to start, with other people's interaction processes and resources, you can consider how to achieve similar effects if you implement relevant functions. Maybe your method is not so perfect, and the implementation effect is not as brilliant as the original version, but these are all your ideas, which is enough.

Toutiao news client is an Android app that I usually use. It is a good choice to imitate it. This series of articles will gradually implement the title bar Effect of toutiao.com.

Toutiao's title bar is not in the title bar area defined by the Android system. Instead, it is appended to the contentView of Acitivity. First, remove the title bar of the Android system as follows:
Modify the style. xml file in \ res \ values
Add an entry under the AppTheme topic
<Item name = "android: windowNoTitle"> true </item>

Instance: TouTiaoTitleBarDemo
Running effect:

Layout View hierarchy:

Code List:
Style resource file: styles. xml

<resources>    <!--        Base application theme, dependent on API level. This theme is replaced        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.    -->    <style name="AppBaseTheme" parent="android:Theme.Light">        <!--            Theme customizations available in newer API levels can go in            res/values-vXX/styles.xml, while customizations related to            backward-compatibility can go here.        -->    </style>    <!-- Application theme. -->    <style name="AppTheme" parent="AppBaseTheme">        <!-- All customizations that are NOT specific to a particular API-level can go here. -->        <item name="android:windowNoTitle">true</item>    </style>    <style name="main_title_bar_style">        <item name="android:background">@drawable/bg_titlebar_main</item>        <item name="android:layout_width">fill_parent</item>        <item name="android:layout_height">@dimen/title_bar_height</item>    </style></resources>

Layout file: activity_main.xml

<RelativeLayout android:id="@+id/main_layout"     android:background="@color/activity_bg_color"     android:layout_width="fill_parent"     android:layout_height="fill_parent"    xmlns:android="http://schemas.android.com/apk/res/android">    <RelativeLayout android:id="@+id/title_bar" style="@style/main_title_bar_style">        <FrameLayout android:id="@+id/top_head_container"             android:paddingLeft="10.0dip"             android:paddingRight="10.0dip"             android:layout_width="wrap_content"             android:layout_height="fill_parent">            <ImageView android:layout_gravity="center_vertical"                 android:id="@+id/top_head"                 android:contentDescription="@string/app_name"                android:background="@drawable/bg_head"                 android:src="@drawable/default_round_head"                android:padding="2.0dip"                 android:layout_width="@dimen/head_size"                 android:layout_height="@dimen/head_size"                 android:scaleType="fitXY" />        </FrameLayout>        <ImageView android:gravity="center"             android:id="@+id/top_more"             android:contentDescription="@string/app_name"            android:layout_width="wrap_content"             android:layout_height="fill_parent"             android:layout_marginRight="12.0dip"             android:src="@drawable/right_drawer"             android:scaleType="centerInside"             android:layout_alignParentRight="true"             android:layout_centerVertical="true" />        <RelativeLayout android:id="@+id/title_click_layout"             android:paddingLeft="13.0dip"             android:layout_width="wrap_content"             android:layout_height="fill_parent"             android:layout_centerInParent="true">            <FrameLayout android:id="@+id/title_parent"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:layout_centerVertical="true">                <ImageView android:layout_gravity="center"                     android:id="@+id/title_recent"                     android:contentDescription="@string/app_name"                    android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:src="@drawable/title" />            </FrameLayout>            <ImageView android:id="@+id/top_refresh"                 android:contentDescription="@string/app_name"                android:padding="3.0dip"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:src="@drawable/refreshicon_titlebar"                 android:layout_toRightOf="@id/title_parent"                 android:layout_centerVertical="true" />        </RelativeLayout>    </RelativeLayout></RelativeLayout>