Android
Android

Reputation: 3878

Creating my own action own custom bar

I want to create a UI which looks like action bar, although does not behave like one. I want help in just UI. I mean I don't want to provide explicitly any text size, style or other attribute. I am attaching image to make it more clear.

enter image description here

I have already created the UI. Below is the code.

<?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="match_parent"
    android:background="@color/action_bar_grey"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/custom_tabs_grey"
        android:orientation="horizontal" >

        <TextView
            style="@style/Text.Bold"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/custom_tabs_grey"
            android:gravity="center_horizontal"
            android:paddingBottom="@dimen/padding_extra_wide"
            android:paddingTop="@dimen/padding_extra_wide"
            android:text="@string/waiting_to_upload"
            android:textColor="@android:color/black" />

        <View
            android:layout_width="@dimen/status_button_border_width"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/medium_narrow"
            android:layout_marginBottom="@dimen/medium_narrow"
            android:background="@android:color/darker_gray" />

        <TextView
            style="@style/Text.Bold"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/custom_tabs_grey"
            android:gravity="center_horizontal"
            android:padding="@dimen/padding_extra_wide"
            android:text="@string/uploaded"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/medium_narrow"
        android:layout_marginBottom="@dimen/medium_narrow"
        android:orientation="horizontal" >

        <FrameLayout
            android:id="@+id/upload_waiting"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginRight="@dimen/medium_narrow"
            android:layout_weight="1" >
        </FrameLayout>

        <FrameLayout
            android:id="@+id/upload_done"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/medium_narrow"
            android:layout_weight="1" >
        </FrameLayout>
    </LinearLayout>

</LinearLayout>

here I have explicitly giving the text attribute, adding a view for the divider, etc. My question is do I have to do everything explicitly. Is not android providing any thing specific. Like I have done for the divider. But still background and text are not accurate as in normal tabs.

<LinearLayout
    android:divider="?android:attr/actionBarDivider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
    android:showDividers="middle" >

        <TextView
            style="?android:attr/buttonBarStyle" 
           ....MORE CODE

Is there any suggestion or code snippet to help?

Upvotes: 0

Views: 48

Answers (1)

PPartisan
PPartisan

Reputation: 8231

Use a Toolbar.

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <TextView
        android:id="@+id/my_toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center" />

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

You can use a Toolbar like any other view. Adjust its size, add text, etc.

public class MainActivty extends AppCompatActivity {
    private Toolbar toolbar;
    private TextView toolbarTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        toolbar = (Toolbar) findViewById(R.id.my_toolbar);
        toolbarTitle = (TextView) findViewById(R.id.my_toolbar_title);

        setSupportActionBar(toolbar);
        toolbarTitle.setText("Waiting To Upload");
    }
}

Upvotes: 1

Related Questions