AppCompat Archives - Truiton

Android Action Bar In A Dialog Using ToolBar

Mohit Gupt — Sat, 25 Apr 2015 16:43:38 +0000

Android Toolbar widget is one of the new UI components available in AppCompat v21. This widget works just like an ActionBar, the only difference is, it can be placed any where on screen. The Android Toolbar widget can also be used to replace the original ActionBar in your Activity. This feature will open many new possibilities in your application. Like you can place multiple action bars on a screen, place action bars / toolbars with some specific dimensions- not covering the whole width of the screen. Also it solves one of the major issue that I faced during development, i.e. placing an Android action bar in a dialog fragment. Now with Android’s ToolBar widget this can be done very easily.

Android Toolbar widget supports a logo image, a title and a subtitle. It also supports a navigation button, custom views and more importantly an action menu. Now the question is how to display an action bar in a dialog using Toolbar widget.

Android ActionBar in a DialogFragment

Android Toolbar is available through the AppCompat v21 support library. Therefore this widget can be used with Android API 7 and above without any problems. On the other hand DialogFragment class is already available in the support v4 library. Hence an Android ToolBar can be used to display the action bar in a dialog with support from API 7 onwards. To start off please make sure you have AppCompat dependencies in place:

compile 'com.android.support:appcompat-v7:22.1.0'

Next you may need to include Android ToolBar in the dialog layout:

As you can see in the highlighted lines above, I have used the android.support.v7.widget.Toolbar tag to display an action bar in the dialog’s layout. Android Toolbar widget can also be used with the styles defined in your app. As shown above, please use the android:background attribute to specify the color of action bar. Also app:popupTheme and android:theme attributes can be used to display the standard action bar themes as shown. Further lets define the DialogFragment class.

package com.truiton.toolbardialog;

import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.TextView;

public class ActionBarDialog extends DialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        Bundle args = getArguments();
        String title = args.getString("title");
        View v = inflater.inflate(R.layout.action_bar_dialog, container, false);
        TextView tv = (TextView) v.findViewById(R.id.text);
        tv.setText("This is an instance of ActionBarDialog");
        Toolbar toolbar = (Toolbar) v.findViewById(R.id.my_toolbar);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                // Handle the menu item
                return true;
            }
        });
        toolbar.inflateMenu(R.menu.menu_main);
        toolbar.setTitle(title);
        return v;
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        // request a window without the title
        dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        return dialog;
    }
}

As you can see in the above class, in onCreateDialog method I have applied, no title bar feature. This basically removes the header of DialogFragment. Now we can add our own header, a Toolbar which would act just like an Android ActionBar in the DialogFragment. I would also like to highlight that you can also receive arguments in this dialog from the calling activity by using getArguments() method, as shown above.

Using Android Toolbar instead of ActionBar

As I mentioned, the new Android Toolbar can also be used as a normal action bar in your fragment or activity. But to avoid conflict, first you may need to disable the standard action bar, by using a Theme.AppCompat.NoActionBar theme. Else you would see two action bars. In this example I have specified this theme in the styles.xml as only one activity was there. If you need to use Android ToolBar as an action bar for a specific activity, please use this theme only for that activity. Now lets have a look at styles.xml:

Now that our activity will not be having an action bar, we need to define a Toolbar in the layout as shown:

Now lets have a look at the main activity:

package com.truiton.toolbardialog;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        Button dialogButton = (Button) findViewById(R.id
                .dialogButton);
        dialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Bundle args = new Bundle();
                args.putString("title", "Dialog with Action Bar");
                ActionBarDialog actionbarDialog = new ActionBarDialog();
                actionbarDialog.setArguments(args);
                actionbarDialog.show(getSupportFragmentManager(),
                        "action_bar_frag");
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

As you can see in the above class, that I have used setSupportActionBar(toolbar) method to set the toolbar as default ActionBar. By doing this no extra code needs to be written for using the standard onCreateOptionsMenu and onOptionsItemSelected callback methods. Also please note: in onClick method, I am sending the arguments to ActionBarDialog class, where they are supposed to be used accordingly in the DialogFragment.

