スキップしてメイン コンテンツに移動

Androidのマテリアルデザインのサンプルを試したメモ１


こちらの記事を参考に試してみました。

導入に関してはこちらを参考に

環境

  • targetSdkVersion：21
  • 実行環境：androVM_vbox86p_4.1.1_r6.1-20130222-gapps-houndini-flash_1
  • IDE：Eclipse 4.3.2
  • AppCompat v7:リビジョン番号不明 → 21.0.3

影の描写

ImageViewに以下を記述してみましたが、
<ImageView …
    android:elevation="8dp" />

影表示されず....

こちらによれば、
Api level:20 以下では、たとえ android.support.v4.view.ViewCompat#setElevation(View, float) を呼び出しても 何も起こりません。 ViewCompat クラスをご覧頂ければわかりますが、setElevation(View, float) が実装されていないからです…
9-patch 画像や、 hoge.xml を drawable フォルダにぶち込むなど、従来の方法であれば実現可能です。
サポートライブラリでもダメという事ですね...というわけで一応確認のため、API Level 21で試してみましたが、表示されず...........。検索すると

わかった事は
  • 背景のxmlが必要
  • 背景色に透明度を含めてはダメ
ということで、
layout.xmlが
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="18dp"
        android:padding="5dp"
        android:background="@drawable/myrect"
        android:src="@drawable/ic_launcher" />

myrect.xmlは、
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#0073ff" />
    <corners android:radius="25dp" />
</shape>
結果
画像では分かり辛いですが、影を表示できてます。

カード

記事中にあるCardViewをレイアウトのxmlファイルに記述

<android.support.v7.widget.CardView
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <!--カードのコンテンツ -->
</android.support.v7.widget.CardView>

この中にテキストビューを追加して、実行したところExceptionが発生しました。

02-27 14:45:29.078: E/AndroidRuntime(3003): Caused by: java.lang.ClassNotFoundException: android.support.v7.widget.CardView
ググると、こちらのベストアンサーになっている手順で、CardViewのライブラリを入れると表示できました。


カラー

「colorPrimary」がどうとか記述されてますが、どういう事かわからなかったので検索
こちらで、
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- AppCompat の color theming attrs を設定 -->
    <item name=”colorPrimary”>@color/myawesomered</item>
    <!-- 他の属性 -->
</style>
こう書けばいいみたいにあったので、やってみたらエラーが出ました。
No resource found that matches the given name: attr 'colorPrimary'.

なんでこう一筋縄に行かないのでしょうか。Android Studioを使わないからだと言われそうですが...

※Android Studioは昨年12月にVersion 1.0になって、Android SDKに依存しないモデル部分のテストがやり方がイマイチわからなず（または実行が遅い）など、その他Gradleよくわからない等で、作るのはEclipseの方が早いためまだ移行できてません。というか、マテリアルデザインで躓いてる時点でEclipseの方が遅いだろという話なのかもしれませんが。

AppCompat v7のリビジョン番号

AppCompat v7にもバージョンがあって、というかリビジョン番号と言うのが正しいかもしれませんが、古いやつを使っていたがために、colorPrimaryがエラーになっているようでした。

※ただ、リビジョン番号はEclipse上のAndroidプロジェクト単体ではよくわからず（ファイルやJarファイルの中とか見ましたがリビジョン番号の記述見つからず）、昨年（2014年）のたぶん6月頃だと思うのですが、Eclipse上で新しいAndroidプロジェクトを作成すると、AppCompatのプロジェクトが勝手に作成されて、エラーを吐くみたいな事があったと思いますがその時のAppCompatv7を使ってたためにcolorPrimaryを認識してくれなかったようです。
こちらにあるように↓
SDK_HOME配下の/extras/android/support/v7/appcompatのプロジェクトをインポートしてプロジェクトのPropertiesからAndroidをえらびLibraryにインポートしたSuppor Libraryのプロジェクトを追加します 
というのを使うべきで、Android SDK ManagerでSupport Libraryを最新にしていれば最新のが利用できるはずです。
 
上記の適用でリビジョン番号がわかります。

colorPrimaryを変更してみる

例えば、テーマがTheme.AppCompat.Light.DarkActionBarの場合、デフォルトのアクションバーの色は黒です。
テーマに以下のように記述すると、
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#3F51B5</item>
    </style>
アクションバーの色が変ります。
その他、colorAccentやcolorPrimaryDarkが指定できるようです。色に関してはこちらのカラーパレットを参考に。


500がprimary colorだそうですが、他の数字はよくわかりません。
追記：2015/03/01
色の話はここに少しあります。


感想

マテリアルデザインはサンプルを試すだけでも躓きポイントが多くて疲れました。とりあえずここまでで、他のはまた今度試してみます。
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

Javaでprivateなfieldやmethodにアクセスする

JUnitでテストしてると、privateなフィールドにアクセスして、値を参照したりセットしたりしたくなるわけですが、よく使うのでメモしておきます。 例えば、次のような対象のクラスがあるとします。 public class ParentClass { private String hoge = "ParentClass!!"; public void dispMsg() { System.out.println("dispMsg:" + hoge); } private void privateDispMsg(String msg) { System.out.println("dispMsg:" + msg); } }
コメントを投稿
続きを読む

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ
コメントを投稿
続きを読む

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。
コメントを投稿
続きを読む