top navigation bar with button and title

Question

I am making a android version app based on the iOS one, however, I am in trouble of making the top navigation bar. I actually want to create an action bar that is similar to the iOS interface, however, I cannot add close button, go back button, and next button.

Firstly, if it is home activity, the top navigation bar will contain a centered title and a close button, which is used to close the current activity. Like below:

Then, if the user has got a correct answer (or under some conditions), then next button will show up, if not, it won't show up.

Just like the above pictures, in picture 1, user can go back to Q1, as Q1 is already correct. Also, Q2 is also correct, as it can go to Q3. Then, in picture 2, Q3 is not answered yet, it cannot go to Q4, but it is allowed to go to Q2. And if it goes to Q2, the same interface of picture 1 will be shown (still contains the next, and back button.

I am now have an action bar, but cannot do anything but only with a title.

Manifest.xml:

<activity
  android:name=".Problems"
  android:configChanges=
     "keyboard|keyboardHidden|orientation|screenLayout|uiMode|
      screenSize|smallestScreenSize"
  android:theme="@style/AccountSetting"
  android:label="Problems" />

toolbarlayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/chtl_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/chtl_useIMG"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_launcher"
        android:visibility="visible" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nilu" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nilu" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nilu" />


</LinearLayout>

</android.support.v7.widget.Toolbar>

abs_layout.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="wrap_content"
  android:orientation="vertical" >

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="@string/app_name"
      android:textColor="#000000"
      android:id="@+id/mytext"
      android:textSize="15sp" />
</LinearLayout>

Main.java

public class Problems extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     Toolbar toolbar = (Toolbar) findViewById(R.id.chtl_toolbar);
     setSupportActionBar(toolbar);
    }
}

Style.xml

<style name="AccountSetting" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimaryDark">#ffffff</item>
    <item name="colorPrimary">#ffffff</item>
</style>

Answer 1

Try this use custom Toolbar like this

  <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chtl_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:actionBarSize">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/chtl_useIMG"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="20dp"
            android:src="@mipmap/ic_launcher_round"
            android:visibility="visible" />


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nilu" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nilu" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nilu" />


    </LinearLayout>

</android.support.v7.widget.Toolbar>

than set this toolbar as your action bar in your onCreate() method of activity

Toolbar toolbar = (Toolbar) findViewById(R.id.ar_toolbar);
setSupportActionBar(toolbar);

add this theme

<style name="AccountSetting" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimaryDark">@color/colorWhite</item>
    <item name="colorPrimary">@color/colorWhite</item>


</style>

EDIT you activity problem layout add this

<?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="wrap_content"
  android:orientation="vertical" >

    <include
        layout="@layout/toolbarlayout"/>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="@string/app_name"
      android:textColor="#000000"
      android:id="@+id/mytext"
      android:textSize="15sp" />
</LinearLayout>

you activity code

public class Problems extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_layout);
     LayoutInflater inflator = (LayoutInflater) this .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     View v = inflator.inflate(R.layout.custom_actionbar, null);   
     getSupportActionBar().setCustomView(v);
    }
}