Android Button erstellen nach Vorlage

bennemann8

Mitglied
Hallo zusammen...
Ich bin recht neu in der Android-App-Entwicklung, benötige allerdings eine App, die die Anwesenheit von Personen aufnimmt.
Hatte mir dazu gedacht, das ganze einfach über eine SQLite DB zu realisieren - wird schon irgendwie klappen mein Vorhaben.
Das ist aber z.Z. nicht mein Problem, sondern:

Ich würde mir ganz gerne Buttons erstellen, wie sie unten auf dem Screenshot, in der Anlage zu sehen sind.
Gibt es solche Buttons schon vorgefertigt, oder muss ich diese selbst implementieren?
Wenn ja, wie würdet ihr das angehen?
Eigene Klasse schreiben, die von der Klasse
Code:
Button
erbt und danach mit Labeln o.Ä. arbeiten?
Das erscheint mir irgendwie reichlich kompliziert, nur für einen Button?!

Ihr habt bestimmt ein paar bessere Ideen ;)

Vielen Dank schon einmal im Voraus

bennemann8
 

Anhänge

  • Screenshot_2014-01-22-18-35-29.jpg
    Screenshot_2014-01-22-18-35-29.jpg
    67,6 KB · Aufrufe: 42

dzim

Top Contributor
Am Ende ist es relativ einfach. Erstelle dir ein Layout - ich denke ein RelativLayout ist hier zielführend. Dem ordnest du nun alle notwendigen Teile zu und bindest es einfach X-Mal in ein anders Layout ein:

[XML]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@drawable/button_image_selector" >

<View
android:id="@+id/viewColor"
android:layout_width="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="@color/cnlabBlue" />

<TextView
android:id="@+id/textViewTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textView1"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/viewColor"
android:gravity="center_horizontal"
android:text="Title\nAwsome Button"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />

<ImageView
android:id="@+id/imageViewArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/ic_action_start_dark" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textViewTop"
android:layout_alignParentBottom="true"
android:layout_margin="5dp"
android:layout_toLeftOf="@+id/imageViewArrow"
android:gravity="right|center_vertical"
android:text="Hint Text\nSomething"
android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>
[/XML]
Wichtig ist hier, dass du einen Button-Selector als Hintergrund für das Layout (siehe ganz oben) verwendest, sonst sieht es nicht wie ein Button aus und verhält sich auch nicht so.
"Grid" ist in meinem Test jetzt etwas irreführend, aber es ist auch nur ein Fake und alles andere als ein optimiertes Layout! Also verwende es um Gottes Willen bloß nicht! :-D
[XML]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="@color/white"
android:eek:rientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:eek:rientation="horizontal" >

<include
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
layout="@layout/button_test" />

<include
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_weight="1"
layout="@layout/button_test" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:eek:rientation="horizontal" >

<include
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
layout="@layout/button_test" />

<include
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_weight="1"
layout="@layout/button_test" />
</LinearLayout>

</LinearLayout>
[/XML]
Du siehst, das ich hier mit includes arbeite. Das mit den Höhen ist nicht optimal, da müsste eine dynamische Optimierung stattfinden, oder das ganze muss in einem Scroll-Container für kleine Displays stecken...
Das Fragment ist am Ende stight forward. Hier kannst du einfach den "Buttons" ein OnClickListener zuweisen und fertig!
Java:
package ch.cnlab.speedtest2.ui.adapter;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Toast;
import ch.cnlab.speedtest.R;

public class TestFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.grid_test, container, false);
		
		view.findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), "Button1 was clicked!", Toast.LENGTH_SHORT).show();
				;
			}
		});
		view.findViewById(R.id.button2).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), "Button2 was clicked!", Toast.LENGTH_SHORT).show();
				;
			}
		});
		view.findViewById(R.id.button3).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), "Button3 was clicked!", Toast.LENGTH_SHORT).show();
				;
			}
		});
		view.findViewById(R.id.button4).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), "Button4 was clicked!", Toast.LENGTH_SHORT).show();
				;
			}
		});
		
		return view;
	}
}
Anbei ein Screenshot des Test, den ich schnell in unsere App eingebastelt hab, damit ich einen funktionierenden Container habe.
Der leicht Blau hinterlegte "Button" ist gerade im "pressed"-Zustand... Nur um zu zeigen, dass es geht.

