Search code examples
javaandroidandroid-layoutandroid-activitypopupmenu

How can I stylize my menuPopup, to look like the menu popup for powering down?

I have used menuPopups briefly before, but I've never figured out how to stylize them. I would like my menuPopup below, to look like this screenshot of the android power down menuPopup below

The features of the menu popup below to which I would like mine to posses (but so far I don't know how) are:

  • For a line to be placed between each row
  • To place an image, along side line of text
  • For square (menu popup) to be placed within center of screen (not just next to button)
  • To modify font type, size and color of each line of text

My code so far:

activity_main.class

final TextView textView2 = (TextView) findViewById(R.id.textView2);
        textView2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                //Creating the instance of PopupMenu
                PopupMenu popup = new PopupMenu(MainActivity.this, textView2);
                //Inflating the Popup using xml file
                popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());

                //registering popup with OnMenuItemClickListener
                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    public boolean onMenuItemClick(MenuItem item) {
                        Toast.makeText(MainActivity.this, "You Clicked : " + item.getTitle(), Toast.LENGTH_SHORT).show();
                        return true;
                    }
                });

                popup.show();//showing popup menu
            }
        });//closing the setOnClickListener method
    }

popup_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group_popupmenu">
        <item android:id="@+id/menu1"
            android:title="Popup menu item 1"/>
        <item android:id="@+id/menu2"
            android:title="Popup menu item 2"/>
        <item android:id="@+id/menu3"
            android:title="Popup menu item 3"/>
    </group>
</menu>

Screenshot of powering down popup:

enter image description here

Screenshot of menu popup so far:

enter image description here

Solution

  • Figured it out myself :-)

    Code below:

    MainActivity.java

    public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
     final ImageView  secondCircle = (ImageView) findViewById(R.id.secondCircle);

    secondCircle.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            CustomDialogClass cdd = new CustomDialogClass(MainActivity.this);
            cdd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
            cdd.show();
        }
    });
}



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


   }
}

    CustomDialogClass.java

    public class CustomDialogClass extends Dialog implements
        android.view.View.OnClickListener {

    public Activity activity;
    public LinearLayout powerOffBtn, flightModeBtn, restartBtn;

    public CustomDialogClass(Activity a) {
        super(a);
        this.activity = a;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.custom_dialog);
        powerOffBtn = (LinearLayout) findViewById(R.id.power_off_btn);
        flightModeBtn = (LinearLayout) findViewById(R.id.flight_mode_btn);
        restartBtn = (LinearLayout) findViewById(R.id.restart_btn);
        powerOffBtn.setOnClickListener(this);
        flightModeBtn.setOnClickListener(this);
        restartBtn.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.power_off_btn:
                //    dismiss();
                break;
            case R.id.flight_mode_btn:
                //    dismiss();
                break;
            case R.id.restart_btn:
                //    dismiss();
                break;
            default:
                break;
        }
        dismiss();
    }
}

    activity_main.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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/resultsBox"
        android:layout_width="wrap_content"
        android:layout_height="500dp"
        android:layout_alignParentLeft="false"
        android:layout_alignParentStart="false"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent">

        <ImageView
            android:id="@+id/secondCircle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/circle"
            android:layout_marginTop="0dp"
            android:layout_marginLeft="0dp"/>

    </RelativeLayout>

</RelativeLayout>

    custom_dialog.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:background="@drawable/curve_shap"
    android:orientation="vertical" >


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="@drawable/curve_shap"
        android:orientation="vertical"
        android:id="@+id/power_off_btn">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Power off"
            android:textSize="17dp"
            android:id="@+id/powerOff"
            android:singleLine="true"
            android:layout_marginTop="21dp"
            android:layout_marginLeft="70dp" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView"
            android:src="@drawable/power_off"
            android:scaleType="fitXY"
            android:layout_marginTop="-24dp"
            android:layout_marginLeft="22.5dp" />
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="@drawable/curve_shap"
        android:orientation="vertical"
        android:id="@+id/flight_mode_btn">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Flight mode"
            android:id="@+id/textView2"
            android:singleLine="true"
            android:textSize="17dp"
            android:layout_marginTop="17dp"
            android:layout_marginLeft="70dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Disabled"
            android:id="@+id/textView3"
            android:singleLine="true"
            android:textSize="13dp"
            android:layout_marginLeft="70dp"
            android:textColor="#808080"
            android:layout_marginBottom="0.75dp" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView2"
            android:src="@drawable/flight_mode"
            android:scaleType="fitXY"
            android:layout_marginTop="-40dp"
            android:layout_marginLeft="22.5dp" />

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="@drawable/curve_shap"
        android:orientation="vertical"
        android:id="@+id/restart_btn">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Restart"
            android:id="@+id/textView"
            android:singleLine="true"
            android:textSize="17dp"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="70dp" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView3"
            android:src="@drawable/restartnew"
            android:scaleType="fitXY"
            android:layout_marginTop="-24dp"
            android:layout_marginLeft="22.5dp" />

    </LinearLayout>

</LinearLayout>

    curv_shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Bottom 2dp Shadow -->
<item>
    <shape  android:shape="rectangle">

        <solid android:color="#d8d8d8" />
        <corners android:radius="3.5dp" />

    </shape>
</item>

<!-- White Top color -->
<item android:bottom="3px">

    <shape  android:shape="rectangle">

        <solid android:color="#FFFFFF" />
        <corners android:radius="3.5dp" />

    </shape>

</item>
</layer-list>