Difference between revisions of "Build App with Android-Studio"

From Digipool-Wiki
Jump to: navigation, search
(Created page with "https://www.youtube.com/watch?v=Z0o3VodAiWU Im Manifest oben gleich hinter der Pagacke=... Zeile: <uses-permission android:name="android.permission.INTERNET"></uses-perm...")
 
(App-Icon)
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
https://www.youtube.com/watch?v=Z0o3VodAiWU
+
[[File:AndroidStudio.png|400px|right]]
  
 +
Die Entwicklungsumgebung von Android hat ein WebView Element, mit Internetseiten in einer App dargestellt werden können. Über diesen Umweg kann man aus einer WebPage eine App bauen. Das ganze ist etwas aufwendiger und komplizierter aber mit p5.js erstelle WebApps laufen damit sehr gut. Diesen Anleitung kann dabei helfen, aber man muss zunächst das Android SDK (Software Development Kit) installieren und dann einige Code Zeilen eingeben (rein kopieren). Dabei kann es immer wieder zu Veränderungen kommen, da sich das Android-Studio permanent weiterentwickelt.
  
 +
'''Hier eine der zahlreichen Anleitungen auf [https://www.youtube.com/watch?v=Z0o3VodAiWU YouTube]'''
  
 +
<br>
  
 +
== Android-Studio ==
  
Im Manifest oben gleich hinter der Pagacke=... Zeile:
+
Downloaden und installieren - [https://developer.android.com/studio Android-Studio]
  
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
+
<br>
  
...und hinter <Application
+
== Manifest ==
  
android:supportsRtl="true"
+
Im Manifest oben gleich hinter der Pagacke=... Zeile:
  
 +
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
  
 +
...und hinter <Application
  
 +
android:supportsRtl="true"
  
 +
<br>
 +
 +
== MainActivity ==
  
 
MainActivity.java
 
MainActivity.java
  
package com.example.t2much;
+
<pre>
 +
package com.example.myName;
  
 
import android.graphics.Bitmap;
 
import android.graphics.Bitmap;
Line 28: Line 39:
 
import android.webkit.WebViewClient;
 
import android.webkit.WebViewClient;
  
<pre>
 
 
public class MainActivity extends AppCompatActivity {
 
public class MainActivity extends AppCompatActivity {
 
     private WebView mywebview;
 
     private WebView mywebview;
Line 36: Line 46:
 
         super.onCreate(savedInstanceState);
 
         super.onCreate(savedInstanceState);
 
         setContentView(R.layout.activity_main);
 
         setContentView(R.layout.activity_main);
         mywebview = (WebView) findViewById(R.id.myPage);
+
         mywebview = (WebView) findViewById(R.id.'''myPage''');
 
         WebSettings webSettings=mywebview.getSettings();
 
         WebSettings webSettings=mywebview.getSettings();
         mywebview.loadUrl("http://projects.olafval.de/touch2much/");
+
         '''mywebview.loadUrl("http://projects.olafval.de/touch2much/");'''
 
         webSettings.setJavaScriptEnabled(true);
 
         webSettings.setJavaScriptEnabled(true);
 
     }
 
     }
Line 66: Line 76:
 
</pre>
 
</pre>
  
 +
<br>
  
 +
== NoActionBar ==
  
 +
In der Datei '''Styles.xml''' die erste Zeile abändern auf '''No'''ActionBar
  
 +
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 +
 +
<br>
 +
 +
 +
== Farbe der Taskleiste ==
 +
 +
In der Datei '''color.xml''' die drei Farbwerte auf den gewünschten Wert ändern
 +
 +
<br>
 +
 +
 +
== Splash Screen ==
 +
 +
Um den den Startbildschirm (Splash Screen) zu gestalten, der erscheint solange die App geladen wird, muss im '''Manifest''' Folder mit dem rechten Mausklick eine neue '''Activity / Empty Activity''' hinzugefügt werden mit dem Titel "'''splashactivity'''" hinzugefügt werden.
 +
 +
Die Bilddatei '''mylogo.png''' für das Logo als PNG mit 200 x 200 Pixel in den '''drawable''' Ordner legen. (Der Dateinahme des Bildes darf nur klein geschrieben werden)
 +
 +
Dabei entstehen zwei Dateien: Java und xml
 +
 +
'''activity_splashactivity.xml'''
 +
<pre>
 +
<?xml version="1.0" encoding="utf-8"?>
 +
<RelativeLayout
 +
    xmlns:android="http://schemas.android.com/apk/res/android"
 +
    xmlns:app="http://schemas.android.com/apk/res-auto"
 +
    xmlns:tools="http://schemas.android.com/tools"
 +
    android:layout_width="match_parent"
 +
    android:layout_height="match_parent"
 +
    android:background="#000000"
 +
    tools:context=".splashactivity">
 +
 +
    <ImageView
 +
        android:layout_width="200dp"
 +
        android:layout_height="200dp"
 +
        android:src="@drawable/mylogo"
 +
        android:layout_centerHorizontal="true"
 +
        android:layout_centerVertical="true"
 +
        android:id="@+id/mylogo"
 +
    />
 +
 +
</RelativeLayout>
 +
</pre>
 +
 +
<br>
 +
 +
'''splashactivity.java'''
 +
 +
<pre>
 +
package com.example.t2much;
 +
 +
import android.content.Intent;
 +
import android.os.Handler;
 +
import android.support.v7.app.AppCompatActivity;
 +
import android.os.Bundle;
 +
 +
public class splashactivity extends AppCompatActivity {
 +
    private static int Splash_time = 4000;
 +
 +
    @Override
 +
    protected void onCreate(Bundle savedInstanceState) {
 +
        super.onCreate(savedInstanceState);
 +
        setContentView(R.layout.activity_splashactivity);
 +
 +
        new Handler().postDelayed(new Runnable() {
 +
            @Override
 +
            public void run() {
 +
                Intent intent = new Intent (splashactivity.this,MainActivity.class);
 +
                startActivity(intent);
 +
            }
 +
        }, Splash_time);
 +
    }
 +
}
 +
 +
</pre>
 +
 +
== WWW Dateien einbinden ==
  
WWW Dateien einbinden
 
 
Diese Zeile
 
Diese Zeile
mywebview.loadUrl("http://projects.olafval.de/touch2much/");
+
 
 +
mywebview.loadUrl("http://projects.olafval.de/touch2much/");
  
 
ersetzen durch
 
ersetzen durch
  
mywebview.loadUrl("file:///android_assest/*");
+
mywebview.loadUrl("file:///android_assest/*");
 +
 
 +
<br>
 +
 
 +
== App-Icon ==
 +
 
 +
# 512 x 512 PNG Datei (72 dpi)
 +
# Auf den App Folder mit der rechten Mous klicken, dann NEW / IMAGE SASSET
 +
 
 +
 
 +
<br>

Latest revision as of 20:23, 13 September 2019

AndroidStudio.png

Die Entwicklungsumgebung von Android hat ein WebView Element, mit Internetseiten in einer App dargestellt werden können. Über diesen Umweg kann man aus einer WebPage eine App bauen. Das ganze ist etwas aufwendiger und komplizierter aber mit p5.js erstelle WebApps laufen damit sehr gut. Diesen Anleitung kann dabei helfen, aber man muss zunächst das Android SDK (Software Development Kit) installieren und dann einige Code Zeilen eingeben (rein kopieren). Dabei kann es immer wieder zu Veränderungen kommen, da sich das Android-Studio permanent weiterentwickelt.

Hier eine der zahlreichen Anleitungen auf YouTube


Android-Studio

Downloaden und installieren - Android-Studio


Manifest

Im Manifest oben gleich hinter der Pagacke=... Zeile:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

...und hinter <Application

android:supportsRtl="true"


MainActivity

MainActivity.java

package com.example.myName;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView mywebview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mywebview = (WebView) findViewById(R.id.'''myPage''');
        WebSettings webSettings=mywebview.getSettings();
        '''mywebview.loadUrl("http://projects.olafval.de/touch2much/");'''
        webSettings.setJavaScriptEnabled(true);
    }

    public class myWebClient extends WebViewClient{
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon){
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url){
            view.loadUrl(url);
            return true;
        }
    }

    @Override
    public void onBackPressed(){
        if(mywebview.canGoBack()){
            mywebview.goBack();
        }else{
            super.onBackPressed();
        }
    }
}


