Wie würde ich dieses Layout erstellen

Question

Ich verstehe, dass dies möglicherweise nicht der beste Titel ist, so bearbeiten Sie bitte, wenn Sie einen besseren Titel haben.

Ok, also ich habe ein Mock-up von einem Teil des Designs, das ich in Android erstellen möchte, die ich unten posten werde.

Ich bin nicht der beste in der Arbeit mit benutzerdefinierten Formen, so dass ich dachte, ich könnte möglicherweise die Route von Images with clickable areas gehen. Das würde bedeuten, dass ich das Bild einfach importiere und nur dann beobachte, wenn der Benutzer auf einen Bildschirmabschnitt klickt.

Was wäre der beste Ansatz?

Wenn Sie mit XML besser arbeiten, haben Sie ein gutes Tutorial, auf das Sie mich hinweisen könnten.

Dank

Answer 1

vollständig getestet Dieser

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="16dp" 
android:paddingLeft="16dp" 
android:paddingRight="16dp" 
android:paddingTop="16dp"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:weightSum="2"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:weightSum="2" 
     android:orientation="horizontal"> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 1"/> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 2"/> 


    </LinearLayout> 


    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:weightSum="2" 
     android:orientation="horizontal"> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 3"/> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="Button 4"/> 

    </LinearLayout> 

</LinearLayout> 

<Button 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:background="@drawable/circle"/></RelativeLayout> 

Bewahren Sie diese Datei in ziehbar Ordner für Kreis-Taste Hintergrund namens Hilfe Kann als Kreis

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 

<size android:width="200dp" android:height="200dp" /> 
<solid android:color="@android:color/holo_red_light" /></shape> 

wie folgt aussieht

Answer 2

ist hier ein Layout

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <Button 
     android:id="@+id/btn_1" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:text="Button one"/> 

    <Button 
     android:id="@+id/btn_2" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@id/btn_1" 
     android:text="Button two"/> 

    <Button 
     android:id="@+id/btn_3" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:text="Button three" 
     android:layout_below="@id/btn_1"/> 

    <Button 
     android:id="@+id/btn_4" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/btn_2" 
     android:layout_toRightOf="@id/btn_3" 
     android:text="Button four"/> 

    <ImageView 
     android:id="@+id/logo" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:translationZ="10dp" 
     android:src="@drawable/ti_logo"/> 

</RelativeLayout> 

Answer 3

@ SammyG können Sie in diesem Layout bearbeiten Ihre Anforderungen nach ..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.example.android.stackoverflow_test.MainActivity"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:weightSum="2"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:orientation="horizontal"> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_green_dark" 
      android:padding="20dp" /> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/black" 
      android:padding="20dp" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:orientation="horizontal"> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_red_dark" 
      android:padding="20dp" /> 

     <TextView 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:background="@android:color/holo_blue_bright" 
      android:padding="20dp" /> 
    </LinearLayout> 
</LinearLayout> 

<ImageView 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:layout_centerInParent="true" 
    android:background="@mipmap/ic_launcher" /></RelativeLayout>