Erstellung eines Designs

theboss22 · 2014-12-21T10:10:46+0100

Hallo Leute,
ich würde gerne ein Design, ähnlich dem auf dem Foto erstellen.
Habe jetzt die einzelnen Bilddateien in den drawable-ordner eingefügt, leider hat es nicht so geklappt wie ich wollte.
Nach meiner Vorstellung sollte die App mal so aussehen:
https://www.dropbox.com/s/cep17vbv302ymf3/03 Wetter einstellen.jpg?dl=0

Ich habe mit verschiedenen Image-Buttons gearbeitet, verstehe nun jedoch nicht, wie ich sie nebeneinander anlegen kann. Wie kann ich außerdem den schwarzen Kasten um die einzelnen Buttons hinbekommen ? Sollte ich dafür lieber Bilddateien nehmen oder geht das auch mit Android SDK ?

Mit freundlichen Grüßen und danke für Hilfe,
the boss22

Cynob · 2014-12-21T10:48:21+0100

Also ich kann dir sagen wie ich es in eclipse erstellen würde

Nebeneinander bekommst du deine images wenn du diese in ein Layout packst.

Ich würde eins "vertical" nehmen und in dieses 3 "horizontal" packen.
Jeweils in ein "horizontales" zwei deiner Image Buttons.

So und die Ramen um die Teile würde ich mit z.b. Gimp erstellen.
Dabei den Hintergrund deines Ramens auf "durchsichtig" stellen.

So wenn du jetzt diesen Ramen auch in deinem drawable Ordner speicherst kannst du diesen als "background" in den einzelnen Images hinzufügen.

Das sollte dein erwünschtes Ergebnis erzielen.

Gruß Cynob

theboss22 · 2014-12-21T19:27:54+0100

Vielen Dank für die schnelle Antwort! :smile:

werde ich gleich mal ausprobieren, bei weiteren Fragen melde ich mich nochmal

Der ursprüngliche Beitrag von 19:20 Uhr wurde um 19:27 Uhr ergänzt:

ich weiß jetzt nicht ob das so richtig gedacht ist, habe die horizentalen Layouts im vertikalen Layout.
Ist der Code so richtig ?
https://www.dropbox.com/s/a466n1fpp42z16e/Bildschirmfoto 2014-12-21 um 19.25.00.png?dl=0

Bei der grafischen Darstellung kommt folgendes:

Missing styles. Is the correct theme chosen for this layout?
Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.

NOTE: This project contains resource errors, so aapt did not succeed, which can cause rendering failures. Fix resource problems first.

"<LinearLayout>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<ImageButton>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<ImageButton>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<ImageButton>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<ImageButton>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_width attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
"<LinearLayout>" does not set the required layout_height attribute:
(1) Set to "wrap_content"
(2) Set to "match_parent"
Failed to find style 'imageButtonStyle' in current theme
You must supply a layout_width attribute.
You must supply a layout_height attribute.
:sad:

Hast du eine Idee ?
Viele Dank im voraus ?

Cynob · 2014-12-21T19:35:01+0100

So habeich gemeint:

Code:

<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="com.example.test4layout.MainActivity" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:orientation="vertical" >

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

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

        </LinearLayout>

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

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

        </LinearLayout>

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

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

theboss22 · 2014-12-21T19:50:26+0100

Den Code dann komplett einfach in der xml einfügen ?
habe leider vier Fehlermeldungen:
https://www.dropbox.com/s/xze26ueu3uv760d/Bildschirmfoto 2014-12-21 um 19.48.58.png?dl=0

Weißt du woran das liegt ?

bin leider blutiger Anfänger :sad:

falls das wichtig ist, habe Android 4.4.2 aktuell

Cynob · 2014-12-21T20:00:44+0100

dann lösch doch die 4 zeilen mal.

theboss22 · 2014-12-21T20:05:53+0100

hab ich, jetzt sind die Fehler weg

aber beim grafische Overlay steht jetzt:
Failed to find style 'imageButtonStyle' in current theme

Noch eine weitere Frage...wie kann ich die Activities mit den Java-Dateien verbinden ?

