Android टूलबार में एक बटन बनाना

Question

मैं एंड्रॉइड के अंदर एक बटन कैसे बना सकता हूं Toolbarजो इस iOSउदाहरण से दिखता है ?

Answer 1

टूलबार बटन ट्यूटोरियल के साथ

1 - अंदर पुस्तकालय अनुकूलता जोड़ें build.gradle

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

2 - रंगों color.xmlको परिभाषित करने के लिए एक फ़ाइल नाम बनाएँToolbar

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

3 - अपनी 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 - जैसे एक xml फ़ाइल बनाएँ 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 - Toolbarअपने में शामिल करें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 - फिर, इसे अपनी 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 - और अंत में, निर्देशिका के menu_main.xmlअंदर अपने "बटन आइटम" जोड़ें/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>

Comments

+1 चरण-दर-चरण, Google डॉक्स से बेहतर तरीका है। एक बात याद आ रही है कि मेनू_main.xml को / Res / मेनू / निर्देशिका के अंदर बनाया जाना चाहिए, और मेनू_main.xml में एक लापता "<मेनू" है।

— एडुआर्डो

अच्छा मार्गदर्शक, लेकिन यह पाठ नहीं दिखाता है, यह प्रश्न के उत्तर को याद कर रहा है "जो इस तरह दिखता है" भाग। मैं मानता हूं कि एंड्रॉइड शैली का पालन करना बेहतर है, लेकिन मुझे लगता है कि यह सवाल का कठिन हिस्सा है।

— TWIStErRob

नवीनतम ADKs में से एक की तरह दिखता है ActionBarActivity और अब आप AppCompatActivity का उपयोग करना चाहते हैं, इसलिए यह मेरे लिए काम नहीं करता है।

— फिश

@tardoandre सवाल "एंड्रॉइड टूलबार में बटन बनाना" है, लेकिन आप itemटूलबार में जोड़ रहे हैं ... बटन और आइटम के बीच अंतर है: पी

— अमित उपाध्याय

तकनीकी रूप से @AmitUpadhyay सही है। मेनू आइटम को बटन के रूप में फुलाया नहीं जाता है, और पहुंच की घोषणा "सहेजें, बटन, सक्रिय करने के लिए डबल-टैप करें", "एक्टिवेट करने के लिए सहेजें, बटन, डबल-टैप" के बजाय होगी (यदि कार्रवाई "सहेजें" है)

— rds

Answer 2

टूलबार अनुकूलन निम्नलिखित तरीकों से किया जा सकता है

टूलबार के अंदर बटन और टेक्स्ट व्यू कोड लिखें जैसा कि नीचे दिखाया गया है

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

अन्य तरीका आइटम मेनू का उपयोग करना है जैसा कि नीचे दिखाया गया है

@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;
}

Comments

layout_gravityविशेषता उपलब्ध नहीं है

— pkuszewski

आप बटन को एक में लपेट सकते हैं RelativeLayout(चौड़ाई सेट कर match_parentसकते हैं) और लागू करें layout_alignParentEnd="true"।

— जिल शाह १ Shah

@JeelShah यदि आप चौड़ाई सेट करते हैं match_parent, तो यह टूलबार से शीर्षक हटा देता है।

— डेविड व्हिटमैन

Answer 3

एक और संभावना को स्थापित करने के लिए है app:actionViewClassआपके मेनू में विशेषता :

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

अपने कोड में आप मेनू फुलाए जाने के बाद इस बटन का उपयोग कर सकते हैं:

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

Comments

यह सबसे अच्छा समाधान आईएमओ है, इसके चारों ओर कम से कम फंबलिंग की आवश्यकता होती है।

— जूलियस नेउमन

सबसे अच्छा समाधान कभी मिला ... android.widget.Button for androidX

— Rahman Khan का

Answer 4

मैंने टूलबार में पाठ जोड़ा है:

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;
}

Answer 5

उन्हें टूलबार / एक्शनबार में मेनू आइटम या एक्शन बटन कहा जाता है। यहां आपके पास Google ट्यूटोरियल है कि यह कैसे काम करता है और उन्हें कैसे जोड़ना है https://developer.android.com/training/basics/actionbar/adding-buttons.html

Answer 6

आप वास्तव में एक टूलबार के अंदर कुछ भी डाल सकते हैं। नीचे दिए गए कोड को देखें।

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

उपरोक्त टूलबार टैग के बीच आप लगभग कुछ भी डाल सकते हैं। यह एक टूलबार का उपयोग करने का लाभ है।

स्रोत: Android टूलबार उदाहरण

Answer 7

आप actionLayoutसमर्थन पुस्तकालय से उपयोग कर सकते हैं ।

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;
}

Comments

अच्छा और संक्षिप्त

— सुदीक्स

Answer 8

के Buttonसाथ लपेटकर मैं यह हासिल करने में सक्षम था ConstraintLayout:

<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/top_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white_color">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/cancel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/cancel"
                    android:layout_marginStart="5dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/btn_publish"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/publish"
                    android:background="@drawable/button_publish_rounded"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:layout_marginEnd="10dp"
                    app:layout_constraintLeft_toRightOf="@id/cancel"
                    tools:layout_editor_absoluteY="0dp" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

आप एक आकर्षक संसाधन बना सकते हैं button_publish_rounded, बटन गुणों को परिभाषित कर सकते हैं और इस फाइल को बटन की android:backgroundसंपत्ति में नियत कर सकते हैं:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/green" />
    <corners android:radius="100dp" />
</shape>