Hilft dir das?

#edit:
PS: Ich habe nur dunkle Selectoren, daher haben die bei mir nicht deine Farbe ;-) Wenn du noch einen Selector brauchst (ohne die entsprechenden Shapes), kann ich den noch schicken.
 

Anhänge

  • device-2014-01-23-105147.jpg
    device-2014-01-23-105147.jpg
    42,7 KB · Aufrufe: 43
Zuletzt bearbeitet:

bennemann8

Mitglied
#edit:
PS: Ich habe nur dunkle Selectoren, daher haben die bei mir nicht deine Farbe ;-) Wenn du noch einen Selector brauchst (ohne die entsprechenden Shapes), kann ich den noch schicken.

sau guut :)
Das hilft mir! Danke ;)

wenn du die Selektoren hast, gerne - immer man her damit, testen was das Zeug hält und was am elegantesten aussieht wird genommen :D
 

dzim

Top Contributor
Der (denkbar einfache) Selector
Code:
android:background="@drawable/button_image_selector"
, der oben im button_test.xml eingebunden war:
[XML]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true" android:drawable="@drawable/base_shape_transparent" />
<item android:state_pressed="true" android:drawable="@drawable/base_shape_transparent_pressed" />
<item android:state_enabled="true" android:drawable="@drawable/base_shape_transparent" />
<item android:state_enabled="false" android:drawable="@drawable/base_shape_transparent_disabled" />
<item android:drawable="@drawable/base_shape_transparent" />

</selector>
[/XML]

Als Basis für die einzelnen Varianten diente die base_shape_transparent.xml
[XML]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<gradient
android:angle="270"
android:centerColor="@color/black"
android:endColor="@color/darkestGrey"
android:startColor="@color/darkestGrey" />

<corners android:radius="5dp" />

<stroke
android:width="1dp"
android:color="@color/darkGrey" />

<padding
android:bottom="2dp"
android:left="5dp"
android:right="5dp"
android:top="2dp" />

</shape>
[/XML]

base_shape_transparent_pressed.xml und base_shape_transparent_disabled.xml unterscheiden (logischerweise) sich nur in den gewählten Farben.

