Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Barra de herramientas con diseño de material EditText

Estoy tratando de hacer la barra de herramientas con EditText dentro de ella como este:

Barra de herramientas con EditText

Ahora mismo puedo hacer algo similar, pero sólo con el título estático, ¿Alguna idea para empezar?

  • Reproducción de material Android / Pausa Vector Animación dibujable
  • El atributo "barLength" ya ha sido definido
  • Cómo configurar el texto para ver desde el diseño del encabezado del cajón en el cajón de navegación sin inflar la vista
  • Android appcompat-v7: 21.0.0 cambiar los colores de la casilla de verificación de materiales
  • Configuración del color del encabezado en el nuevo Material DatePicker
  • CoordinatorLayout con RecyclerView y el encabezado Collapsing
  • Botón flotante de Android y superposición de fondo
  • Botón CardView y el texto no alineado
  • 4 Solutions collect form web for “Barra de herramientas con diseño de material EditText”

    He hecho esto como a continuación:

    Introduzca aquí la descripción de la imagen

    Hay Toolbar como AppBar (también ActionBar como ActionBar ) en la parte superior y la segunda barra de herramientas debajo de ella con dos EditText . La primera barra de herramientas está en CollapsingToolbarLayout en caso de que quiera que se colapsa.

    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> 

    Y 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> 

    Utilice android:theme="@style/AppTheme" para la aplicación en manifesto y android:theme="@style/AppTheme.Base" for MainActivity`.

    Creo que necesitas crear tu propio toolbarlyout y configurarlo en la barra de herramientas de actividad. prueba esto :

    http://javatechig.com/android/actionbar-with-custom-view-example-in-android solo necesitas crear tu componente. Espero que sea útil para usted;)

    Puede utilizar un diseño lineal con el mismo color de su barra de herramientas. El atributo de la barra de herramientas android:elevation necesita ser 0px .

    Actividad (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> 

    Barra de herramientas (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> 

    Fragmento (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> 

    Actividad (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); } 

    El resultado:

    Introduzca aquí la descripción de la imagen

    AppBarLayout sería mejor apuesta

    Ref https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

    Ejemplo http://www.feelzdroid.com/2015/07/android-appbarlayout-scrolling-example.html

    Obviamente tendrías que hacer personalizaciones

    Espero que esto ayude

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.