Bild in Overlay Activity

  • Antworten:8
  • OffenNicht stickyNicht beantwortet
  • Forum-Beiträge: 42

23.01.2017, 22:28:25 via Website

Hallo,

ich möchte gern ein Bild eines OSD-Keyboard´s als overlay auf dem Bildschirm darstellen.
Ich meine sowas: Beispiel OSD-Keyboard

Wenn ich die Activity starte, soll das Bild mittig am unteren Rand des Bildschirms angezeigt werden. Der Hintergrund soll noch leicht erkennbar sein.

Die Taster möchte ich natürlich auswerten. Dazu müsste ich Transparente Buttons über das Bild legen.

Wenn möglich, wäre es auch genial, wenn man das "OSD-Keyboard" auf dem Bildschirm beliebig positionieren könnte. Das ist aber nur ein Nice-to-Have!

Mir fehlt leider der Ansatz. Wie kann man das machen?

Eigenen Style anlegen, wo ich eine halbtransparente Farbe definiere?
Die Activity als framelayout?

Vielen Dank!
Gruß Danie

Antworten
  • Forum-Beiträge: 2.902

23.01.2017, 22:50:05 via Website

Hallo Danie,

grundsätzlich musst du für einen ImageView , den du als Button verwenden kannst und einen Listener
zuordnest, keine ImageResource hinterlegen.

Allerdings wirst du mit Standard Layout an gewisse Grenzen gelangen , die Device Display abhängig sind.

Damit deine transparenten Buttons auf jedem Display ( abhängig auch von der DPI) immer auf der richtigen
Position sitzen , wirst du um die absolute manuelle Berechnung deiner darunterliegenden Grafik und
die Buttons nicht drumrum kommen.

Mit einem einfachen Layout wirst du (deviceabhängig) Versätze bekommen

Fleißarbeit ist angesagt

— geändert am 24.01.2017, 11:50:33

Liebe Grüße - Stefan
[ App - Entwicklung ]

Danie

Antworten
  • Forum-Beiträge: 42

24.01.2017, 19:37:38 via Website

Hallo,

danke für den Tipp!
Das soll wirklich nur auf einem Gerät vernünftig laufen. Einen Anwendungsfall auf anderen Geräten wird es nie geben.

Wie wäre jetzt der bessere Weg? Anstelle des einfachen Layouts?

Ich hätte jetzt einfach ein neues layout gemacht, hätte einen imageView daran deklariert und eine neue Activity gestartet.
Bei Klick auf zurück, will ich sie wieder beenden.

Das verschieben eines ImageView geht wohl auch nicht so ohne weiteres? Verschiebt das die Button´s eigentlich mit?

Gruß Danie

Antworten
  • Forum-Beiträge: 2.902

24.01.2017, 20:51:52 via Website

Dann kannst du dir ein View in einer festen Größe bauen ( z.b. RelativeLayout), das Image als Background,
darin die Buttons als transparentes ImageView und diese mit den Koordinaten festsetzen.

Zum Verschieben : Google mal nach floating View

— geändert am 24.01.2017, 20:54:20

Liebe Grüße - Stefan
[ App - Entwicklung ]

Danie

Antworten
  • Forum-Beiträge: 42

24.01.2017, 23:17:06 via Website

Das mit dem floating View hab ich mal hinten angestellt.

Mit einer "normalen" activity bekomme ich es hin und es läuft bereits.
Allerdings habe ich Probleme, nur das OSD Board darzustellen.

Aktuell wird eine neue Activity erstellt, wo unten das Bild mit den Buttons angezeigt wird und der Rest der "Seite" ist leer.
Ich komm nicht drauf, wie ich das Layout aufrufen muss, dass es nur als kleines Fenster unten auftaucht.

Mein Layout:

<?xml version="1.0" encoding="utf-8"?>

android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/osdImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="33dp"
    android:src="@drawable/st2_osd" />

<Button
    android:id="@+id/MenuButton"
    style="@null"
    android:text="@null"
    android:background="@android:color/transparent"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignBottom="@+id/osdImage"
    android:layout_alignLeft="@+id/osdImage"
    android:layout_marginBottom="25dp"
    android:layout_marginLeft="59dp" />


<Button
    android:id="@+id/DownButton"
    style="@null"
    android:text="@null"
    android:background="@android:color/transparent"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignBottom="@+id/osdImage"
    android:layout_alignLeft="@+id/osdImage"
    android:layout_marginBottom="25dp"
    android:layout_marginLeft="131dp" />

<Button
    android:id="@+id/MinusButton"
    style="@null"
    android:text="@null"
    android:background="@android:color/transparent"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignBottom="@+id/osdImage"
    android:layout_alignLeft="@+id/osdImage"
    android:layout_marginBottom="25dp"
    android:layout_marginLeft="203dp" />

<Button
    android:id="@+id/PlusButton"
    style="@null"
    android:text="@null"
    android:background="@android:color/transparent"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignBottom="@+id/osdImage"
    android:layout_alignLeft="@+id/osdImage"
    android:layout_marginBottom="25dp"
    android:layout_marginLeft="275dp" />

<Button
    android:id="@+id/PowerButton"
    style="@null"
    android:text="@null"
    android:background="@android:color/transparent"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignBottom="@+id/osdImage"
    android:layout_alignLeft="@+id/osdImage"
    android:layout_marginBottom="25dp"
    android:layout_marginLeft="421dp" />

Und das rufe ich im Moment aus einer SettingsPreferences auf:

@Override
    public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {

        if (key.equals("KEY_OSD_ENABLE")) {
            Toast.makeText(this, "OSD Activity starten", Toast.LENGTH_LONG).show();     
            Intent i = new Intent(getApplicationContext(), OSD_Keyboard.class)
                            startActivity(i);
                            }
        }

