-1

I want to make my alert dialog box something like this.This is a popup window where you have to choose and select the category.Its coming when I click any listview item..

enter image description here

But I ended up make it something like this.as i am a newbie so don't know much about designing.kindly help me in this.

enter image description here

my xml layout:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    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"
    android:background="#FFFFFF"
    android:gravity="start"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/desimage"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="2dp"
                android:layout_marginTop="10dp"
                android:src="@drawable/logo" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_weight="1" >

            <TextView
                android:text="Chicken Pizza Small"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="21sp"
                android:textStyle="bold"
                android:id="@+id/h1"
                android:layout_weight="1" />


        </LinearLayout>

        <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >
        <TextView
            android:text="Chicken Pizza Small Combo"
            android:layout_width="wrap_content"
            android:textSize="16sp"
            android:layout_height="wrap_content"
            android:textColor="#8c8181"
            android:id="@+id/h2"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >

        <Button
            android:text="Quantity"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/mybutton"
            android:textColor="#ffffff"
            android:id="@+id/quant"
            android:layout_weight="1" />


        <Button
            android:text="-"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/incr"
            android:textSize="10sp"
            android:textColor="@color/colorButton"
            android:layout_weight="1" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"

            android:layout_weight="1"
            android:id="@+id/n1"
            />

        <Button
            android:text="+"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:textColor="@color/colorButton"
            android:layout_weight="1" />
            android:id="@+id/decr"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >


        <CheckBox
            android:text="SL"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sl"
            android:textColor="#8c8181"
            android:layout_weight="1" />

        <CheckBox
            android:text="S"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/s"
            android:textColor="#8c8181"
            android:layout_weight="1" />
        <CheckBox
            android:text="M"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/m"
            android:textColor="#8c8181"
            android:layout_weight="1" />

        <CheckBox
            android:text="l"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/L"
            android:textColor="#8c8181"
            android:layout_weight="1" />

        <CheckBox
            android:text="F"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/f"
            android:textColor="#8c8181"
            android:layout_weight="1" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:background="#c0c0c0"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >


        <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/spinner1"
            android:background="@drawable/spinner_bg"
        android:layout_weight="1" />


        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/spinner2"
            android:background="@drawable/spinner_bg"
            android:layout_weight="1" />


    </LinearLayout>



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_weight="1" >

            <TextView
                android:text="TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView2"
                android:layout_weight="1" />


        </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" >



        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="hint" />
        </android.support.design.widget.TextInputLayout>

    </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_weight="1" >

            <Button
                android:text="Cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/canc"
                android:textColor="#ffffff"
                android:background="@drawable/mybutton2"
                android:layout_weight=".5" />
            <Button
                android:text="Ok"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/ok"
                android:textColor="#ffffff"
                android:background="@drawable/mybutton"
                android:layout_weight=".5" />



        </LinearLayout>
        </LinearLayout>
    </ScrollView>

here is my SubMenu Activity where if u click an item it will show popup

public class SubMenu extends AppCompatActivity {

    JSONObject jsonobject;
    JSONArray jsonarray;
    ListView listview;
    ListViewAdapter adapter;
    ProgressDialog mProgressDialog;
    ArrayList<HashMap<String, String>> arraylist;
    static String RANK = "id";
    static String COUNTRY = "name";

