Attachment menu?

[marcw75]

Hallo
weiss vielleicht jemand wie man ein solches menü herstellt?
gruss marc

 

[StefMa]

Das ist eine ViewGroup mit zwei weiteren ViewGroups die jeweils 3 Views beinhalten
Sry, aber was willst du hören?
-> WhatsAppMenu.xml · GitHub

 

[marcw75]

Ich bekomme die buttons auch angezeigt nur alle untereinander. Desweiteren erscheint das fenster zentriert.

 

[Feuerstern]

Das ist eine ViewGroup mit zwei weiteren ViewGroups die jeweils 3 Views beinhalten
Sry, aber was willst du hören?
-> WhatsAppMenu.xml · GitHub

Es geht dem Thread ersteller glaube ich darum das die Viewgroup erst angezeigt wird wenn man auf den "Share" Button drückt.

EDIT: Eine Möglichkeit wäre vlt die View in der Activity in einem Relativlayout
Layout über den Inhallt (oder das Fragment) zu legen und unsichtbar zu machen. Beim klick auf den Button machst du die View dann wieder sichtbar. Allerdings hast du dann noch nicht die nette Animation wie in Whatsapp.

 

[marcw75]

Hallo

hier mein code. Bekomme es aber nicht hin das die Icons in 3 Reihen angezeigt werden.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:paddingTop="1dip"
    android:paddingBottom="1dip"
    android:paddingLeft="9dip"
    android:paddingRight="9dip">

    <ImageView android:id="@+id/icon"
        android:paddingRight="9dip"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_gravity="center_horizontal|center_vertical" />
</LinearLayout>

public class AttachmentTypeSelectorAdapter extends ArrayAdapter<AttachmentTypeSelectorAdapter.IconListItem> {

  public static final int ADD_IMAGE         = 1;
  public static final int ADD_VIDEO         = 2;
  public static final int ADD_SOUND         = 3;
  public static final int ADD_CONTACT_INFO  = 4;
  public static final int TAKE_PHOTO        = 5;

  private final Context context;

  public AttachmentTypeSelectorAdapter(Context context) {
    super(context, R.layout.icon_list_item, getItemList(context));
    this.context = context;
  }

  public int buttonToCommand(int position) {
    return getItem(position).getCommand();
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    View view;

    if (convertView == null) {
      LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      view = inflater.inflate(R.layout.icon_list_item, parent, false);
    } else {
      view = convertView;
    }

    TextView  text  = (TextView)  view.findViewById(R.id.text1);
    ImageView image = (ImageView) view.findViewById(R.id.icon);

    text.setText(getItem(position).getTitle());
    image.setImageResource(getItem(position).getResource());

    return view;
  }

  private static List<IconListItem> getItemList(Context context) {
    List<IconListItem> data = new ArrayList<>(4);
    addItem(data, context.getString(R.string.AttachmentTypeSelectorAdapter_take_photo), ResUtil.getDrawableRes(context, R.attr.conversation_attach_contact_info), TAKE_PHOTO);
    addItem(data, context.getString(R.string.AttachmentTypeSelectorAdapter_picture), ResUtil.getDrawableRes(context, R.attr.conversation_attach_image),        ADD_IMAGE);
    addItem(data, context.getString(R.string.AttachmentTypeSelectorAdapter_video),   ResUtil.getDrawableRes(context, R.attr.conversation_attach_video),        ADD_VIDEO);
    addItem(data, context.getString(R.string.AttachmentTypeSelectorAdapter_audio),   ResUtil.getDrawableRes(context, R.attr.conversation_attach_sound),        ADD_SOUND);
    addItem(data, context.getString(R.string.AttachmentTypeSelectorAdapter_contact), ResUtil.getDrawableRes(context, R.attr.conversation_attach_contact_info), ADD_CONTACT_INFO);

    return data;
  }

  private static void addItem(List<IconListItem> list, String text, int resource, int id) {
    list.add(new IconListItem(text, resource, id));
  }

  public static class IconListItem {
    private final String title;
    private final int    resource;
    private final int    id;

    public IconListItem(String title, int resource, int id) {
      this.resource = resource;
      this.title    = title;
      this.id       = id;
    }

    public int getCommand() {
      return id;
    }

    public String getTitle() {
      return title;
    }

    public int getResource() {
      return resource;
    }
  }
}

 

[Feuerstern]

