Einfache Android App (Art Iframe)

Davidk87 · 2013-06-21T14:40:00+0200

Hallo zusammen,

bin absoluter Neuling was Android angeht und wollte euch mal um Rat fragen.

Ich brauche eine App, die ich auf meinem Tablet installieren kann und die nur eine Funktion hat, nämlich eine Webseite von meinem Server zu laden.

Die Webseite ist größentechnisch für das Tablet optimiert. Allerdings möchte ich nicht immer einen Browser aufrufen müssen.

Meine Frage wie kann ich schnell so eine App umsetzen? Quasie eine "IframeApp"

Danke für eure Hilfe

dthiess · 2013-06-21T14:41:57+0200

Was du suchst ist ein WebView:

WebView | Android Developers

http://developer.android.com/guide/webapps/webview.html

Davidk87 · 2013-06-21T14:51:27+0200

Hallo dthiess,

genau das hab ich gesucht

Werd mir gleich mal angucken wie ich damit eine App umsetzten kann.
Muss sowieso erst einmal schauen, wie man Android Apps bastelt.

Vielen Dank

blackfire185 · 2013-06-21T17:19:03+0200

Ich wwrde mich nachher mal ransetzen und einen entsprechenden snippet schreiben, vielleicht brquchen noch andere Hilfe, wie man sowas macht.

Gesendet von meinem LG-P880 mit der Android-Hilfe.de App

Davidk87 · 2013-06-22T01:19:25+0200

Hallo blackfire185,

das ist eine super Idee! Ich hab jetzt die ganze Zeit nach Tutorials gesucht, leider sind die immer nur für Android 2 oder 3 Versionen. Und der Quellcode in den Manifest Dateien / Eclipse sind ganz anders. Dachte ok änder ich einfach alles so um, aber dann lässt sich nichts starten.

Vielleicht kannst du ein Tutorial mit Android 4 machen. Das wäre echt klasse !

Viele Grüße
David

dthiess · 2013-06-22T03:40:16+0200

Hier mal eine kleine Beispielapp, läuft von Android 1.6-4.2 (evtl auch frühere Versionen)

Manifest

Code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="de.waechter_mobil.app"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="4"
        android:targetSdkVersion="17" />
    
     <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="de.waechter_mobil.app.Waechter_Mobil"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Activity

Code:

package de.waechter_mobil.app;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class Waechter_Mobil extends Activity {

	private WebView webView;
	public static final String URL = "http://google.de/";
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_waechter__mobil);
		
		webView = (WebView) findViewById(R.id.webView);
		webView.getSettings().setBuiltInZoomControls(true);
		webView.getSettings().setJavaScriptEnabled(true);

		webView.loadUrl(URL);
	}
	
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
			webView.goBack();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	} 

}

Layout

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"
    tools:context=".Waechter_Mobil" >

    <WebView 
        android:id="@+id/webView"
        android:layout_width="match_parent" 
        android:layout_height="match_parent" />

</RelativeLayout>

Davidk87 · 2013-06-22T14:22:07+0200

Hallo dthiess,

coole Sache schon mal Vielen Dank dafür.

Aber wie genau kann ich diesen Code jetzt verwenden?

1. In Eclipse lege ich ja eine neue AndroidApp an also ein neues Projekt.
was genau muss ich dann dort eintragen?

2. Bei Package "de.waechter_mobil.app" oder?

3. Bei Activity "Blank Activity" auswählen oder Fullscreen Activity oder Master/Detail Flow?

4. Bei Activity Name "Waechter_Mobil" oder?

5. Bei Layout Name "activity_waechter__mobil"

6. Bei Navigation Type "None"

7. und danach deinen Code "Manifest" in die Datei AndroidManifest.xml kopieren?

8. Danach deinen Code "Layout" in die Datei res/layout/Waechter_Mobil.xml kopieren?

9. Und zum Schluss deinem "Activity Code in die Datei src/de.waechter_mobil.app.xml oder?

Hmmm könnte funktionieren

Der ursprüngliche Beitrag von 14:07 Uhr wurde um 14:22 Uhr ergänzt:

Sooo habs gerade mal probiert und die Console Eclipse zeigt zwar einen Fehler und meint built abort, aber dennoch ruft dieses TestDingens

google auf.

aaaaber im Browser? Hab ich was falsches gemacht? Die App ruft jetzt den Androidbrowser auf und zeigt oben Tabs und die URL und joa den Browser halt

Wie kriegt ich das hin, das die App NUR die Seite in Vollbild anzeigt ohne irgendwelche Browserfunktionen?

Danke für deine / eure Geduld :tongue:

blackfire185 · 2013-06-22T18:02:24+0200

die App ruft sicherlich den Android Browser auf, wenn du irgendwo draufdrückst oder?
Ich setzt mich jetzt mal hin und mach ein kleines Tutorial.

Davidk87 · 2013-06-22T18:41:01+0200

Hallo blackfire185,

also wenn ich diese Android-Testconsole bei Eclipse starte,
dann ruft er die App auf und startet aber sofort den Browser.

