Skip to content

Commit ee2619f

Browse files
m1gam1ga
committed
add links to blog (better UI, bug fixes)
1 parent adca0b6 commit ee2619f

15 files changed

+18
-3038
lines changed

Diff for: ‎android_adaptive_icons.md

+1-128
Original file line numberDiff line numberDiff line change
@@ -2,131 +2,4 @@
22

33
<span class="badge-buymeacoffee"><a href="https://www.buymeacoffee.com/miga" title="donate"><img src="https://img.shields.io/badge/buy%20me%20a%20coke-donate-orange.svg" alt="Buy Me A Coke donate button" /></a></span> <a href="https://github.com/sponsors/m1ga"><img src="./images/gh_sponsor.png" title="Sponsor me"/></a>
44

5-
## Android Adaptive Icons
6-
7-
![Android Adaptive Icons](images/icon_header.jpg)
8-
9-
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
10-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
11-
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
12-
13-
- [From zero to app](#from-zero-to-app)
14-
- [Android Adaptive Icons](#android-adaptive-icons)
15-
- [Setup](#setup)
16-
- [Create the icon](#create-the-icon)
17-
- [Titanium app](#titanium-app)
18-
19-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
20-
21-
Starting with Android 8 (API 26) Google introduced the concept of `Adaptive Icons` which can display a variety of shapes across different device models. The main icon (foreground) is separated from the background (image, color, xml) and a mask is applied on top of the image.
22-
If you create a new app and add an Android icon it will look like this with the default setup:
23-
24-
<img src="images/icon_app.png"/><br/>
25-
the blue background is not filling up the whole space and the icon is a bit small. In this tutorial we will create an Adaptive Icon that will blend in with your other apps.
26-
27-
### Setup
28-
29-
The best and easiest way to do this is to use Android Studio. If you don't have it installed you can go to https://developer.android.com/studio and download it for free.
30-
31-
If your icon has just a plain color in the background you can create a transparent version of the foreground element and save that.
32-
33-
<img src="images/icon_transparent.jpg"/><br/>
34-
35-
If your background is a gradient or contains multiple colors you save that as a different file.
36-
37-
### Create the icon
38-
39-
1. Open up Android Studio and create a new project:
40-
41-
<img src="images/icon_studio1.png"/><br/>
42-
43-
Select an empty activity and just click next to create the project. We will just use the Asset Studio for the icon - the rest of project is not needed.
44-
45-
2. Right click on `app` and select `New - Image Asset`:
46-
47-
<img src="images/icon_studio2.png"/><br/>
48-
49-
3. Now you will see the Asset Studio with the default icon/setup:
50-
51-
<img src="images/icon_studio3.png"/><br/>
52-
53-
4. Rename the icon name to `appicon` (can be anything) and in the source asset select `Asset Type: Image` and select your icon in the `Path` field:
54-
55-
<img src="images/icon_studio4.png"/><br/>
56-
57-
With the `Scaling - Resize` slider you can adjust the size of the foreground element.
58-
59-
5. Now we will switch to the `Background Layer` tab and either set the plain color or load the background image:
60-
61-
<img src="images/icon_studio5.png"/><br/>
62-
63-
That's all! You can click next.
64-
65-
6. In the last screen you will see all the files in the `res` folder that you will need to copy over to your Titanium project:
66-
67-
<img src="images/icon_studio6.png"/><br/>
68-
69-
### Titanium app
70-
71-
To use the Adaptive Icon in your Titanium app you have to add this to your tiapp.xml file:
72-
73-
```xml
74-
<android xmlns:android="http://schemas.android.com/apk/res/android">
75-
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1">
76-
77-
<application android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" />
78-
79-
</manifest>
80-
</android>
81-
```
82-
83-
where `appicon` is the name you have put into the `name` box in step 4.
84-
85-
Now we can copy over all the files:
86-
87-
<table>
88-
<tr>
89-
<th>Android Studio:<br/>[project-name]/app/src/main/res/</th>
90-
<th>Appcelerator Titanium:<br/>[app-name]/platform/android/res</th>
91-
</tr>
92-
93-
<tr>
94-
<td>/mipmap-anydpi-v26/appicon_round.xml</td>
95-
<td>/mipmap-anydpi-v26/appicon_round.xml</td>
96-
</tr>
97-
98-
<tr>
99-
<td>/mipmap-anydpi-v26/appicon.xml</td>
100-
<td>/mipmap-anydpi-v26/appicon.xml</td>
101-
</tr>
102-
103-
<tr>
104-
<td>/mipmap-hdpi/appicon_foreground.png</td>
105-
<td>/mipmap-hdpi/appicon_foreground.png</td>
106-
</tr>
107-
108-
<tr>
109-
<td>/mipmap-hdpi/appicon_round.png</td>
110-
<td>/mipmap-hdpi/appicon_round.png</td>
111-
</tr>
112-
113-
<tr>
114-
<td>/mipmap-hdpi/appicon.png</td>
115-
<td>/mipmap-hdpi/appicon.png</td>
116-
</tr>
117-
118-
<tr>
119-
<td><i>same for all the other mipmap-* folders</i></td>
120-
<td><i>same for all the other mipmap-* folders</i></td>
121-
</tr>
122-
123-
<tr>
124-
<td>/values/appicon_background.xml</td>
125-
<td>/values/appicon_background.xml</td>
126-
</tr>
127-
128-
</table>
129-
130-
When you compile your app it will show the correct icon now:
131-
132-
<img src="images/icon_app_new.png"/><br/>
5+
visit https://fromzerotoapp.com/android-adaptive-icons/

Diff for: ‎android_modules_local_aar.md

+2-123
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,5 @@
11
# [From zero to app](https://fromzerotoapp.com)
22

3-
<span class="badge-buymeacoffee"><a href="https://www.buymeacoffee.com/miga" title="donate"><img src="https://img.shields.io/badge/buy%20me%20a%20coke-donate-orange.svg" alt="Buy Me A Coke donate button" /></a></span>
3+
<span class="badge-buymeacoffee"><a href="https://www.buymeacoffee.com/miga" title="donate"><img src="https://img.shields.io/badge/buy%20me%20a%20coke-donate-orange.svg" alt="Buy Me A Coke donate button" /></a></span> <a href="https://github.com/sponsors/m1ga"><img src="./images/gh_sponsor.png" title="Sponsor me"/></a>
44

5-
## Android Modules: using local aar files
6-
7-
Since Titanium SDK 9.0.0 the gradle build system is used to create the Android apps and modules.
8-
This brings a lot of advantages makes it quicker and easier to build apps and modules (e.g. dependencies are handled automatically). You can use the `build.gradle` file to include external libraries into your modules or app.
9-
10-
In <a href="https://github.com/m1ga/ti.animation">Ti.Animation</a> we use:
11-
12-
```
13-
repositories {
14-
google()
15-
jcenter()
16-
}
17-
18-
dependencies {
19-
implementation 'com.airbnb.android:lottie:3.4.0'
20-
}
21-
```
22-
to add the external library and with Android Studio you can even use full auto-completion when you write a Titanium module now!
23-
24-
25-
### Local libraries
26-
27-
While this works great for external libs that are available at maven, google or another repository it doesn't work for local AARs (they are not build into the module, so not available in the app later on).
28-
29-
You still can use them but you have to add some extra work. Here are three different ways:
30-
31-
#### 1. Only a JAR in the AAR
32-
33-
An AAR file is just a compressed packaged including different files. If your AAR does not contain any "res" files or AndrodManifest.xml settings file you can just unzip the AAR and use the "classes.jar" instead. JARs will be merged into your module. Place them in the /lib folder and build your module.
34-
35-
##### AAR with res folder
36-
Another approach is to unzip the AAR and copy its JAR, AndroidManifest.xml settings, and res files into the module project. While this is fine for simple AARs it is not recommended for comlex ones.
37-
38-
#### 2. Use the AAR
39-
40-
If there are other files inside the AAR file you have to include the whole file. Since it is not bundled in the compiled module you can add it to your app later on again.
41-
42-
As an example we will use the Polar BLE SDK (https://github.com/polarofficial/polar-ble-sdk). Download the AAR and put it into the module libs folder and add this to the `build.gradle` file:
43-
44-
```
45-
repositories {
46-
maven { url "https://oss.jfrog.org/libs-snapshot" }
47-
}
48-
49-
50-
dependencies {
51-
// old method; looks like newer gradles versions don't support this
52-
//
53-
// implementation files('../../libs/polar-ble-sdk.aar')
54-
// implementation files('../../libs/polar-protobuf-release.aar')
55-
56-
// new version
57-
compileOnly files('../../libs/polar-ble-sdk-1.0.0.aar')
58-
compileOnly files('../../libs/polar-protobuf-release.aar')
59-
60-
implementation 'io.reactivex.rxjava3:rxandroid:3.0.0'
61-
implementation 'io.reactivex.rxjava3:rxjava:3.0.0'
62-
}
63-
```
64-
65-
Inside the java source file (e.g. `TiPolarModule.java`) we add the following method:
66-
67-
```java
68-
import polar.com.sdk.api.PolarBleApi;
69-
import polar.com.sdk.api.PolarBleApiDefaultImpl;
70-
71-
@Kroll.method
72-
public void create()
73-
{
74-
PolarBleApi api = PolarBleApiDefaultImpl.defaultImplementation(TiApplication.getAppCurrentActivity(), PolarBleApi.FEATURE_HR);
75-
Log.i("Polar", "Version: " + PolarBleApiDefaultImpl.versionInfo());
76-
}
77-
```
78-
so we can check that the module is working inside the app.
79-
80-
Now it is time to build the module and copy the zip into the Titanium app.
81-
82-
Inside the app you place the aar files into `./app/platform/android` and Titanium will automatically include all AARs/JARs in that folder.
83-
Titanium's [build system copies](https://github.com/tidev/titanium_mobile/blob/master/android/cli/commands/_build.js#L2689-L2719) the `./platform/android` file tree to the generated Android app `./build/android/app/src/main` folder. Those AAR/JAR files are included by the global [app build.gradle](https://github.com/tidev/titanium_mobile/blob/master/android/templates/build/app.build.gradle#L98)
84-
85-
In your code file add this:
86-
87-
```javascript
88-
var window = Ti.UI.createWindow({title: "Test"});
89-
var polar = require("ti.polar");
90-
polar.create();
91-
window.open();
92-
```
93-
94-
The output will be something like `[INFO] Polar: Version: 2.2.2`.
95-
96-
#### 3. Use a local repository
97-
98-
create a local maven repo. It is just a folder (e.g. /home/miga/tmp/) with a pom.xml containing:
99-
```xml
100-
<repositories>
101-
<repository>
102-
<id>repository</id>
103-
<url>/home/miga/tmp/</url>
104-
</repository>
105-
</repositories>
106-
```
107-
108-
Then run
109-
110-
```
111-
mvn install:install-file -Dfile=/home/miga/download/lib.aar -DgroupId=YOUR_GROUP_ID -DartifactId=YOUR_ARTIFACT_ID -Dversion=1.0.0 -Dpackaging=aar -DlocalRepositoryPath=/home/miga/tmp
112-
```
113-
114-
and it will add the aar to the local repo.
115-
116-
In the module AND app add this to your build.gradle:
117-
```
118-
repositories {
119-
maven {
120-
url '/home/miga/tmp/'
121-
}
122-
}
123-
dependencies {
124-
implementation 'YOUR_GROUP_ID:YOUR_ARTIFACT_ID:1.0.0'
125-
}
126-
```
5+
visit https://fromzerotoapp.com/android-modules-using-local-aar-files/

0 commit comments

Comments
 (0)