Android custom back button with text

Question

I want in my Android app an action bar like the one I have in my iOS app:

.

Unfortunately I don't know how to make the back button with text only and how to move the title in the center. This would be for the entire application, not only one layout.

Could anyone help me, please?

Answer 1

I have found a simple solution.

You have just to create a layout for a custom ActionBar custom_action_bar_layout.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="50dp"
   android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textAllCaps="true"
        android:text="name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/back_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff"
        android:text="Back"/>

</RelativeLayout>

and then in your ExampleActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_edit_date);

    ActionBar mActionBar = getSupportActionBar();
    mActionBar.setDisplayShowHomeEnabled(false);
    mActionBar.setDisplayShowTitleEnabled(false);
    LayoutInflater mInflater = LayoutInflater.from(this);

    View mCustomView = mInflater.inflate(R.layout.custom_action_bar_layout, null);
    TextView title = (TextView) mCustomView.findViewById(R.id.title_text);
    title.setText("Title");
    TextView backButton = (TextView) mCustomView.findViewById(R.id.back_button);
    backButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            finish();
        }
    });

    mActionBar.setCustomView(mCustomView);
    mActionBar.setDisplayShowCustomEnabled(true);
}

and this is the result.

Answer 2

You can create one custom_toolbar.xml layout & design what you want to achieve,

See my paradigm

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"

    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">

            <TextView
                android:id="@+id/txt_back"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="0dp"
                android:gravity="center_vertical"
                android:text="Back" />

            <TextView
                android:id="@+id/txt_name"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/txt_value"
                android:layout_toRightOf="@+id/txt_back"
                android:gravity="center"
                android:text="Name" />

            <TextView
                android:id="@+id/txt_value"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:gravity="end"
                android:text="test" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Now you can include this layout in your example_activity.xml

<include
    android:id="@+id/toolbar"
    layout="@layout/custom_toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

& See desired output