Also App geht auf, dann in den Hintergrund und der Browser geht auf, mit den Tabs oben und der Adressleiste ohne das ich irgendwas drücke.

Mein Ziel ist es, den Browser in der App zu haben. Also ohne das man die URL sieht und manuell ändern kann.

Danke das du dir die Mühe machst und ein Tutorial bastelst. Bin echt gespannt drauf !

blackfire185 · 2013-06-22T19:42:28+0200

Hab jetzt eins gemacht, ich muss es noch auf der Website designtechnisch anpassen, aber es behandelt schon mal das grundlegenste:
Android Programmierung Tutorials

Davidk87 · 2013-06-23T01:37:45+0200

Hey blackfire185,

erstmal danke für die Mühe die du dir da gemacht hast schaut super aus.

Leider klappts aber nicht

Also es hakt bei mir schon bei dem Punkt, wo ich bei Composite "WebView"
auswähle und dann der ganze Bildschirm gefüllt sein soll. an allen 4 Seiten sind mindestens 5-8 Pixel weiß. Hab alle Knöpfe in Eclipse durchprobiert und auch margin und padding manuell auf 0 gesetzt aber ich komme nicht dahinter wie du es gemacht hast (wie auf dem Screenshot). Sobald ich die Ecken langziehe, zieht sich das graue Feld wieder zurück auf die Ursprungsgröße!

Dann weiter

Habe alles so eingefügt wie du .. also glaub ich zumindest ^^

Hier der Inhalt der Activity Java Datei:

Code:

package de.test.app;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_web_view);
		
		WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
	

		//aktiviert JavaScript
		anzeigeflaeche.getSettings().setJavaScriptEnabled(true);	

		//Lade die Startseite
		anzeigeflaeche.loadUrl("http://droidenschmiede.bplaced.net");
	
		anzeigeflaeche.setWebViewClient(new WebViewClient());

	}
	
	private class MyWebViewClient extends WebViewClient {
	
	
		//sorgt dafür, dass sich nicht der normale Browser öffnet, wenn man auf einen Link klickt
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
			anzeigeflaeche.loadUrl(Uri.parse(url).getHost());
			return true;
       
		}
		
		//sorg dafür, dass man auf die vorherige Seite kommt, wenn die Zurücktaste gedrückt wird
		@Override
		public boolean onKeyDown(int keyCode, KeyEvent event) {
		    // Check if the key event was the Back button and if there's history
			WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
		    if ((keyCode == KeyEvent.KEYCODE_BACK) && anzeigeflaeche.canGoBack()) {
		    	anzeigeflaeche.goBack();
		        return true;
		    }
		    // If it wasn't the Back key or there's no web page history, bubble up to the default
		    // system behavior (probably exit the activity)
		    return super.onKeyDown(keyCode, event);
		}
		
	}

}

Die Manifest.xml hat die "Internet Permission" dennoch bekomme ich, bei Teststart der App,
den Fehler "Your project contains error(s), please fix them before running your applications".

Und jetzt such ich mir nen Wolf haha

Kannst du mir die Projektdateien mal schicken?
Dann kann ich sie vergleichen und nach dem Fehler suchen.

Danke Dir

Der ursprüngliche Beitrag von 00:38 Uhr wurde um 01:37 Uhr ergänzt:

Ok den größten Fehler hab ich gefunden und die App läuft jetzt

hier nochmal der korrigierte Code:

Code:

package de.test.app;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.layout_web_view);
		
		WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
	

		//aktiviert JavaScript
		anzeigeflaeche.getSettings().setJavaScriptEnabled(true);	

		//Lade die Startseite
		anzeigeflaeche.loadUrl("http://droidenschmiede.bplaced.net");
	
		anzeigeflaeche.setWebViewClient(new WebViewClient());

	}
	
	private class MyWebViewClient extends WebViewClient {
	
	
		//sorgt dafür, dass sich nicht der normale Browser öffnet, wenn man auf einen Link klickt
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
			anzeigeflaeche.loadUrl(Uri.parse(url).getHost());
			return true;
       
		}
		
	}

       //sorg dafür, dass man auf die vorherige Seite kommt, wenn die Zurücktaste gedrückt wird
		@Override
		public boolean onKeyDown(int keyCode, KeyEvent event) {
		    // Check if the key event was the Back button and if there's history
			WebView anzeigeflaeche = (WebView)findViewById(R.id.webView1);
		    if ((keyCode == KeyEvent.KEYCODE_BACK) && anzeigeflaeche.canGoBack()) {
		    	anzeigeflaeche.goBack();
		        return true;
		    }
		    // If it wasn't the Back key or there's no web page history, bubble up to the default
		    // system behavior (probably exit the activity)
		    return super.onKeyDown(keyCode, event);
		}



}

Aber jetzt habe ich immer noch das Problem das die Maße meiner Webseite nicht mehr passen.
Auf meinem Tablet hab ich jetzt links mindestens 30 pixel luft, oben 10pixel unten passt und rechts ist die
geladene Webseite einfach abgeschnitten und auch ca. 30 Pixel luft also weiß.

