つんでらぼのアンドロイドアプリ開発ブログ

ものづくり大好きな開発者がアンドロイドアプリ開発におけるあれこれを日々綴ります。アンドロイド・デザイン・UX/UI・プロモーション・マネタイズ・Webサイト..日々楽しく悩んでます。

dpではマルチスクリーン・マルチデバイス対応できないときの対応方法

dp指定でもずれる?

先日から悩んでいた課題、

解決できましたので報告します。

 

実は、背景画像の罫線に収めるためにlineSpaceExtraのパラメータを設定して調節しています。

ですが、端末を変えてインストールしてみるとなぜかずれます......

ほんの少しなので、dpで計算されているとき端数等でずれが生じるのだと思われます。

そこで端末ごとにアクティビティ側でlineSpaceExtraの値を設定するようにしました。

対応策

文字のサイズをユーザーの皆様が変更できるように、

文字サイズをオプションから設定できるようにしました。

さらに、罫線に収まるように空白のサイズという値を調整してもらうようにしました。

最初に一回だけ調整お願いします。

f:id:tsundeleo:20140909230801p:plain

 

結果

f:id:tsundeleo:20140909230806p:plain

どんな端末でも、綺麗に罫線に収まるようになりました。

ユーザーの方に少しお手数をおかけすることになりますが、

初回だけですので、よろしくお願いします。

10分でできるGoogle Playのプロモーション画像 作ってみよう

プロモーションどうやってますか?

アプリ開発者のみなさん、スマホGoogle Playのアプリにアクセスしたら、

”ここ”どうなってますか?

f:id:tsundeleo:20140906162339p:plain

 

ここには、Developer consoleの宣伝画像に設定した表示されます。

ん~文字とかつぶれてますね。

デザインは独学ですが、日々勉強しています。

ちょっと洗練してみます。

アプリの顔をかっこよくしよう!

さて、では新たに画像を作ってみましょう。

まずは端末上でアプリが動いている画像を作成します。

 

アプリのスクリーンショットを撮ります。

f:id:tsundeleo:20140906163518p:plain

端末にはめ込みます。Developerからいいツールがあります。

Device Art Generator | Android Developers

端末上に画像をドロップ

f:id:tsundeleo:20140906163759p:plain

こんな感じにできました。

f:id:tsundeleo:20140906163843p:plain

次は背景画像を作りましょう。

やはりぼかし画像がいいですよね?

Photoshopを使います。

イメージ>画像の解像度からピクセル数を1024px × 500pxに設定。

フィルター>ぼかし>ぼかし(ガウス)で4pxに設定

f:id:tsundeleo:20140906164830p:plain

背景ができたので重ねて文字をつけて完成。

 

f:id:tsundeleo:20140906165834p:plain

どうでしょうか?

前(約2年前?)よりは幾分よくなったと思います。

おまけの宣伝

つけたい習慣が管理できるAndroidアプリ 習慣+(無料) 

ぜひともよろしくお願いします。

習慣+ - Google Play の Android アプリ

https://play.google.com/store/apps/details?id=jp.co.se.android.tsundelab.shukanPlus

論理的デザインを目指して

行間指定プロパティ

まずは見てください

f:id:tsundeleo:20140825215530p:plain

綺麗にそろいました。

テキストの行間を指定するプロパティ等をいじって調整しました。

android:lineSpacingExtra="13.7dp"

いろいろなプロパティがあるのですね。

勉強になりました。

複数端末対応....

調子に乗ってNexsus7でも

 

f:id:tsundeleo:20140825220050p:plain

あれ?ずれてますね.....

そうだ、先日のブログではdpとpxの話で統一しないと....

と思っていましたが、

画像は指定していないのでpx

行間はdpで指定してますね。

もう少し考えてみます。

 

背景での繰り返し画像を使う

うまくいかないのはpxとdpが原因ではない?

昨日のブログでは背景の画像がdp指定でTextViewがpxみたいなことを言ってましたが、背景画像はdrawableにxmlで繰り返しでリソースの画像を設定し背景画像を作っていました。activityに対応するlayoutのxmlではこの背景画像を設定していました。ですので背景画像はdpともpxとも設定していませんでした。

 

drawable/memo_background.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <bitmap xmlns:android="http://schemas.android.com/apk/res/android
  3. android:src="@drawable/memo_back"
  4. android:tileMode="repeat">
  5. </bitmap>

元の画像のピクセルをしっかり確認しないといけないようですね。

引き続き調査してみます。

pxとdpについて整理

思い通りにデザインしたい!

widthやheightなとでサイズを指定する際
pxやdpといった単位を指定しますよね。

今悩んでいる原因がpx dpのようなので再確認して解決策を模索してみます。

罫線の上に綺麗に文字を配置したい

今メモアプリをデザインしています。
デザインの特徴は、メモの背景の罫線なのですが、、、

f:id:tsundeleo:20140822235718p:plain

うまく配置できていません、、、

要件を正確にまとめると

罫線を背景に使ってその罫線に沿って文字が表示されるようにしたいです。

そして、どんな端末でも、文字が綺麗に罫線に乗るのが理想です。

どうやって実装しているか?

罫線画像はIllustratorを使ってpngで作成し、
画像は繰り返しを使って背景に適用しています。
サイズにはdpを用いています。
TextViewの文字のサイズはpx

単位が違うのが、ずれる原因ではないかと思います。

どちらかの単位で統一してみます。

つづく....

アンドロイドアプリ開発ブログを書く目的

はじめまして

アンドロイドアプリディベロッパーTsundelabの開発リーダーtsundeleoです。

本日ブログを書き始めたわけですが、

その目的意識をはっきりさせて、ブログ生活を気持ちよくスタートしたいと思います。

アプリ開発モチベーションアップ

アンドロイドアプリのディベロッパーとして日々アプリ開発に勤しんでいます。

アンドロイドに関してはすべて独学です。

たくさん本を買って、真似して作って、自分なりにアレンジして勉強しています。

インプットは日々多いですが、アウトプットはアプリだけ。

僕はアウトプットでモチベーションが非常に上がる人間だと認識しています。

アプリをリリース(アウトプット)してから、色々なユーザーさんから意見を頂くことができ勉強、開発のモチベーションが非常に上がりました。

勝手ながらアプリ開発において高いモチベーションを保つためというのが目的の一つです。

オープンイノベーション

オープンイノベーションという言葉を最近良く聞きます。オープンにして、イノベーションを促進するという取り組みだと私は認識しています。

アンドロイドアプリ開発やブログもある意味ひとつのオープンイノベーションの機会だと思っています。

アプリであれば、リリースして、使ってもらい、その評価をGoogle Playから行い、ユーザーの方からコメントを頂く。その中でうまれるコミュニケーションが新たなアイデアを生むことがたくさんありました。

ブログでも、自分のアウトプットの記事に対して色々な交流がうまれればいいな。と思っています。

まとめ

アンドロイドアプリ開発ブログを書く目的は、オープンイノベーションで良いアプリを作れるようにするためです。そして私のアウトプットが世界の役に立てればと思っています。

よろしくお願いします。