superior studio navegacion icono boton barra bar atras agregar android android-toolbar

studio - Crear un botón en la barra de herramientas de Android



menu android studio (7)

¿Cómo puedo crear un botón dentro de la Toolbar de Toolbar de Android que se parece a este ejemplo de iOS ?


Barra de herramientas con botón Tutorial

1 - Agregar compatibilidad de biblioteca dentro de build.gradle

dependencies { compile fileTree(dir: ''libs'', include: [''*.jar'']) compile ''com.android.support:appcompat-v7:21.0.3'' }

2 - Cree un nombre de archivo color.xml para definir los colores de la Toolbar

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="ColorPrimary">#FF5722</color> <color name="ColorPrimaryDark">#E64A19</color> </resources>

3 - Modifique su archivo style.xml

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/ColorPrimary</item> <item name="colorPrimaryDark">@color/ColorPrimaryDark</item> <!-- Customize your theme here. --> </style> </resources>

4 - Crea un archivo xml como tool_bar.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:elevation="4dp" />

5 - Incluya la Toolbar en su main_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <include android:id="@+id/tool_bar" layout="@layout/tool_bar" /> <TextView android:layout_below="@+id/tool_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/TextDimTop" android:text="@string/hello_world" /> </RelativeLayout>

6 - Luego, ponlo dentro de tu clase MainActivity

package com.example.hp1.materialtoolbar; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.MotionEvent; import android.view.View; import android.widget.Toast; /* When using AppCompat support library * (you need to extend Main Activity to * ActionBarActivity) * ActionBarActivity has deprecated, use AppCompatActivity */ public class MainActivity extends ActionBarActivity { // Declaring the Toolbar Object private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); // Attaching the layout to the toolbar object toolbar = (Toolbar) findViewById(R.id.tool_bar); // Setting toolbar as the ActionBar with setSupportActionBar() call setSupportActionBar(toolbar); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }

7 - Y finalmente, agregue sus "Elementos de botón" al menu_main.xml dentro del directorio /res/menu/

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> <item android:id="@+id/action_search" android:orderInCategory="200" android:title="Search" android:icon="@drawable/ic_search" app:showAsAction="ifRoom"/> <item android:id="@+id/action_user" android:orderInCategory="300" android:title="User" android:icon="@drawable/ic_user" app:showAsAction="ifRoom" /> </menu>


En realidad, puede poner cualquier cosa dentro de una barra de herramientas. Ver el siguiente código.

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

Entre la etiqueta de la barra de herramientas anterior puede poner casi cualquier cosa. Ese es el beneficio de usar una barra de herramientas.

Fuente: Ejemplo de la barra de herramientas de Android


He agregado texto en la barra de herramientas:

menu_skip.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <item android:id="@+id/action_settings" android:title="@string/text_skip" app:showAsAction="never" /> </menu>

MainActivity.java

@Override boolean onCreateOptionsMenu(Menu menu) { inflater = getMenuInflater(); inflater.inflate(R.menu.menu_otp_skip, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { // action with ID action_refresh was selected case R.id.menu_item_skip: Toast.makeText(this, "Skip selected", Toast.LENGTH_SHORT) .show(); break; default: break; } return true; }


La personalización de la barra de herramientas se puede hacer de las siguientes maneras

botón de escritura y código textViews dentro de la barra de herramientas como se muestra a continuación

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="@dimen/btn_height_small" android:text="Departure" android:layout_gravity="right" /> </android.support.v7.widget.Toolbar>

Otra forma es usar el menú de elementos como se muestra a continuación

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


Otra posibilidad es configurar la app:actionViewClass atributo app:actionViewClass en su menú:

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/get_item" android:orderInCategory="1" android:text="Get" app:showAsAction="always" app:actionViewClass="android.support.v7.widget.AppCompatButton"/> </menu>

En su código puede acceder a este botón después de inflar el menú:

public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.sample, menu); MenuItem getItem = menu.findItem(R.id.get_item); if (getItem != null) { AppCompatButton button = (AppCompatButton) getItem.getActionView(); //Set a ClickListener, the text, //the background color or something like that } return super.onCreateOptionsMenu(menu); }


Puede usar actionLayout desde la biblioteca de soporte.

menu.xml

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/button_item" android:title="" app:actionLayout="@layout/button_layout" app:showAsAction="always" /> </menu>

button_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" /> </RelativeLayout>

Activity.java

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu, menu); MenuItem item = menu.findItem(R.id.button_item); Button btn = item.getActionView().findViewById(R.id.button); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "Toolbar Button Clicked!", Toast.LENGTH_SHORT).show(); } }); return true; }