Wie krieg ich diese Margin oder Paddingeinstellung korrigiert?

Danke euch

dthiess · 2013-06-23T01:39:14+0200

Poste doch mal den Inhalt deiner layout xml Datei

Davidk87 · 2013-06-23T01:41:53+0200

Alles klar hier ist der Inhalt der Layout-Datei:

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=".WebViewActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Denke es hat was mit den width und height bzw. padding Werten zu tun, da ich aber noch keine Ahnung von der Android Materie habe, weiß ich nicht ob man da einfach normale Werte wie 0px eintragen kann

dthiess · 2013-06-23T01:44:08+0200

Dein RelativeLayout hat anscheinend ein padding. Entferne mal diese Zeilen:

Code:

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

edit: ja du könnest da auch 0dp eintragen

Davidk87 · 2013-06-23T02:15:58+0200

perfeeeeekt

Danke dthiess ! Jetzt läufts

Auch nochmal ein dickes Danke an blackfire185 für dein Tutorial, denke da werden sich viele Neulinge freuen

Ich werde dann mal weiter testen aber das Wichtigste haut schonmal hin cooole Sache

Der ursprüngliche Beitrag von 01:51 Uhr wurde um 02:12 Uhr ergänzt:

Ich hätte da jetzt doch noch eine kleine Frage

Wie deaktiviere ich scrollen? Man kann aktuell die Webseite in der App hoch und runter scrollen. Das möchte ich deaktivieren.

Allerdings habe ich einige DivBoxen im HTML, die Overflow arbeiten, daher müssen da natürlich Scrollbalken auftauchen.

Also letztendlich soll nur der Bodybereich nicht scrollbar sein. Geht das irgendwie? Weiß das jemand?

dthiess vielleicht? :razz:

Der ursprüngliche Beitrag von 02:12 Uhr wurde um 02:15 Uhr ergänzt:

Code:

android:scrollbars="none"

in der Layoutdatei blendet zwar die Scrollbalken aus aber deren Funktion bleibt bestehen

dthiess · 2013-06-23T02:44:47+0200

Weiß nicht genau was du erreichen willst. Soll der Content abgeschnitten werden?

Sonst probier mal

Code:

anzeigeflaeche.getSettings().setLoadWithOverviewMode(true);
anzeigeflaeche.getSettings().setUseWideViewPort(true);

Damit sollte die Seite auf Displaygröße passen, wenn der Content zu lang ist hast du aber trotzdem Scrollbars.

Scrollen könntest du mit einem onTouchListener unterbinden, würde allerdings auch deine scrollbaren Container betreffen

Davidk87 · 2013-06-23T03:08:14+0200

Ich hab unterhalb des letzten Contents noch ca. 80px weiß.
Und man kann trotzdem runterscrollen. Hatte jetzt schon versucht im HTML
den Body unscrollbar zu machen hat aber keine Wirkung auf die App (komischerweise).

Und letztendlich kann die App ruhig den unteren teil wegschneiden da dort eh nichts mehr ist, was von Bedeutung wäre

Ich probier mal eben deine Idee

Code:

anzeigeflaeche.getSettings().setLoadWithOverviewMode(true);
anzeigeflaeche.getSettings().setUseWideViewPort(true);

vllt reicht das schon aus.

Danke dir !

Der ursprüngliche Beitrag von 02:50 Uhr wurde um 02:53 Uhr ergänzt:

leider keine Veränderung mit den 2 Einträgen. App scrollt immer noch.
Eigentlich müsste doch, wenn ich die Webseitengröße genau anpasse, das scrollen auch weg sein oder? Oh man ich glaub ich war da einfach zu dumm

Muss das mal fix testen ^^

Der ursprüngliche Beitrag von 02:53 Uhr wurde um 03:08 Uhr ergänzt:

Und der Oscar geht an die Müdigkeit

Das war es Tatsache ^^ Hatte einen Div zu groß gemacht, allerdings
war dieser noch versteckt. Dadurch war der Content scrollbar.

Jetzt ist alles schön "fest"

Danke und eine gute Nacht !

Quick results: Click search for more Results…

Einfache Android App (Art Iframe)

Davidk87

Neues Mitglied

dthiess

Ambitioniertes Mitglied

Davidk87

Neues Mitglied

blackfire185

Stamm-User

Davidk87

Neues Mitglied

dthiess

Ambitioniertes Mitglied

Davidk87

Neues Mitglied

blackfire185

Stamm-User

Davidk87

Neues Mitglied

blackfire185

Stamm-User

Davidk87

Neues Mitglied

dthiess

Ambitioniertes Mitglied

Davidk87

Neues Mitglied

dthiess

Ambitioniertes Mitglied

Davidk87

Neues Mitglied

dthiess

Ambitioniertes Mitglied

Davidk87

Neues Mitglied

Ähnliche Themen