Grafiken für Buttons

  • Antworten:23
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 11:45:56 via Website

Hallo,

ich versuche mich gerade in das Thema Grafiken einzulesen. So wie ich das sehe gibt es bei mir verscheidene Ordner:

drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi

So wie ich das gelesen habe nimmt sich Android die passende Grafik die gerade für die aktuelle Auflösung passt. Wenn man nur eine Grafik in einen Ordner legt, verwendet Android diese und rendert Sie auf die notwendige Größe, oder? Macht es nicht Sinn eine Grafik zu nehmen in hoher Auflösung und diese dann in den Ordner drawable-xxhdpi zu verschieben, Die würde doch dann genommen und runtergerendert werden, oder? Was passiert den wenn ich in den Ordner drawable-xxhdpi eine Grafik mit keiner Auflösung lege?

Grüße und Danke

Antworten
Mac Systems 27
Mac Systems
  • Forum-Beiträge: 1.727

03.01.2014, 12:28:30 via Website

Android nimmt die nächst best passende. Grafiker/Designer wollen aber für kleinere Auflösungen angepasste Icons bereitstellen, runterrechnen sieht meist nicht gut aus.

Es gibt ebenfalls den "drawable" ordner der meist mit XML basierenden Grafiken gefüllt ist, diese habe das Problem nicht.

Windmate HD, See you @ IO 14 , Worked on Wundercar, Glass V3, LG G Watch, Moto 360, Android TV

Antworten
-.-Star-.- 11
-.-Star-.-
  • Forum-Beiträge: 262

03.01.2014, 14:41:20 via App

Wenn du das machst, besteht die Gefahr, dass zu kleine Grafiken herauskommen

Jeder Mensch hat das Recht dumm zu sein, aber manche Menschen nutzen dieses Recht leider viel zu oft!

Antworten
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 15:38:29 via Website

Hallo,

-.-Star-.-
Wenn du das machst, besteht die Gefahr, dass zu kleine Grafiken herauskommen

Was meinst du damit?

Wie ist den grundsätzlich die Best Practise was der Umgang mit Grafiken betrifft.

Vielleicht erkläre ich kurz mal was ich möchte.
Also es soll vier Buttons geben, die in einer art Kacheln angelegt sind, siehe Anhang.

D.h. zwei oben und zwei unten. Auf diese Kacheln sollen Icons fürs "schöne" und ein Text. Ich hätte es gerne so, dass die Schrift unten ist und das Icon oben.

Ich hatte mal probiert ein Icon mit 110Pixel drauf zu setzten. Das sieht dann so aus wie im Screen 2. Es verzieht sich!


Ich weiß auch gar nicht in welchen Ordner ich das dann legen müsste.

Grüße

Antworten
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 15:57:23 via Website

hallo,

ich weiß nicht so recht welche meiner Fragen der Link beantwortet :-)

Antworten
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 16:11:37 via Website

Hallo,

warum das jetzt nach unten verschoben war, weiß ich jetzt, weil der Button rechts kein Bild hatte :-)

Aber wie bekomme ich es hin, dass man die Schrift wieder sieht?
Die ist nach unten gerutscht.

Danke und Grüße

— geändert am 03.01.2014, 16:12:00

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

03.01.2014, 16:13:02 via Website

Vielleicht den Button größer machen.
Oder Alternativ die Schrift ins Bild Codieren

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 16:16:57 via Website

Die Frage ist für mich, warum ist das Bild so groß. Ich hatte es so verstanden, dass Android es anpasst und nicht die Originalgröße nimmt.

Verstehe ich das falsch?

Antworten
impjor 28
impjor
  • Forum-Beiträge: 1.793

03.01.2014, 16:31:26 via Website

Android passt es so an, dass es auf allen Auflösungen gleich groß ist.

Meint: Dein Gerät hat eine Auflösung von 100ppi (einfach angenommen), also 100 Pixel pro inch. Dein Bild ist nun 2inch groß (angenommen). Wenn du die App aber auf einem Gerät mit der selben Bildschirmgröße, aber mit 200ppi Auflösung ansiehtst, müsstes es ja eigentlich nur noch 1inch groß sein. Android skaliert es aber für dich auf 2inch. Deshalb ist die Auflösung des Bildschirms nicht mehr entscheident.