Im Manifest hab ich die Activity auch declariert.
Ich blick nur nicht, wie ich nur den für mich interessanten Teil, also das ImageView und die Button anzeigen kann?

Habe es mit ImageView und WindowManger versucht. Das geht zwar, aber ich kann dann die Button nicht einbinden?
Ich komm echt nicht drauf... :/

Gruß Danie

— geändert am 24.01.2017, 23:20:28

Antworten
  • Forum-Beiträge: 2.902

25.01.2017, 00:01:07 via Website

Du solltest auch das machen , was ich oben erklärt habe :-)

Dann kannst du dir ein View in einer festen Größe bauen ( z.b. RelativeLayout) (fehlt) , das Image als Background,
darin die Buttons als transparentes ImageView (fehlt) und diese mit den Koordinaten festsetzen.
.

Ergo :

Dein RelativeLayout-Container für dein Image ist in deiner XML NICHT vorhanden
und DARIN deklarierst du die ImageViews , keine Buttons !

Ich frage mich eben , warum du was ganz Anderes umsetzt - Hast du das nicht verstanden ,
was ich geschrieben habe ?

— geändert am 25.01.2017, 07:26:10

Liebe Grüße - Stefan
[ App - Entwicklung ]

Danie

Antworten
  • Forum-Beiträge: 42

25.01.2017, 17:10:35 via Website

Ich komm wirklich nicht ganz mit.

Ich soll einen ImageView anlegen und innerhalb dieser Deklaration das Relative-Layout machen? Also quasi verschachteln?
GUI war leider noch nie mein Spezialgebiet. Mit einer einfachen Activity hab ich bisher immer recht einfache Sachen bauen können. - Bei weitem keine Kunstwerke!

Die Activity macht schon das, was sie soll, aber hätte es wie gesagt gerne als kleines Fenster unten am Rand.

Ich google nochmal ein bisschen. Aber leider habe ich nicht die passenden Suchbegriffe parat :(

Gruß Danie

Antworten
  • Forum-Beiträge: 2.902

25.01.2017, 17:15:53 via Website

Ich komm wirklich nicht ganz mit.
Ich soll einen ImageView anlegen und innerhalb dieser Deklaration das Relative-Layout machen? Also quasi verschachteln?
GUI war leider noch nie mein Spezialgebiet. Mit einer einfachen Activity hab ich bisher immer recht einfache Sachen bauen können. - Bei weitem keine Kunstwerke!

Neee, habe ich nicht geschrieben :-)

a) Bau dir dein Layout zur Activity (haste ja schon)
b) darin ziehst du ein zusätzliches RelativeLayout rein und gibst als Hintergrund dein Image an.
c) dann setzt du das auf eine feste Breite und höhe - relativ zu deinem Image in Pixeln
d) DAREIN ziehst du dann 3 mal einen Imagebutton und machst den Hintergrund transparent
e) Diese Buttons setzt du dann in X und Y und grösse genau über die Knöppe deiner darunterliegenden Grafik
f) auf die ImageButtons setzt du dann deine ClickListener

— geändert am 25.01.2017, 17:18:17

Liebe Grüße - Stefan
[ App - Entwicklung ]

Danie

Antworten
  • Forum-Beiträge: 42

25.01.2017, 17:24:58 via Website

Edit:

<?xml version="1.0" encoding="utf-8"?>

android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="518dp"
    android:layout_height="113dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="30dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/st2_osd"
    android:gravity="bottom|center_horizontal" >

    <ImageButton
        android:id="@+id/MenuButton"
        style="@null"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="25dp"
        android:layout_marginRight="360dp"
        android:adjustViewBounds="false"
        android:background="@null"
        android:focusable="false"
        android:src="@null" />

    <ImageButton
        android:id="@+id/DownButton"
        style="@null"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/MenuButton"
        android:layout_alignTop="@+id/MenuButton"
        android:layout_marginLeft="72dp"
        android:adjustViewBounds="false"
        android:background="@null"
        android:focusable="false"
        android:src="@null" />

    <ImageButton
        android:id="@+id/MinusButton"
        style="@null"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/DownButton"
        android:layout_alignTop="@+id/DownButton"
        android:layout_marginLeft="72dp"
        android:adjustViewBounds="false"
        android:background="@null"
        android:focusable="false"
        android:src="@null" />

    <ImageButton
        android:id="@+id/PlusButton"
        style="@null"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/MinusButton"
        android:layout_alignTop="@+id/MinusButton"
        android:layout_marginLeft="72dp"
        android:adjustViewBounds="false"
        android:background="@null"
        android:focusable="false"
        android:src="@null" />

    <ImageButton
        android:id="@+id/PowerButton"
        style="@null"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@+id/PlusButton"
        android:layout_alignTop="@+id/PlusButton"
        android:layout_marginLeft="148dp"
        android:adjustViewBounds="false"
        android:background="@null"
        android:focusable="false"
        android:src="@null" />

</RelativeLayout>

Stimmt das jetzt so? (angel)

Noch eine Frage:
Ich hab eine MainActivity, von der ich meine SettingsActivity starte. Im Moment, wenn ich das View, also das OSD-Keyboard anzeigen will, werden die SettingsPreferences angezeigt.
Wenn ich die Activity jetzt über OnPreferencesChanged() und key starte, wird doch wieder eine neue, "weiße/leere" Seite mit dem Namen der Activity "geöffnet"?
Wie starte ich den View, ohne das ich die SettingsPreferences überschreibe?

Des bekomme ich nicht in meinen Kopf rein.

— geändert am 25.01.2017, 18:33:41

Antworten

Empfohlene Artikel