1. Download our Official Android App: Forums for Android!

Apps Can't center ImageView inside of other ImageView properly?

Discussion in 'Android Development' started by Camphi, Apr 25, 2016.

  1. Camphi

    Camphi Lurker
    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    4
    Joined:
    Apr 25, 2016

    Apr 25, 2016
    4
    2
    16
    Male
    Hello, I am currently in the process of developing an app that deals with music. I coded a music stave and tried to put it on a rectangle, both are image views, but I cannot seem to center the music stave on the rectangle correctly. The bottom line of the stave is in the center of the rectangle and the rest of the lines are in the top half of the rectangle. The entire bottom half is unused. Here is my code:

    Activity:
    Code (Text):
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2.     xmlns:tools="http://schemas.android.com/tools"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="match_parent"
    5.     android:paddingBottom="@dimen/activity_vertical_margin"
    6.     android:paddingLeft="@dimen/activity_horizontal_margin"
    7.     android:paddingRight="@dimen/activity_horizontal_margin"
    8.     android:paddingTop="@dimen/activity_vertical_margin"
    9.     android:background="@color/colorBackground"
    10.     tools:context="aphitech.musicappproject.MainActivity">
    11.  
    12.     <ScrollView
    13.         android:layout_width="match_parent"
    14.         android:layout_height="match_parent">
    15.  
    16.         <LinearLayout
    17.             android:layout_width="match_parent"
    18.             android:layout_height="match_parent"
    19.             android:orientation="vertical">
    20.             <RelativeLayout
    21.                 android:layout_width="match_parent"
    22.                 android:layout_height="90dp"
    23.                 android:clickable="false">
    24.                 <ImageView
    25.                     android:id="@+id/LowAb"
    26.                     android:layout_width="match_parent"
    27.                     android:layout_height="90dp"
    28.                     android:src="@drawable/rectangle"
    29.                     android:layout_alignParentLeft="true"
    30.                     android:layout_alignParentTop="true"
    31.                     />
    32.                 <ImageView
    33.                     android:layout_width="match_parent"
    34.                     android:layout_height="90dp"
    35.                     android:layout_alignParentBottom="true"
    36.                     android:layout_centerVertical="true"
    37.                     android:src="@drawable/stavelines"/>
    38.  
    39.                 <ImageView
    40.                     android:id="@+id/tr"
    41.                     android:layout_width="match_parent"
    42.                     android:layout_height="11dp"
    43.                     android:src="@drawable/note"
    44.                     android:layout_marginTop="52dp"
    45.                     android:layout_marginEnd="225dp"/>
    46.                 <ImageView
    47.                     android:id="@+id/b"
    48.                     android:layout_width="match_parent"
    49.                     android:layout_height="11dp"
    50.                     android:src="@drawable/note"
    51.                     android:layout_marginTop="28dp"
    52.                     android:layout_marginEnd="60dp"/>
    53.             </RelativeLayout>
    54. </RelativeLayout>
    Rectangle:
    Code (Text):
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    3.  
    4.     <item>
    5.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    6.             <stroke android:width="1dp" android:color="#e0dfde" />
    7.             <padding android:left="2dp"
    8.                 android:top="2dp"
    9.                 android:right="2dp"
    10.                 android:bottom="2dp"/>
    11.             <solid android:color="#ffffff" />
    12.         </shape>
    13.     </item>
    14.  
    15. </layer-list>
    Music Stave:
    Code (Text):
    1.  
    2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    3.  
    4.     <item>
    5.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    6.             <stroke android:width="2dp" android:color="#000000"/>
    7.             <size android:height="20dp" />
    8.             <padding android:bottom="20dp"/>
    9.         </shape>
    10.     </item>
    11.  
    12.     <item>
    13.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    14.             <stroke android:width="2dp" android:color="#000000"/>
    15.             <size android:height="20dp" />
    16.             <padding android:bottom="20dp"/>
    17.         </shape>
    18.     </item>
    19.  
    20.     <item>
    21.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    22.             <stroke android:width="2dp" android:color="#000000"/>
    23.             <size android:height="20dp" />
    24.             <padding android:bottom="20dp"/>
    25.         </shape>
    26.     </item>
    27.  
    28.     <item>
    29.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    30.             <stroke android:width="2dp" android:color="#000000"/>
    31.             <size android:height="20dp" />
    32.             <padding android:bottom="20dp"/>
    33.         </shape>
    34.     </item>
    35.  
    36.     <item>
    37.         <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    38.             <stroke android:width="2dp" android:color="#000000"/>
    39.             <size android:height="20dp" />
    40.         </shape>
    41.     </item>
    42.  
    43. </layer-list>
    I am thinking that the music staves drawable is the reason why it isn't centering correctly, which could be due to the padding that I placed in between the lines so that it actually looks like a music stave.
     

    Advertisement

  2. LV426

    LV426 I say we take off and nuke this place from orbit
    Moderator
    Rank:
     #11
    Points:
    1,988
    Posts:
    7,644
    Joined:
    Oct 16, 2015

    Oct 16, 2015
    7,644
    11,060
    1,988
    Male
    Software developer
    South West of England
    Do you have a screenshot of this?
    Another approach you might want to look into is using 2D graphics on a canvas for this. Would give you absolute control over position of graphical elements. Just a suggestion.
     
  3. Camphi

    Camphi Lurker
    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    4
    Joined:
    Apr 25, 2016

    Apr 25, 2016
    4
    2
    16
    Male
    Here is what is happening:
    layout-2016-04-26-083440.png
     
  4. Camphi

    Camphi Lurker
    Thread Starter
    Rank:
    None
    Points:
    16
    Posts:
    4
    Joined:
    Apr 25, 2016

    Apr 25, 2016
    4
    2
    16
    Male

Share This Page

Loading...