Cynob · 2014-12-21T20:15:01+0100

Dir wird dann denk ich das appcompat_v7 fehlen.
kannst du in eclipse über Window > SDK Manager nachinstallieren.

Das wäre dann unter dem Reiter Extras die "Android_Support_library"

die activitys werden in den klassen unter "onCreate" eingebunden. Das sieht dann so aus z.B.:

Code:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

und bei "setContentView(R.layout.activity_main);" wird deine activity mit der klasse verknüpft.

theboss22 · 2014-12-21T20:30:51+0100

Viele Dank, das hat schonmal geklappt

jetzt einfach ein schwarzes Bild im Hintergrund einfügen und transparent machen oder wie war deine Idee ?
https://www.dropbox.com/s/1xclhwc4rn05t40/Bildschirmfoto 2014-12-21 um 20.25.54.png?dl=0

die app_combat lade ich mir jetzt auch gerade runter

Zu der Verbindung mit Klassen und main.xml, wie ist das mit der Namensbenennung ? Wenn die activity z.B. wetter.xml heißt, muss dann die dazugehörige Klasse auch ähnlich heißen ? Oder müsste es dann wie folgt sein:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_wetter);

Vielen Dank schonmal

Cynob · 2014-12-21T20:44:55+0100

setContentView(R.layout.activity_wetter);

....sie würde "activity_wetter" heißen.

schau dir mal den Code genau an

setContentView = auf gut Deutsch > setze die Ansicht
und in den klammern bekommt der Aufruf dann mitgeteilt das er im layout deine activity_wetter findet. ( die R Datei wird automatisch angelegt - da hast du beim programmieren eigentlich nix wirklich mit zu tun)

Die hintergrundbilder ( also ramen) würd ich einfach mit gimp oder so erstellen und als png speichern.

email.filtering · 2014-12-21T20:57:43+0100

Sag mal theboss22, was soll denn das letztendlich werden? Eine modifizierte App, ein Theme, ein Hintergrundbild, ...?

theboss22 · 2014-12-21T21:54:35+0100

danke

kann ich auch folgendes einfügen ?

Code:

 <EditText
        android:id="@+id/editTextMessage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:inputType="textMultiLine"
          android:background="#B3FFFFFF"
        android:lines="13" /

>

also anstatt eines Rahmens ?

Der ursprüngliche Beitrag von 21:53 Uhr wurde um 21:54 Uhr ergänzt:

email.filtering schrieb:
Sag mal theboss22, was soll denn das letztendlich werden? Eine modifizierte App, ein Theme, ein Hintergrundbild, ...?

soll letztendlich eine App die werden, die noch eine Suchfunktion beinhaltet, ist quasi ein Schulprojekt

Cynob · 2014-12-21T22:20:32+0100

Dann würd ich mich aber erstmal mit den Grundlagen mehr befassen

mal so ein hello world tutorial durchmachen und dann sich steigern.

theboss22 · 2014-12-21T22:24:52+0100

das habe ich schon gemacht

habe auch ein Buch ausgeliehen worin das alles behandelt wird, habe auch schon einige activities erstellt

find das aber trotzdem ganz schön kompliziert

xminister · 2014-12-21T22:34:39+0100

theboss22 schrieb:
soll letztendlich eine App die werden, die noch eine Suchfunktion beinhaltet, ist quasi ein Schulprojekt

Dann ist dein Thema jetzt endlich auch dort gelandet, wo es hingehört. Achte bitte in Zukunft darauf, deine Fragen auch im richtigen Bereich zu posten. Danke.

Cynob · 2014-12-22T10:24:12+0100

theboss22 schrieb:
danke

kann ich auch folgendes einfügen ?

Code:

<EditText android:id="@+id/editTextMessage" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="top" android:inputType="textMultiLine" android:background="#B3FFFFFF" android:lines="13" /

>

also anstatt eines Rahmens ?

Der ursprüngliche Beitrag von 21:53 Uhr wurde um 21:54 Uhr ergänzt:

soll letztendlich eine App die werden, die noch eine Suchfunktion beinhaltet, ist quasi ein Schulprojekt