NoActionBar

In der Datei Styles.xml die erste Zeile abändern auf NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">



Farbe der Taskleiste

In der Datei color.xml die drei Farbwerte auf den gewünschten Wert ändern



Splash Screen

Um den den Startbildschirm (Splash Screen) zu gestalten, der erscheint solange die App geladen wird, muss im Manifest Folder mit dem rechten Mausklick eine neue Activity / Empty Activity hinzugefügt werden mit dem Titel "splashactivity" hinzugefügt werden.

Die Bilddatei mylogo.png für das Logo als PNG mit 200 x 200 Pixel in den drawable Ordner legen. (Der Dateinahme des Bildes darf nur klein geschrieben werden)

Dabei entstehen zwei Dateien: Java und xml

activity_splashactivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".splashactivity">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/mylogo"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:id="@+id/mylogo"
    />

</RelativeLayout>


splashactivity.java

package com.example.t2much;

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class splashactivity extends AppCompatActivity {
    private static int Splash_time = 4000;

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

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent (splashactivity.this,MainActivity.class);
                startActivity(intent);
            }
        }, Splash_time);
    }
}

WWW Dateien einbinden

Diese Zeile

mywebview.loadUrl("http://projects.olafval.de/touch2much/");

ersetzen durch

mywebview.loadUrl("file:///android_assest/*");


App-Icon

  1. 512 x 512 PNG Datei (72 dpi)
  2. Auf den App Folder mit der rechten Mous klicken, dann NEW / IMAGE SASSET