Android-Oval mit Bild auf Design-Ansicht und Gerät gezeichnet gezeichnet

Question

Ich habe eine XML-Zeichensprache, die einen roten Kreis zeichnet und ein Mikrofonbild in der Mitte zentriert. Ich habe es dann auf einem relativ Layout-Hintergrund. Das Layout der Designansicht sieht jedoch genau so aus, wie ich es möchte, das Layout des Geräts nicht. Wo ist die Diskrepanz?

Drawable XML

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

    <item 
     android:width="125dp" 
     android:height="125dp" 
     android:gravity="center" 
     > 
     <shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="oval" 
      > 
      <solid android:color="#FD91B5" /> 

      <!-- 
      <stroke 
       android:width="10dp" 
       android:color="#" /> 
       --> 
     </shape> 
    </item> 

    <item 
     android:gravity="center" 
     android:width="26dp" 
     android:height="44dp" 
     android:drawable="@drawable/kiosk_microphone" 
     /> 

</layer-list> 

Ansicht XML (Achten Sie auf die Image)

<?xml version="1.0" encoding="utf-8"?> 
<android.support.percent.PercentRelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/kiosk_bg_default_view"> 

    <Button 
     android:layout_width="wrap_content" 
     android:layout_height="60dp" 
     android:text="Close" 
     android:id="@+id/kiosk_close_button" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentEnd="false" 
     android:layout_alignParentTop="true" /> 

    <ImageButton 
     style="@style/Base.Widget.AppCompat.ActionButton" 
     app:layout_widthPercent="34%" 
     app:layout_heightPercent="34%" 
     android:scaleType="fitCenter" 
     android:src="@drawable/kiosk_record_circle" 
     android:id="@+id/kiosk_record_button" 
     app:layout_marginTopPercent="33%" 
     app:layout_marginLeftPercent="23%" 

     /> 

    <LinearLayout 
     app:layout_marginTopPercent="10%" 
     app:layout_marginLeftPercent="5%" 
     android:orientation="vertical" 
android:background="@android:color/darker_gray" 
     app:layout_widthPercent="25%" 
     app:layout_heightPercent="20%" 
     > 


     <me.grantland.widget.AutofitTextView 
      android:text="3:45 PM" 
      android:textSize="45sp" 
      android:textColor="#B9CFDF" 
      android:id="@+id/time_textView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:maxLines="1" 
      android:layout_weight="1" 
      /> 
     <me.grantland.widget.AutofitTextView 
      android:text="Monday, December 15th, 2016" 
      android:textSize="10sp" 
      android:textColor="#B9CFDF" 
      android:id="@+id/date_textView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:maxLines="1" 
      android:layout_weight="3" 
      /> 
    </LinearLayout> 

    <LinearLayout 
     app:layout_widthPercent="25%" 
     app:layout_heightPercent="20%" 
     app:layout_marginTopPercent="10%" 
     app:layout_marginLeftPercent="60%" 

     android:orientation="vertical" 
     android:background="@android:color/darker_gray" 
     > 

     <me.grantland.widget.AutofitTextView 
      android:text="25 deg" 
      android:textSize="45sp" 
      android:textColor="@android:color/white" 
      android:id="@+id/weather_textView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:maxLines="1" 
      android:gravity="center" 
      /> 
     <me.grantland.widget.AutofitTextView 
      android:text="Island Park, NY" 
      android:textSize="10sp" 
      android:textColor="@android:color/white" 
      android:id="@+id/location_textView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="3" 
      android:gravity="center" 
      android:maxLines="1" 
      /> 
    </LinearLayout> 
</android.support.percent.PercentRelativeLayout> 

Ich möchte diese

Aber ich bekomme diese

Answer 1

tun so etwas wie:

android:width="125dp" 
android:height="125dp" 

Und:

android:width="26dp" 
android:height="44dp" 

Und auf den Button:

android:layout_height="60dp" 

ist dazu bestimmt, auf die Sie nach hinten losgehen , weil es auf verschiedenen Geräten nicht gleich aussieht . Vor allem, wenn Sie versuchen, ein paar verschiedene Elemente miteinander zu kombinieren, von denen jeder einige zufällige Werte wie folgt hat. Dies ist auf eine erhebliche Diskrepanz in Bildschirmgrößen und Bildschirmdichten unter Android-Geräten. Sie können es auf einem Bildschirm richtig funktionieren lassen, und auf anderen Bildschirmen kann es jedoch völlig anders aussehen.

Für diese Art von Sache, da Sie grundsätzlich ein Symbol benötigen, können Sie eine Zeichen- oder eine SVG-Datei verwenden.

EDIT

Als alternative Lösung, dachte ich an this SVG als src Ihre imageButton und die Schaltfläche sollte die benutzerdefinierte Kreisform wie in this answer mit hat.

Answer 2

circularbutton.xml in Ihrer ziehbar

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_pressed="false"> 
    <shape android:shape="oval"> 
     <solid android:color="#FD91B5"/> 
    </shape> 
</item> 
<item android:state_pressed="true"> 
    <shape android:shape="oval"> 
     <solid android:color="#FD91B9"/> 
    </shape> 
</item> 

Bearbeiten der Farbe für pressten Zustand nach Ihrem Wunsch.

hinzufügen circularbutton.xml zu Ihrem ImageView

<ImageButton 
    style="@style/Base.Widget.AppCompat.ActionButton" 
    app:layout_widthPercent="34%" 
    app:layout_heightPercent="34%" 
    android:scaleType="fitXY" 
    android:src="your_image" 
    android:background="@drawable/circularbutton" 
    android:id="@+id/kiosk_record_button" 
    app:layout_marginTopPercent="33%" 
    app:layout_marginLeftPercent="23%" 
/> 

Wenn scaleType nicht funktioniert, können Sie padding anwenden das Symbol zu verkleinern.