Wieso möchtest du die Icons den über einen Adapter anzeigen? In deinem Code sieht es so aus als wäre von vornherein klar welche Icons angezeigt werden sollen, deshalb macht es Sinn die Icons direkt ins Layout zu packen, so wie im Beispiel von StefM.

 

[marcw75]

Klar du hast recht. Aber wie bekomme ich es hin das sich beim anklicken der Klammer ein Fenster wie bei Whatsapp öffnet?

 

[Feuerstern]

Für die Imageviews musst die die Icons verwenden die du haben möchtest. Wichtig ist das du dem ersten LinearLayout eine id gibst (damit du es später im code auf Visible stellen kannst) und das es auf "Gone" gestellt wird damit das Menü erstmal nicht sichtbar ist.
Die Beiden Textviews stehen stellvertretend für deinen Inhalt. Am schönsten wärs sicherlich wen da ein Fragment wäre.

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


  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:text="Test Text"
  android:id="@+id/textView"
  android:layout_alignParentTop="true"
  android:layout_alignParentLeft="true"
  />

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:text="Text Text 2"
  android:id="@+id/textView2"
  android:layout_below="@+id/textView"
  android:layout_alignParentLeft="true"
  android:layout_alignParentStart="true" />


  <LinearLayout
  android:id="@+id/menuButtons"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@color/bright_foreground_disabled_material_dark"
  android:visibility="gone" >

  <LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="center_horizontal">

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>

  </LinearLayout>

  <LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="center_horizontal">

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>

  <ImageView
  android:layout_width="40dp"
  android:layout_height="40dp"
  android:layout_margin="10dp"
  android:src="@drawable/circle"/>



  </LinearLayout>

  </LinearLayout>

</RelativeLayout>

In der onCreate Methode lädst du das LinearLayout deine Views und in der
onOptionsItemSelected Methode machst du das Linearlayout dan sichtbar oder unsichtbar:

@Override
  public boolean onOptionsItemSelected(MenuItem item) {
  int id = item.getItemId();

  if (id == R.id.action_settings) {
    return true;
  }
  if (id == R.id.action_share) {
    if (mMenu.getVisibility() != View.VISIBLE)
       mMenu.setVisibility(View.VISIBLE);
    else
       mMenu.setVisibility(View.GONE);
     return true;
  }
  return super.onOptionsItemSelected(item);
  }

Ergebnis:
Vor dem Button drücken:

Nach dem drücken auf den Button:


Je nach gewählter Hintergrundfarbe des Linear Layouts scheint der Hintergrund etwas durch oder nicht.

EDIT:
Hier nochmal ohne Transparenz:


Ich hab auch das Standart padding des Activity Layouts entfernt da das Menü sonst mit einem kleinen Abstand angezeigt wird.
Wen die Icons jetzt klickbar sein sollen kannst du statt ImageViews ImageButtons verwenden.

 

[Jaiel]

Ich hätte noch ne (sinnlose) verkürzung des Codes. Wenn man garaniieren kann dass die Visibility niemals auf INVISIBLE(4) springt kann man sich ein paar Zeilen und eine Abfrage sparen XD

  if (id == R.id.action_share) {
       mMenu.setVisibility((mMenu.getVisibility()+8)%16); //toggle between VISIBLE(8) and GONE(0)
     return true;
  }

 

[Feuerstern]

Ich hätte noch ne (sinnlose) verkürzung des Codes. Wenn man garaniieren kann dass die Visibility niemals auf INVISIBLE(4) springt kann man sich ein paar Zeilen und eine Abfrage sparen XD

  if (id == R.id.action_share) {
       mMenu.setVisibility((mMenu.getVisibility()+8)%16); //toggle between VISIBLE(8) and GONE(0)
     return true;
  }

Ja so kann mans natürlich auch machen
OT:
Wenn ich Code aus meinem Projekt in die Antwort Box hier im Forum kopiere entfernt der mir immer die Formatierung, weißt du zufällig wie ich das verhindern kann? Also das Leerzeichen und Taps erhalten bleiben?

 

[Jaiel]

@OT:
Ist mir bis jetzt noch nicht aufgefallen wenn man das in die Code Tags reinschreibt bleiben die eigentlich auch immer...wenn man ganz normal ohne Code tags in den Editor reinschriebt dann werden natürlich doppel spaces gelöscht zu einem.