Siehe auch hier: http://developer.android.com/guide/practices/screens_support.html#density-independence

LG

Liebe Grüße impjor.

Für ein gutes Miteinander: Unsere Regeln
Apps für jeden Einsatzzweck
Stellt eure App vor!

Antworten
7
Paule
  • Forum-Beiträge: 106

03.01.2014, 17:07:40 via Website

Hallo,

das heißt, ich gehe hin und mach das Image so groß (Pixel), dass es auf den Button passt, Android kümmert sich dann darum welche Größe er aus den Ordner
drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi
nimmt damit es passt, oder?

Grüße

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

03.01.2014, 17:09:20 via Website

Ganz genau das heißt es. Du musst dich nur um das Layout kümmern, denn aus welchem Ordner die Bilder Kommen entscheidet das Betriebsystem.

— geändert am 03.01.2014, 17:10:07

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten
7
Paule
  • Forum-Beiträge: 106

02.02.2014, 18:28:11 via Website

Hallo,

ich brauch noch einmal eure Hilfe.

Ich habe jetzt Grafiken im SVG Format vorliegen und habe Sie mit dem Illustrator CS3 geöffnet. Wie kann ich den die Grafik jetzt als PNG in den passenden Auflösungen exportieren? Es gibt zwar eine Exportmöglichkeit, aber da kann ich keine DPI sonder PPI angeben.

Folgende Angaben habe ich hier im Forum gefunden:

ldpi @ 128.00dp = 96.00px
mdpi @ 128.00dp = 128.00px
hdpi @ 128.00dp = 192.00px
xhdpi @ 128.00dp = 256.00px

Grüße und danke

Antworten
Pascal P. 64
Pascal P.
  • Admin
  • Forum-Beiträge: 11.286

02.02.2014, 18:52:33 via Website

Suchst du sowas (ist ein online converter):
http://image.online-convert.com/convert-to-png

— geändert am 02.02.2014, 18:52:41

LG Pascal //It's not a bug, it's a feature. :) ;)

Antworten
7
Paule
  • Forum-Beiträge: 106

02.02.2014, 19:28:57 via Website

Hallo,

nein,nein. Für mich ist nicht ganz klar wie ich die geforderten DPI in PPI umsetzten kann mit Illustrator. Oder kann mir jemand die PPI Daten zu den einzelnen Größen nennen?

ldpi
mdpi
hdpi
xhdpi

Grüße

Antworten
7
Paule
  • Forum-Beiträge: 106

02.02.2014, 20:03:57 via Website

Hallo,

scheinbar ist der Unterschied zwischn DPI und PPI maginal.

Folgendes Problem habe ich jetzt wieder. Ich habe jetzt ein Bild mit gleichem Namen in folgenden Größen in die passenden Ordner gelegt:

MDPI: 160 dpi
HDPI: 240 dpi
XHDPI: 320 dpi
XXHDPI: 480 dpi

Dann habe ich dem Button mit folgendem Attribut das Bild zugeordnet:

android:drawableTop="@drawable/logout_account

Jetzt wird das Bild viel groß auf dem Button dargestellt, siehe Screen.

Was mache ich jetzt falsch?

Grüße und Danke

Antworten
7
Paule
  • Forum-Beiträge: 106

02.02.2014, 20:47:44 via Website

was mir gerade aufgefallen ist die Größe bei einem ImageButton automatisch angepasst wird. Aber da kann ich keinen Text setzten.

!!

Antworten
impjor 28
impjor
  • Forum-Beiträge: 1.793

03.02.2014, 12:17:38 via App

Dann musst du die Bilder entsprechend kleiner abspeichern?? Alles andere wäre doch doppelte Ressourcenverschwendung: 1. Wird zu viel Speicherplatz belegt und zum 2. muss das Bild noch runterskaliert werden?
LG

Liebe Grüße impjor.

Für ein gutes Miteinander: Unsere Regeln
Apps für jeden Einsatzzweck
Stellt eure App vor!

Antworten
7
Paule
  • Forum-Beiträge: 106

03.02.2014, 12:52:39 via Website

Hallo,

ich habs jetzt anderst gemacht.

