web-dev-qa-db-fra.com

Barre d'outils avec conception de matériau EditText

J'essaye de créer la barre d'outils avec EditText comme ceci:

 Toolbar with EditText

En ce moment, je peux faire quelque chose de similaire, mais seulement avec un titre statique. Des idées pour commencer?

15
Heysem Katibi

J'ai fait ceci comme ci-dessous:

 enter image description here

Il y a Toolbar comme AppBar (ou ActionBar) dans la barre d'outils supérieure et la deuxième barre d'outils en dessous de celle-ci avec deux EditText. La première barre d’outils est sous CollapsingToolbarLayout au cas où vous souhaiteriez la réduire.

Java:

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar_1);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("");
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

activity_main.xml:

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"      >

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_tool_bar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:elevation="0dp"
            app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
            app:layout_scrollFlags="scroll|enterAlways"
            app:statusBarScrim="?attr/colorAccent">


            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar_1"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="@color/primary"
                Android:minHeight="?attr/actionBarSize"
                Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="none"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            </Android.support.v7.widget.Toolbar>

        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar_2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/primary"
            Android:minHeight="?attr/actionBarSize"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="none"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical"
                Android:paddingLeft="32dp"
                Android:paddingTop="16dp"
                Android:paddingBottom="56dp"
                Android:paddingRight="16dp">

                <Android.support.design.widget.TextInputLayout
                    Android:id="@+id/lNameLayout"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:layout_below="@+id/fNameLayout"
                    Android:layout_marginTop="10dp">

                    <EditText
                        Android:id="@+id/ltitle"
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:ems="10"
                        Android:hint="Title"/>
                </Android.support.design.widget.TextInputLayout>

                <Android.support.design.widget.TextInputLayout
                    Android:id="@+id/lNameLayout2"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:layout_below="@+id/fNameLayout"
                    Android:layout_marginTop="10dp"
                    Android:layout_marginBottom="10dp">

                    <EditText
                        Android:id="@+id/ldesc"
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:ems="10"
                        Android:hint="Description"/>
                </Android.support.design.widget.TextInputLayout>


            </LinearLayout>
        </Android.support.v7.widget.Toolbar>

    </Android.support.design.widget.AppBarLayout>


</Android.support.design.widget.CoordinatorLayout>

Colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#303F9F</color>
    <color name="primary_dark">#3F51B5</color>
    <color name="accent">#00E5FF</color>

</resources>

Et styles.xml:

<resources>
    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlNormal">#FFF</item>
    </style>    
</resources>

Utilisez Android:theme="@style/AppTheme" pour l'application dans le manifeste et Android:theme="@style/AppTheme.Base" forMainActivity`.

23
Jemshit Iskenderov

Je pense que vous devez créer votre propre barre d’outils et la définir sur la barre d’outils activité . Essayez ceci:

http://javatechig.com/Android/actionbar-with-custom-view-example-in-Android il vous suffit de créer votre composant . J'espère que cela vous sera utile; )

0
Ahmed.ess

Vous pouvez utiliser une disposition linéaire avec la même couleur que votre barre d’outils. L'attribut de barre d'outils Android:elevation doit être 0px.

Activité (xml)

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:orientation="vertical"
                                                 Android:layout_width="match_parent"
                                                 Android:layout_height="match_parent">

    <include
        layout="@layout/toolbar_task"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
    ></include>

    <fragment xmlns:Android="http://schemas.Android.com/apk/res/Android"
              xmlns:tools="http://schemas.Android.com/tools" Android:id="@+id/fragment_task"
              Android:name="com.hashicode.simpletodo.fragment.TaskFragment" tools:layout="@layout/fragment_task"
              Android:layout_width="match_parent" Android:layout_height="match_parent" />

</LinearLayout>

Barre d'outils (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/toolbar"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    Android:fitsSystemWindows="true"
    Android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:background="?attr/colorPrimaryDark"
    Android:elevation="0px">
</Android.support.v7.widget.Toolbar>

Fragment (xml)

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
                                                 xmlns:app="http://schemas.Android.com/apk/res-auto"
                                                 Android:layout_width="match_parent"
                                                 Android:layout_height="match_parent"
                                                 Android:orientation="vertical">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:orientation="vertical">

        <LinearLayout
            Android:id="@+id/taskname_area"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/PrimaryDarkColor"
            Android:orientation="vertical">

            <Android.support.design.widget.TextInputLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:paddingBottom="36dp"
                Android:paddingLeft="72dp"
                Android:paddingRight="16dp">

                <EditText
                    Android:id="@+id/task_name"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:hint="@string/task.name"
                    Android:textSize="30dp"/>

            </Android.support.design.widget.TextInputLayout>

        </LinearLayout>

         <!-- some code -->

        </Android.support.design.widget.CoordinatorLayout>

Activité (Java)

public class TaskActivity extends AppCompatActivity {


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initializeTodo(savedInstanceState);
        setContentView(R.layout.activity_task);
        //set the toolbar
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle(null);
    }

Le résultat:

 enter image description here

0
KuroObi