    static String FLAG = "image";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_sub_menu);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        String SelectedId = getIntent().getStringExtra("id");


        getSupportActionBar().setDisplayHomeAsUpEnabled(true);




        // Get the view from listview_main.xml

        // Execute DownloadJSON AsyncTask
        new DownloadJSON().execute();
    }

    // DownloadJSON AsyncTask
    private class DownloadJSON extends AsyncTask<Void, Void, Void> implements AdapterView.OnItemClickListener {

        // @Override
        //  protected void onPreExecute() {
        //  super.onPreExecute();
        // Create a progressdialog
        //   mProgressDialog = new ProgressDialog(SubMenu.this);
        // Set progressdialog title
        //   mProgressDialog.setTitle("Categories of Main categories.....");
        // Set progressdialog message
        //  mProgressDialog.setMessage("Loading...");
        //  mProgressDialog.setIndeterminate(false);
        // Show progressdialog
        //  mProgressDialog.show();
        // }

        @Override
        protected Void doInBackground(Void... params) {
            // Create an array
            arraylist = new ArrayList<HashMap<String, String>>();
            // Retrieve JSON Objects from the given URL address
            jsonarray = JsonFunctions
                    .getJSONfromURL("http://cloud.granddubai.com/broccoli/menu_typeitem.php?id=" + getIntent().getStringExtra("id"));
            try {
                // Locate the array name in JSON
//                    jsonarray = jsonobject.getJSONArray("main_menu_items");


                for (int i = 0; i < jsonarray.length(); i++) {
                    HashMap<String, String> map = new HashMap<String, String>();

                    jsonobject = jsonarray.getJSONObject(i);
                    // Retrive JSON Objects
                    // map.put("id", jsonobject.getString("id"));
                    map.put("name", jsonobject.getString("name"));

                    map.put("image", jsonobject.getString("image"));
                    // Set the JSON Objects into the array
                    arraylist.add(map);
                }
            } catch (JSONException e) {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(Void args) {
            // Locate the listview in listview_main.xml
            listview = (ListView) findViewById(R.id.list1);
            // Pass the results into ListViewAdapter.java
            adapter = new ListViewAdapter(SubMenu.this, arraylist);
            // Set the adapter to the ListView
            listview.setAdapter(adapter);
            listview.setOnItemClickListener(this);
            // Close the progressdialog
            // mProgressDialog.dismiss();
        }

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            LayoutInflater layoutInflater
                    = (LayoutInflater)getBaseContext()
                    .getSystemService(LAYOUT_INFLATER_SERVICE);
            View popupView = layoutInflater.inflate(R.layout.popup, null);
            final PopupWindow popupWindow = new PopupWindow(
                    popupView,
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);

            Button btnDismiss = (Button)popupView.findViewById(R.id.canc);
            btnDismiss.setOnClickListener(new Button.OnClickListener(){

                @Override
                public void onClick(View v) {
                    popupWindow.dismiss();
                }});

            popupWindow.showAsDropDown(view, 3000, -90);







        }
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                onBackPressed();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}
z.al
  • 279
  • 1
  • 6
  • 21
  • post your xml layout – Noorul Dec 26 '16 at 06:34
  • You have to use drawables for this kind of layout. i.e. Left round drawable, right round drawable etc. – Chirag Savsani Dec 26 '16 at 06:40
  • i use it for spinner and button but i m new in designing specially when making the layout..if u all want more file i will add it..but kindly rectify my code – z.al Dec 26 '16 at 06:42
  • create activity, use it as a dialog box http://stackoverflow.com/questions/8738264/how-can-i-show-my-activity-as-a-dialog-in-android – Mohd Asif Ahmed Dec 26 '16 at 06:42
  • ok should i make it as activity but how will it look similar to popup window..i am adding my activity where this popup will come when i click an item – z.al Dec 26 '16 at 06:44
  • Do you have static content in Crust and Add on spinners? – Sneha Sarkar Dec 26 '16 at 07:22
  • yes i have content and the incr and decresing are buttons and not textview it should like when u press incr button the number should incre and vice varsa – z.al Dec 26 '16 at 08:04

2 Answers2

1

Replace your layout xml file with this:

  <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <ImageView
            android:id="@+id/desimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/logo" />

        <TextView
            android:id="@+id/h1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Chicken Pizza Small"
            android:textSize="21sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/h2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Chicken Pizza Small Combo"
            android:textColor="#8c8181"
            android:textSize="16sp" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:weightSum="10">

            <Button
                android:id="@+id/quant"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginRight="10dp"
                android:layout_weight="3"
                android:background="@drawable/mybutton"
                android:text="Quantity"
                android:textAllCaps="false"
                android:textColor="#ffffff" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="7"
                android:background="@drawable/stroke_button"
                android:orientation="horizontal"
                android:weightSum="3">

                <Button
                    android:id="@+id/incr"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:text="-"
                    android:textColor="#FFA726"
                    android:textSize="25dp" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#c0c0c0" />

                <EditText
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:inputType="number"
                    android:text="5" />

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:background="#c0c0c0" />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:text="+"
                    android:textColor="#FFA726"
                    android:textSize="25dp" />

            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp">

            <CheckBox
                android:id="@+id/sl"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="SL"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/s"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="S"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/m"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="M"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/L"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="l"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

            <CheckBox
                android:id="@+id/f"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:buttonTint="#c0c0c0"
                android:text="F"
                android:textColor="#8c8181"
                tools:targetApi="lollipop" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="#c0c0c0" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/stroke_button"
                android:orientation="vertical"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">

                <Spinner
                    android:id="@+id/spinner1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="5dp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@drawable/stroke_button"
                android:orientation="vertical"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">

                <Spinner
                    android:id="@+id/spinner2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="5dp" />
            </LinearLayout>
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="SPECIAL INSTRUCTIONS"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/stroke_button"
            android:padding="@dimen/_10sdp">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:gravity="top"
                android:inputType="textCapSentences|textMultiLine"
                android:lines="5"
                android:maxLines="5"
                android:padding="2dp"
                android:textColor="#c0c0c0" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp">

            <Button
                android:id="@+id/canc"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/mybutton2"
                android:text="Cancel"
                android:textColor="#ffffff" />

            <Button
                android:id="@+id/ok"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_weight="1"
                android:background="@drawable/mybutton"
                android:text="Ok"
                android:textColor="#ffffff" />


        </LinearLayout>
    </LinearLayout>
</ScrollView>

In your res/drawable add these xml:

mybutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="25dp" />
    <solid android:color="#004D40" />
</shape>

mybutton2.xml

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

stroke_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <corners android:radius="20dp" />
    <stroke
        android:width="1dp"
        android:color="#c0c0c0" />
</shape>
Sneha Sarkar
  • 731
  • 6
  • 19
  • but those increment and decrement views are buttons and not textView..how can we make that – z.al Dec 26 '16 at 07:52
  • increment and decrement should be done on the edit Text. Not on button. + and - are there for click events only. You can write onClickListener of TextView in the same manner of a button. – Sneha Sarkar Dec 26 '16 at 08:28
  • your answer is almost rite just need little help if i make that text as button and background as white so layout line are also become invisible..how we try that(m talking abt incr decr btn) – z.al Dec 26 '16 at 08:29
  • If you really want the increment and decrement events to be button, give me a moment. I will provide you some solution – Sneha Sarkar Dec 26 '16 at 08:31
  • Check my modified code. Hope it will solve your problem – Sneha Sarkar Dec 26 '16 at 08:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131484/discussion-between-sneha-sarkar-and-z-al). – Sneha Sarkar Dec 26 '16 at 08:36
  • yeah..i was trying white color thts y its ws nt working..thx dear...have a grt career ahead – z.al Dec 26 '16 at 08:49
0

@z.al

1) For set quantity u remove two button instead of two button you simply put two TextView so now you have Total 3 TextView (One for "-" one for "Count" and one for "+"). This Textview have Linear as parent and with the help of Drawable XML u can set Background.

2) And for Spinner you need to implement Custom Spinner

for Proper view give proper padding and margin.

refer link for custom spinner: "http://mrbool.com/how-to-customize-spinner-in-android/28286"

Sanket Kachhela
  • 10,861
  • 8
  • 50
  • 75
Jay Patel
  • 319
  • 1
  • 8
  • i have file for rounded spinner but all are not on place the way first image shows ....first i want to make look all as same place as its shown in 1st image – z.al Dec 26 '16 at 06:55
  • thts what i asking coz i am having trouble in layouts...if u could make it proper then it would be great – z.al Dec 26 '16 at 06:56