Öhm gimp kennst du? istn kostenloses Grafikbearbeitungsprogramm.
Ich würd sagen für unsere Zwecke gut genug

Ich hab damit jetzt mal so nen Ramen angelegt - jetzt nur mal so als Beispiel.
Die gimp Datei hat die Endung .xcf welche man hier nicht hochladen darf ( warum auch immer) deswegen hab ich die Vorlage mal als zip gepackt und unten angehängt.

Das fertige .png Bild wird auch unter /drawable gespeichert und als background für den jeweiligen imagebutton ausgewählt.

theboss22 · 2014-12-22T12:00:33+0100

ahhh cool vielen Dank!

ich guck mal wie ich weiterkomme

Der ursprüngliche Beitrag von 11:47 Uhr wurde um 12:00 Uhr ergänzt:

Das Grafische Overlay sieht jetzt so aus:
https://www.dropbox.com/s/c3ld53b7vxf9dje/Bildschirmfoto 2014-12-22 um 11.58.59.png?dl=0

verstehe aber nicht warum, im Code ist doch gar kein Befehl dafür enthalten das der Hintergrund der Image Buttons schwarz ist ? :ohmy:

Code:

<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:background="@drawable/background"
    tools:context="com.example.test4layout.MainActivity" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
           
            <ImageButton
              android:id="@+id/imageButton3"
                android:layout_width="151dp"
                android:layout_height="154dp"
                android:src="@drawable/sunny" />

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="151dp"
                android:layout_height="154dp"
                android:src="@drawable/cloudy" />

        </LinearLayout>

        <LinearLayout
            android:id="Fläche"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            

             <ImageButton
                 android:id="@+id/imageButton5"
                 android:layout_width="148dp"
                 android:layout_height="148dp"
                 android:src="@drawable/rain" />

            <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="156dp"
                android:layout_height="145dp"
                android:src="@drawable/fog" />

        </LinearLayout>

   

    </LinearLayout>

</RelativeLayout>

Cynob · 2014-12-22T12:10:01+0100

Mach zuerst mal bei den Image buttons diese ganzen verschiedenen Werte:

android:layout_width="151dp"
android:layout_height="154dp"

einheitlich auf "wrap_content"

Damit werden die Bilder nicht abgeschnitten.

Der Hintergrund ist jetzt deswegen grau da ich in der ramen png welche du von mir hast den Inhalt des Ramens mit Grau aufgefüllt hab ( in gimp) und diese Ebene dann transzulent (also halbdurchsichtig) gestellt hab.

theboss22 · 2014-12-22T12:22:13+0100

hmm jetzt sieht es so aus:
https://www.dropbox.com/s/3vmvob87nte9ltu/Bildschirmfoto 2014-12-22 um 12.19.47.png?dl=0

Das mit dem Rahmen weiß ich, aber den hab ich doch laut dem Code garnicht benutzt ? Oder kann man den auch benutzen, ohne dass er im Code steht ?

Cynob · 2014-12-22T12:35:00+0100

Also du zeigst mir doch die "vorschau" welche eclipse ausspuckt?!?

Da musst du wissen das man über der View n Auswahlmenü findet ( bei mir zeigt das Standardmäsig "Nexus One" an) rechts nebendran istn kleiner Pfeil - dort draufklicken und unter "generic" kannst du dann verschiedene Auflösungen einstellen.

Die Bilder musst du dann in der fertigen apk jeweils in der passenden größe in den drawable Ordnern:
hdpi/ xhdpi / mdpi usw.
speichern ( der Name muss aber gleich bleiben!) Das Android System wählt dann je nach System auf dem es läuft die passende größe aus.

So zum hintergrund: Hattest du ihn schon vorher eingefügt und danach wieder gelöscht? eclipse ist da n bisschen träge

Erstellung eines Designs

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

email.filtering

Gast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

xminister

Ehrenmitglied

Cynob

Enthusiast

Anhänge

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

theboss22

Ambitioniertes Mitglied

Cynob

Enthusiast

Ähnliche Themen