Ich habe ein LinearLayout vertical genommen und dort eine Textview und ImageView reingesetzt und mit dem onclick event verknüpft. Damit aht es geklappt.

Grüße und Danke

Antworten
7
Paule
  • Forum-Beiträge: 106

03.02.2014, 12:56:34 via Website

Hallo impjor,

dann verstehe ich es aber wirklich noch nicht!!!
So wie ich das jetzt verstanden hatte muss ich das Bild in verschiedenen Auflösungen bereit halten um alle Größen von Smartphones und Tables zu untertützen, damit die Bilder nicht verpixelt aussehen. Dazu sind doch die genannten Ordner da, oder? Das System geht dann hin und schaut in der verschienenen Ordner nach der Datei mit dem gleichen Namen und nimmt das evt. größere zur Darstellung. Wenn ich das Bild doch kleiner abspeichere verändert sich doch die DPI Anzahl, oder?

Grüße

Antworten
impjor 28
impjor
  • Forum-Beiträge: 1.793

03.02.2014, 14:57:03 via Website

Stell dir als Beispiel vor, du hast nur einen drawable-Ordner mit einem Bild, welches 100x100 Pixel groß ist. Auf einem 100dpi-Screen ist dann dein Bild genau ein inch breit (2,54cm). Auf einem 200dpi-Screen wäre das Bild dann 0.5inch (1,27cm) breit. Damit das nicht so ist und das Bild auf allen Bildschirmen "gleich viele inches/cm groß" ist, skaliert Android es automatisch hoch, würde dein 100x100 Pixel-Bild also auf 200x200 Pixel hochskalieren, wenn es auf einem 200dpi-Screen läuft. Auf einem 50dpi-Screen würde dein Bild dann entsprechend von 100x100 auf 50x50 Pixel herunterskaliert werden und wäre so immer noch 1 inch breit/hoch.
Da Android dein Bild nun mal (mehr oder weniger stark) runter- und hochskaliert, kann es natürlich sein, dass die Qulität darunter leidet. Deshalb kannst du verschiedene Formate in die ldpi-/mdpi-/hdpi/xhdpi-Ordner legen und Android nimmt dann bei entsprechender dpi das passende Bild.
Hier findest du noch einen Link dazu: http://developer.android.com/guide/practices/screens_support.html

LG

Liebe Grüße impjor.

Für ein gutes Miteinander: Unsere Regeln
Apps für jeden Einsatzzweck
Stellt eure App vor!

Antworten
7
Paule
  • Forum-Beiträge: 106

03.02.2014, 20:23:28 via Website

Hi impjor,

jetzt hab ich es verstanden. Leider habe ich die Images viel zu groß gemacht. Ich will aber jetzt nicht noch einmal alle ändern :-(
Die Bilder haben anstatt z.b. 2,5 kb 6,5 kb bei xxhdpi. Das macht aus meiner Sicht keinen großen Nachteil was zumindest die Größe betrifft, oder? Es sind nur 8 Images.

Das einzige was dann, nach deiner Aussage passiert, dass auf Geräten mit einer geringen DPI die Images runtergerechnet werden müssen, oder? Welchen genauen Nachteil hat das?

Grüße

Antworten
impjor 28
impjor
  • Forum-Beiträge: 1.793

03.02.2014, 20:29:00 via App

Auf Geräten mit geringer dpi wird entsprechend das Bild aus ldpi-Ordner genommen und skaliert. Das kostet einmal Rechenzeit und zum zweiten kann es sein, dass das Bild nicht so klar dargestellt wird, da Android es nicht so perfekt skaliert, wie man es manuell mit einem Bildverarbeitungprogramm machen kann.

LG

Liebe Grüße impjor.

Für ein gutes Miteinander: Unsere Regeln
Apps für jeden Einsatzzweck
Stellt eure App vor!

Antworten
7
Paule
  • Forum-Beiträge: 106

03.02.2014, 20:54:40 via Website

Hi,

danke für deine Gedult!
Ich hab es auf meinem Handy getestet, dass eine sehr geringe Auflösung hat. Da sieht es gut aus, daher lass ich jetzt die Images in der "etwas" sehr großen Auflösung.

Danke und schönen Abend noch!

Antworten