Android: how to create 3 vertical dots?

Question

For example, in Google Play, each item in the lists had a 3 vertical dots in the right top corner to show a popup menu. What is the best way to create this 3 dots ?

Thank you so much guys!

Gatias

Are you talking about the overflow button? if so, it's just an image file, and it's available to download (you can get it via the SDK itself) ... – Spoony

Ok, but where is this image in my SDK please?Thanks! – Gatias

i will now add an answer for this below. – Spoony

Out of interest, you do know that you don't need to create that icon yourself, right? You know that the framework creates it automatically for you - you just need to add a menu.xml file to the project with your menu items in it... (just checking) – Sussex

duplicate:#31765895 – Plurality

Answer 1

This post is old, yes, but I've figured another way to include these dots without adding more graphics: use the vertical ellipsis, here's the string resource for whoever wants it:

<string name="vertical_ellipsis">&#8942;</string>

And then you can use it on a button as text.

Epigeous

This is a very elegant response – Nork

I love doing things elegantly (: – Epigeous

it looks different at LG G3 :( – Lehmann

ow, post a screenshot to see how it looks – Epigeous

As a true Unicode character it works perfectly in HTML5 too. – Camisole

Answer 2

for the 3-dots icon, you can find it either in the SDK, under ".../android-sdk\platforms\android-19\data\res..." , named "ic_menu_moreoverflow_normal_holo_light" or "ic_menu_moreoverflow_normal_holo_dark" , depending on the style of your app. note that it has multiple files on multiple folders, to allow correct selection of the images, according to the state of the button and the density of the device.

---

Update: you can also find it here (search for "more") and here (inside "navigation", search for "more_vert") .

I recommend the second one if you support VectorDrawable.

---

Update: currently the newest file is abc_ic_menu_overflow_material.xml VectorDrawable, which has this content:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal">
    <path
            android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2c-1.1,0 -2,0.9 -2,2S10.9,8 12,8zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2c1.1,0 2,-0.9 2,-2S13.1,10 12,10zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2c1.1,0 2,-0.9 2,-2S13.1,16 12,16z"
            android:fillColor="@android:color/white"/>
</vector>

Spoony

link from your post return 404 – Mede

@Mede Thanks. Updated link to the new official one. – Spoony

abc_ic_menu_overflow_material – Preponderance

@Preponderance True. This is the newest one currently. – Spoony

Answer 3

Add SVG support for your application. Then press File > New > Vector Asset, select asset type "Clip Art", press button "Clip Art". In opened window search "more", select "more vert", press "OK", then "Next", "Finish".

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"
    >
    <path
        android:fillColor="#000000"
        android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"
        />
</vector>

Deterrent

Answer 4

You can download all material icons from https://github.com/google/material-design-icons . The three dot icon is called ic_more...

I created this script to copy all versions(mdpi, ldpi, xdpi, xxdpi) to the android project. Might come in handy.

Children

Post an actual link to the image. – Engadine

To be more concrete: ic_more_* in "navigation" – Sundowner

Answer 5

create an xml drawable and add the following code, you can change color to white

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="512"
    android:viewportHeight="512">

    <path
        android:fillColor="#000000"
        android:pathData="M 256 192 C 291.346223989 192 320 220.653776011 320 256 C 320 291.346223989 291.346223989 320 256 320 C 220.653776011 320 192 291.346223989 192 256 C 192 220.653776011 220.653776011 192 256 192 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M 256 384 C 291.346223989 384 320 412.653776011 320 448 C 320 483.346223989 291.346223989 512 256 512 C 220.653776011 512 192 483.346223989 192 448 C 192 412.653776011 220.653776011 384 256 384 Z" />
    <path
        android:fillColor="#000000"
        android:pathData="M 256 0 C 291.346223989 0 320 28.6537760108 320 64 C 320 99.3462239892 291.346223989 128 256 128 C 220.653776011 128 192 99.3462239892 192 64 C 192 28.6537760108 220.653776011 0 256 0 Z" />
</vector>

Tachograph

Answer 6

Use the default Android More Vertical icon.

Or you may Copy and Paste this: ⋮ as a String.

Photometer

Answer 7

You are welcome :) android:background="@android:drawable/ic_menu_moreoverflow_normal_holo_light"

Pizzeria

that is not guaranteed to be available, it will depend on what libraries you are using on your project – Epigeous

it's not available – Tachograph