Anstelle der XML-Shapes könntest du natürlich auch 9-Patch-PNGs verwenden, meine Buttons sind ja stilistisch eher platt ;-)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
J Android button mithilfe einer Methode automatisch erstellen Android & Cross-Platform Mobile Apps 6
J "Button" auf List erstellen Android & Cross-Platform Mobile Apps 4
T Android Studio: Einen Button in einer For Schleife verwenden Android & Cross-Platform Mobile Apps 2
W App deinstallieren per Button & Andere App Öffnen per Button Android & Cross-Platform Mobile Apps 24
W Apk automatisch installieren per Button Android & Cross-Platform Mobile Apps 55
W aus Fragmente in andere Klasse wechseln mit Button Android & Cross-Platform Mobile Apps 3
T App updaten via Button Android & Cross-Platform Mobile Apps 10
AGW Android Teilen Button ändern Android & Cross-Platform Mobile Apps 14
A Button in SurfaceView integrieren Android & Cross-Platform Mobile Apps 10
J Android App - Browser öffnen und Text eingeben/Button click auslösen Android & Cross-Platform Mobile Apps 10
L Button zum Quadrad zwingen Android & Cross-Platform Mobile Apps 2
S Android Absoluter Neuling: EditText zur Laufzeit verändern bzw. über Button Android & Cross-Platform Mobile Apps 2
L Dialog anzeigen wenn auf Button gedrückt wird. Android & Cross-Platform Mobile Apps 4
S Android ListFragment & ArrayAdapter - Button-Werte werden vergessen Android & Cross-Platform Mobile Apps 0
B Android Abfragen wie lang ein Button gedrückt wurde Android & Cross-Platform Mobile Apps 2
A AlertDialog Enable Button Android & Cross-Platform Mobile Apps 1
J Button array ID Problem Android & Cross-Platform Mobile Apps 2
D Android Activity wechseln per Button Android & Cross-Platform Mobile Apps 3
B Android ringProgressDialog nach Erfolg Button einfärben Android & Cross-Platform Mobile Apps 2
A Android Menü Button oben links Android & Cross-Platform Mobile Apps 1
B Mit Button GeräteEinstellung des Handys öffnen Android & Cross-Platform Mobile Apps 3
M Android Android "Up-Button" extra definieren? Android & Cross-Platform Mobile Apps 1
K Problem mit arraylist und button Android & Cross-Platform Mobile Apps 16
T Button aktivieren per Qullcode... Android & Cross-Platform Mobile Apps 3
T Button geht net... Android & Cross-Platform Mobile Apps 2
D Man sieht nicht ob Button gedrückt wurde! Android & Cross-Platform Mobile Apps 10
K Grafik Tablerow, Button erstreckt sich in der gesamten Breite trotz Beschrenkung durch (max)width Android & Cross-Platform Mobile Apps 2
G Button ein Wert zuweisen Android & Cross-Platform Mobile Apps 5
M 20 Image Button für jede Auflösung positionieren Android & Cross-Platform Mobile Apps 3
L Android Button mit Pfeil nach rechts Android & Cross-Platform Mobile Apps 1
M Einzel Verarbeitung welcher Button angeklickt wurde? Android & Cross-Platform Mobile Apps 6
G Back-Button Methode überschreiben Android & Cross-Platform Mobile Apps 2
P Android Option Button Android & Cross-Platform Mobile Apps 4
G Check Button ist unchecked trotz setChecked(true) Android & Cross-Platform Mobile Apps 6
G Android Button mit Bild Android & Cross-Platform Mobile Apps 4
W Android App Programmierung - Button ganz transparent machen Android & Cross-Platform Mobile Apps 3
L Custom Dialog Button event Android & Cross-Platform Mobile Apps 2
J Button rechtsbündig Android & Cross-Platform Mobile Apps 5
A Android Button Array? Android & Cross-Platform Mobile Apps 6
P Android Button mit bild versehen Android & Cross-Platform Mobile Apps 4
U Fire button und Command.BACK, 1 kommen sich in die quere Android & Cross-Platform Mobile Apps 2
J Grafiken im metrischen Maß erstellen Android & Cross-Platform Mobile Apps 3
W Zip4J Zip erstellen und gespeichert URI Bilder einfügen Android & Cross-Platform Mobile Apps 3
Alex IV Android App erstellen Android & Cross-Platform Mobile Apps 3
F Audiostream erstellen und empfangen außerhalb des WLans Android & Cross-Platform Mobile Apps 8
E Neue app erstellen Android & Cross-Platform Mobile Apps 3
T Android Android Augmented Faces in Java. Neue Landmarks erstellen Android & Cross-Platform Mobile Apps 1
F Screenshot übergreifend bei erstellen (No-Root) Android & Cross-Platform Mobile Apps 1
B Inhaltsverzeichnis erstellen Android & Cross-Platform Mobile Apps 12
B Android Projekt für Android und IOS erstellen? Android & Cross-Platform Mobile Apps 5
Hijo2006 PDF erstellen Android & Cross-Platform Mobile Apps 4
? Android erstellen der grafischen Benutzeroberfläche und Kommunikation zwischen Apps Android & Cross-Platform Mobile Apps 8
D Android "mehrere" Fragmente erstellen + richtige Zuordnung. Aber wie? Android & Cross-Platform Mobile Apps 1
G Thread in einer Service erstellen Android & Cross-Platform Mobile Apps 0
G Datei erstellen Android & Cross-Platform Mobile Apps 10
A Android Datei erstellen/schreiben/auslesen Android & Cross-Platform Mobile Apps 1
H Frage bei erstellen eines Projectes Android & Cross-Platform Mobile Apps 3
J Userliste aus internet mit z.B xml erstellen Android & Cross-Platform Mobile Apps 5
L Android Datei erstellen, Daten einspeichern und auslesen Android & Cross-Platform Mobile Apps 2
F Bei einer Android Java App, Objekte erstellen Android & Cross-Platform Mobile Apps 2
H Android Contact erstellen Android & Cross-Platform Mobile Apps 2
N Wie Menü erstellen und Verknüpfen Android & Cross-Platform Mobile Apps 9
F Problem beim Erstellen der Jar File Android & Cross-Platform Mobile Apps 4
B Textdatei auf Handy erstellen / lesen / schreiben? Android & Cross-Platform Mobile Apps 2
B Programm für NokiaComunicator erstellen Android & Cross-Platform Mobile Apps 2
K Programme für Handy erstellen Android & Cross-Platform Mobile Apps 3
P Erstellen einer Jar-File Android & Cross-Platform Mobile Apps 2
B Zufallszahlen zwischen 1 und 49 erstellen? aber wie? Android & Cross-Platform Mobile Apps 7
AllBlack Auf der Suche nach einem App-Entwickler Android & Cross-Platform Mobile Apps 1
J Android zugrif auf Thread nach Handy drehen. Android & Cross-Platform Mobile Apps 10
AGW App schließt nach 2 Sekunden Android & Cross-Platform Mobile Apps 2
ruutaiokwu Android Daten von "Activity A" nach "Activity B" umleiten? Android & Cross-Platform Mobile Apps 13
A Android-Studio: 2. Layout nach kurzer Zeit aufzeigen Android & Cross-Platform Mobile Apps 2
B Profilpic wird nach anmeldung nicht angezeigt. Android & Cross-Platform Mobile Apps 2
J BLOB nach dem Download unbrauchbar Android & Cross-Platform Mobile Apps 0
B App schließt nach Start. Android & Cross-Platform Mobile Apps 12
J Android Nach Appsprachenänderung die Systemsprache ermitteln Android & Cross-Platform Mobile Apps 2
G App wird nach Installation auf Smartphone beendet Android & Cross-Platform Mobile Apps 1
B Android wie kann ich in einer xml nach bestimme item suchen (DOM) Android & Cross-Platform Mobile Apps 7
Fischkralle Android Nach Textdateien in Ordner suchen Android & Cross-Platform Mobile Apps 5
V Android Fehlermeldung beim Öffnen von Eclipse nach Installation der Android Erweiterung Android & Cross-Platform Mobile Apps 4
T Android Nach Buttonclick neu laden Android & Cross-Platform Mobile Apps 3
B Android Activity nach gedrückte Returntaste weiterlaufen lassen Android & Cross-Platform Mobile Apps 2
N PriceScannerApp: warum wird nach dem Scannen Display gleich schwarz? Android & Cross-Platform Mobile Apps 4
L Android Bildschirm bleibt dunkel nach neustarten der App nach betätigen des Home-Buttons Android & Cross-Platform Mobile Apps 3
N Android EditText.setError() funktioniert nicht nach Rotation Android & Cross-Platform Mobile Apps 1
M Android App startet nach Tastensperre neu Android & Cross-Platform Mobile Apps 3
P Android Nach Animation Layout auf alten Platz Android & Cross-Platform Mobile Apps 3
G Werteübergabe nach unbestimmter Zeit Android & Cross-Platform Mobile Apps 28
A Fehlermeldung nach Neuinstallation von Eclipse/bestehenden Projekten... Android & Cross-Platform Mobile Apps 2
E Android App stürzt nach Modifizierung ab Android & Cross-Platform Mobile Apps 2
N Textview macht immer nach einem Beistrich einen Abstand Android & Cross-Platform Mobile Apps 6
K Apps durchsuchen nach verwendeter Methode Android & Cross-Platform Mobile Apps 4
M Android MediaRecorder - Crash nach 2. Start Android & Cross-Platform Mobile Apps 2
S rms recordstore bleibt nach schießen der anwengung nicht erhalten Android & Cross-Platform Mobile Apps 4
M Text in txt-Datei schreiben und nach ABC sortieren? Android & Cross-Platform Mobile Apps 2
H FileConnection: Frage nach Dateisystem-Zugriff unterdrücken Android & Cross-Platform Mobile Apps 5
K suche nach der richtigen dokumentationh Android & Cross-Platform Mobile Apps 2
S ein String nach vorgegebenen Zeichen teilen Android & Cross-Platform Mobile Apps 3
L Ungültiges Java-Archiv (jar) nach Programmentwicklung Android & Cross-Platform Mobile Apps 4

Ähnliche Java Themen

Neue Themen


Oben