質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

Q&A

解決済

1回答

1903閲覧

【Android】円の枠画像を背景として、中に2つの画像をうまく入れ込みたい。【xml】

jyota.satora

総合スコア1

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Kotlin

Kotlinは、ジェットブレインズ社のアンドリー・ブレスラフ、ドミトリー・ジェメロフが開発した、 静的型付けのオブジェクト指向プログラミング言語です。

0グッド

0クリップ

投稿2020/08/06 02:30

編集2020/08/06 02:43

前提・実現したいこと

kotlinでandroidアプリの開発をしています。
今現在、xmlでUI作成を行っています。
今回以下、3枚の画像を使って円の中に枠の画像と枠の中のデザインの画像を
うまく円の中に入れ込んだレイアウトの作成を行いたいです。
円からハミ出さないように枠の中に入れ込みたいです。(入れ込むという表現が難しいのですが、枠画像とデザイン画像が円の背景によって本来、はみ出る部分を切り取るようなイメージになります。)

・円形の画像(こちらはshapeタグを使って自作したもの)
・android実機の枠が形どられた画像
・枠の中のサンプルデザインが表示された画像

発生している問題

constraintLayoutを使用してレイアウトを作成しているのですが、 コードの記述を上から順に白の円→枠の中のサンプルデザイン→android実機の枠が形どられた画像の順に 記述をすると、実際に作成される画像では、画像サイズの問題で円の枠から実機の画像とデザインの画像がはみ出てしまいます。 理想としては、はみ出ている表示される部分を白の枠で切れるような状態にしたいです。(わかりにくくて申し訳ないです。。。) 白の円の枠画像の上に画像を重ねた際に白の枠画像を背景としてはみ出さないように実装するには どのような実装方法があるのか教えていただきたく思います。 ご回答よろしくお願いいたします。

該当のソースコード

xml

1 2 //ここが円画像 3 <ImageView 4 android:id="@+id/pushNotificationBackground" 5 android:layout_width="359dp" 6 android:layout_height="340dp" 7 android:layout_margin="@dimen/layout_margin_top" 8 android:contentDescription="@string/push_notification_background" 9 app:layout_constraintEnd_toEndOf="parent" 10 app:layout_constraintStart_toStartOf="parent" 11 app:layout_constraintTop_toBottomOf="@+id/pushNotificationRecommendedText" 12 app:srcCompat="@drawable/circle_layout_white" /> 13 14 15   //android実機の枠の中のデザインの画像 16 <ImageView 17 android:id="@+id/pushNotificationSampleLayoutContents" 18 android:layout_width="150dp" 19 android:layout_height="310dp" 20 android:layout_marginBottom="20dp" 21 app:layout_constraintBottom_toBottomOf="@+id/pushNotificationBackground" 22 app:layout_constraintEnd_toEndOf="@+id/pushNotificationSampleLayout" 23 app:layout_constraintStart_toStartOf="@+id/pushNotificationSampleLayout" 24 app:layout_constraintTop_toTopOf="@+id/pushNotificationBackground" 25 app:srcCompat="@drawable/sample_design" /> 26 27 28   //ここが実機の枠の画像 29 <ImageView 30 android:id="@+id/pushNotificationSampleLayout" 31 android:layout_width="wrap_content" 32 android:layout_height="335dp" 33 android:contentDescription="@string/application_start_sample_layout_image" 34 app:layout_constraintBottom_toBottomOf="@+id/pushNotificationBackground" 35 app:layout_constraintEnd_toEndOf="@+id/pushNotificationBackground" 36 app:layout_constraintStart_toStartOf="@+id/pushNotificationBackground" 37 app:layout_constraintTop_toTopOf="@+id/pushNotificationBackground" 38 app:srcCompat="@drawable/real_machine_sample" /> 39 40

試したこと

FrameLayoutを使って、親を背景の白の円画像にして子ビューのなかに
枠デザインと実機の枠画像を入れ込んで、
実装を試みましたが、期待したレイアウトになりませんでした。

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

OS:macbookPro macOS Catalina
開発環境:androidstudio4.0

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

レイアウトで作成することが難しく、photoshopで作ることになりましたので、closeいたします。

投稿2020/08/27 03:25

jyota.satora

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問