Conclusion

To conclude I would say Android Toolbar widget is a great addition in the AppCompat class. This not only helps in showing an Android action bar in a dialog, but also helps us in many other ways. For example, when multiple action bars are required on a screen, or an action bar of variable width is required. Also Android Toolbar can be used in any layout, to display a fully functional ActionBar/Toolbar. Hope this helps. Connect with us on Facebook, Google+ and Twitter for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and mobile development evangelist. My motive here is to create a group of skilled engineers, who can build better software. Reason being programming is my passion, and also it feels good to make a device do something you want. Professionally I have worked with many software engineering and product development firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, but whenever I get spare time I share my thoughts here at Truiton.

www.truiton.com

The post Android Action Bar In A Dialog Using ToolBar appeared first on Truiton.

Android SwitchCompat Example

Mohit Gupt — Sat, 07 Mar 2015 20:08:51 +0000

Being an Android developer I always had a development oriented approach. But once you start exploring things from a learning perspective, discoveries are stupendous. I never realized the full potential of AppCompat library in Android, I always thought; it just increases the size of my APK. Jokes apart, in recent turn of events I stumbled upon a situation where I wanted to use an android switch button in my app, where I should be able to drag that switch to an “On” or an “Off” state. To my dismay even this small task created problems. As a standard Android switch which supports the drag animations is only available from SDK v14 and above. I believe many of you must have faced this issue. This inspired me to write this Android switch button example.

Recently in October 14, an update to AppCompat V7 was released, featuring version 21. This version majorly addressed the material design compatibility issues. But a great feature that missed out the spotlight was the Android SwitchCompat widget. This Android switch button not only acts like a standard android switch which can be dragged by holding, but also works fine in Android API 7 and above if AppCompat v7 r21 is included in your project:

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

In this example I would show how to make an Android switch button work in all Android API versions above 7.

Android SwitchCompat Example

In Android if you want to use a switch widget, which could be dragged into an “on” or “off” position with animation, you can use Android SwitchCompat widget. This widget can work perfectly with any Android 7+ SDK. It is supported through the AppCompat v7 library, which can be included in a project through gradle if you are using Android Studio or through a library project in Eclipse IDE. Lets have look at the Android SwitchCompat Example below:

Android SwitchCompat example screen would look like the screen shot below:

An interesting feature in SwitchCompat button is that you can write text on its drawable thumb button. In the above XML I have shown two buttons, one with app:showText="true" and other without it. To use this property you may need to include xmlns:app="http://schemas.android.com/apk/res-auto" in the parent layout, as shown above. To make this Android switch button detect state change events you may need implement CompoundButton.OnCheckedChangeListener interface in your main activity:

package com.truiton.switchcompatexample;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.SwitchCompat;
import android.util.Log;
import android.widget.CompoundButton;


public class MainActivity extends ActionBarActivity implements
        CompoundButton.OnCheckedChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SwitchCompat switchCompat = (SwitchCompat) findViewById(R.id
                .switch_compat);
        switchCompat.setSwitchPadding(40);
        switchCompat.setOnCheckedChangeListener(this);

        SwitchCompat switchCompat2 = (SwitchCompat) findViewById(R.id
                .switch_compat2);
        switchCompat2.setSwitchPadding(40);
        switchCompat2.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()) {
            case R.id.switch_compat:
                Log.i("switch_compat", isChecked + "");
                break;
            case R.id.switch_compat2:
                Log.i("switch_compat2", isChecked + "");
                break;
        }

    }
}

There is not much to explain in the above code. MainActivity simply implements CompoundButton.OnCheckedChangeListener interface to detect the state changes of Android SwitchCompat button. An interesting fact that turned up while I was developing this was that, somehow SwitchCompat does not acknowledges the padding if it is set through the xml. To set padding in an Android SwitchCompat widget you may need to do it through code, as shown above.

Hope with this Android switch button example, I would see more apps in market where a switch button can be dragged. Connect with us through Facebook, Google+, and Twitter for more Android news.

Mohit Gupt

www.truiton.com

The post Android SwitchCompat Example appeared first on Truiton.