Android views layout - java

I took some code from an example application and I need help rearranging it. I'm trying to make a simple mp3 player. Everything works on a small screen. However, when it is rotated or if the screen size is bigger, the layout is all off. I don't know why this is happening. Please help. Thanks so much. My layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="14dp"
android:onClick="forward"
android:src="#android:drawable/ic_media_ff" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageButton2"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageButton2"
android:onClick="rewind"
android:src="#android:drawable/ic_media_rew" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton1"
android:layout_marginLeft="14dp"
android:layout_toRightOf="#+id/imageButton1"
android:onClick="pause"
android:src="#android:drawable/ic_media_pause" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton3"
android:layout_marginLeft="24dp"
android:layout_toRightOf="#+id/imageButton3"
android:onClick="play"
android:src="#android:drawable/ic_media_play" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton3"
android:layout_toLeftOf="#+id/textView2"
android:layout_toRightOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageButton3"
android:layout_alignTop="#+id/seekBar1"
android:text="#string/inital_Time"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton4"
android:layout_alignTop="#+id/seekBar1"
android:text="#string/inital_Time"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
</LinearLayout>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_centerHorizontal="true"
android:minLines="2"
android:text=" " />
<ImageView
android:id="#+id/imageView2"
android:layout_width="100px"
android:layout_height="100px"
android:layout_alignLeft="#+id/imageView1"
android:layout_centerVertical="true"
android:onClick="previous"
android:rotation="180"
android:src="#drawable/go_next_black" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="100px"
android:layout_height="100px"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/seekBar1"
android:onClick="next"
android:src="#drawable/go_next_black" />
</RelativeLayout>

To manage layouts possibly to run on all the devices, please use LinearLayout with layout_weight functionality.

Related

View is behaving fixed sized instead of dynamic sized based on screen using ConstraintLayout

I am trying to create a setting screen, below is the code and preview in Android Studio.
It has a couple of issues. The CardView with the scrollView layout is not working as it should
What I want is, my CardView to be adjusted in the middle of userDetailsLayout and logoutBtn with the spacing of #dimen/_20sdp. But it can be seen that its stretching all the way to logoutBtn,
If I use a small screen mobile, the CardView, also starts overlapping userDetailsLayout
It's like, its making CardView fixed size instead of variable-sized based on space. What should I do?
android:layout_margin="#dimen/_20sdp"
app:layout_constraintTop_toBottomOf="#+id/userDetailsLayout"
app:layout_constraintBottom_toTopOf="#+id/logoutBtn"
app:layout_constraintRight_toRightOf="parent"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/forgot_bg_color"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/topBar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
app:contentInsetStart="0dp"
android:elevation="5dp"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_100sdp"
android:background="#android:color/white"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_marginBottom="#dimen/_5sdp"
android:layout_marginRight="#dimen/_10sdp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="#dimen/_35sdp"
android:layout_height="#dimen/_35sdp"
android:src="#drawable/down_arrow"
android:scaleType="centerInside"
android:rotation="90"
android:layout_marginBottom="-10dp"
android:layout_above="#+id/inboxBtn"
android:id="#+id/backBtn"
/>
<TextView
android:layout_toRightOf="#+id/backBtn"
android:fontFamily="#font/montserrat_bold"
android:layout_above="#+id/inboxBtn"
android:gravity="bottom"
android:textSize="#dimen/_16sdp"
android:drawablePadding="#dimen/_8sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/homeTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/inboxBtn"
android:fontFamily="#font/montserrat_medium"
android:layout_alignParentBottom="true"
android:textSize="#dimen/_14sdp"
android:gravity="center"
android:drawablePadding="#dimen/_8sdp"
android:textColor="#color/text_gray"
android:layout_width="wrap_content"
android:layout_height="#dimen/_35sdp"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:id="#+id/userDetailsLayout"
android:paddingLeft="#dimen/_20sdp"
android:paddingRight="#dimen/_20sdp"
app:layout_constraintTop_toBottomOf="#+id/topBar"
android:layout_width="match_parent"
android:layout_height="#dimen/_100sdp"
>
<androidx.cardview.widget.CardView
android:id="#+id/userLayout"
android:layout_centerVertical="true"
app:cardElevation="5dp"
app:cardCornerRadius="#dimen/_35sdp"
android:layout_width="#dimen/_70sdp"
android:layout_height="#dimen/_70sdp"
>
<ImageView
android:id="#+id/userDp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.cardview.widget.CardView>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_toRightOf="#+id/userLayout"
android:layout_marginLeft="#dimen/_10sdp"
>
<TextView
android:fontFamily="#font/montserrat_bold"
android:textSize="#dimen/_16sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/action_settings"
android:textColor="#color/text_gray"
android:id="#+id/details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_margin="#dimen/_20sdp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/userDetailsLayout"
app:layout_constraintBottom_toTopOf="#+id/logoutBtn"
android:layout_width="match_parent"
app:cardCornerRadius="#dimen/_10sdp"
app:cardElevation="0dp"
android:layout_height="wrap_content"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/_10sdp"
android:paddingRight="#dimen/_10sdp"
>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/notifications"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Switch android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/manage_address"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/about"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/support"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/terms"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="#dimen/_50sdp"
>
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_centerVertical="true"
android:fontFamily="#font/montserrat_regular"
android:textSize="#dimen/_12sdp"
android:text="#string/privacy"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView android:layout_width="wrap_content"
android:layout_marginRight="#dimen/_5sdp"
android:layout_height="wrap_content"
android:src="#drawable/right_arrow_small"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/light_gray"
/>
</LinearLayout>
</ScrollView>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/logoutBtn"
android:fontFamily="#font/montserrat_bold"
android:gravity="center"
android:layout_marginRight="#dimen/_20sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_20sdp"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:textColor="#android:color/white"
android:text="#string/logout"
android:textSize="#dimen/_14sdp"
android:background="#drawable/logout_bg"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Not 100% sure what you mean, but from the code I would suggest you to change:
android:layout_width="0dp"
android:layout_height="0dp"
when you specify height and width constraints on the view. Otherwise the constraints won't work. And btw. dont use so many nested layouts inside your constraintlayout. Every single layout will need a complete new measure and render process which slow down your app a lot. Please also look at Guidelines and ConstraintAspectRatio.
The issue is that the logoutBtn is within the same parent as your CardView. They both have
android:layout_margin="#dimen/_20sdp"
That's why they have the same width, they both align right and left to the parent and have the same about of margin. So if you want it to be 20dp from the CardView you either want to nest the logoutBtn in the cardview or simply make the logoutBtn have 40dp
<TextView
android:id="#+id/logoutBtn"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginBottom="20dp"
android:background="#color/error_red"
android:gravity="center"
android:text="string/logout"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>

How to use sliding up panel with bottom navigation view?

I am using this library for sliding up panel. I'm trying to use it with the bottom navigation view, for my music streaming app. I am trying to do something like soundcloud app. But I'm unable to achieve this and it shows like this I have two player views, one is mini player and another is the big player. My miniplayer of the slidingup panel goes below of the
bottom navigation view. I want it stay on top of the bottom navigation view. When I click on the miniplayer, slide up panel expands, mini player is gone the big player is visible and the bottom navigation is also gone.
Sorry for my bad english.
Heres my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<com.example.user.musicstreamingapp.CustomView.SlidingUpPanel.SlidingUpPanelLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
app:umanoPanelHeight="90dp"
app:umanoShadowHeight="4dp"
android:id="#+id/sliding_panel_layout"
android:gravity="bottom"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"
android:visibility="visible"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg"
android:orientation="vertical"
android:visibility="gone"
android:id="#+id/music_player"
>
<android.support.v7.widget.CardView
android:id="#+id/mini_player"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:visibility="visible"
app:cardBackgroundColor="#color/colorBlue"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.user.musicstreamingapp.CustomView.CircularMusicProgressBar
android:id="#+id/music_round_progress"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/drake"
app:centercircle_diammterer="1"
app:draw_anticlockwise="false"
app:enable_touch="false"
app:progress_color="#FAC100"
app:progress_startAngle="40" />
<TextView
android:id="#+id/remain_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="1:22"
android:textColor="#color/wh"
android:textSize="12sp" />
<TextView
android:id="#+id/song_name_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="In My Feelings"
android:textColor="#color/wh"
android:textSize="16sp" />
<TextView
android:id="#+id/artist_name_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/song_name_mini"
android:layout_marginLeft="12dp"
android:layout_toRightOf="#id/music_round_progress"
android:text="Drake"
android:textColor="#FAC100"
android:textSize="12sp" />
<ImageView
android:id="#+id/play_btn_mini"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="12dp"
android:src="#drawable/ic_play" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/big_player"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg"
android:minHeight="?attr/actionBarSize"
app:theme="#style/CustomActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_arrow_down" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:fontFamily="sans-serif-medium"
android:text="#string/now_playing"
android:textColor="#color/grey"
android:textSize="18sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="8dp"
android:src="#drawable/ic_more" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar_top"
android:layout_marginTop="12dp">
<com.example.user.musicstreamingapp.library.src.main.java.com.yarolegovich.discretescrollview.DiscreteScrollView
android:id="#+id/songs_thumb_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<RelativeLayout
android:id="#+id/middle_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/songs_thumb_rv"
android:layout_marginTop="20dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="#+id/song_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Get Away"
android:textColor="#color/headerTextColor"
android:textSize="18sp" />
<TextView
android:id="#+id/artist_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/song_name"
android:layout_centerHorizontal="true"
android:text="Drake"
android:textColor="#color/colorBlue"
android:textSize="12sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_favorite_border"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_download_border" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/duration_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/middle_view"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="12dp">
<TextView
android:id="#+id/current_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="2.44"
android:textColor="#color/grey"
android:textSize="12sp" />
<SeekBar
android:id="#+id/seek_bar_music"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/total_time"
android:layout_toRightOf="#id/current_time" />
<TextView
android:id="#+id/total_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="5.33" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/duration_view"
android:padding="30dp">
<ImageView
android:id="#+id/shuffle_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/ic_shuffle" />
<ImageView
android:id="#+id/prev_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="25dp"
android:layout_toRightOf="#id/shuffle_btn"
android:src="#drawable/ic_prev" />
<ImageView
android:id="#+id/play_btn_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_play_new" />
<ImageView
android:id="#+id/next_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="25dp"
android:layout_toLeftOf="#id/repeat_btn"
android:layout_toRightOf="#id/play_btn_main"
android:src="#drawable/ic_next" />
<ImageView
android:id="#+id/repeat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_repeat_all" />
</RelativeLayout>
<ImageView
android:id="#+id/video_available"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/player_view"
android:layout_centerHorizontal="true"
android:src="#drawable/video_not_available" />
<LinearLayout
android:id="#+id/player_footer_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:paddingBottom="16dp"
>
<ImageView
android:id="#+id/settings_music"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:src="#drawable/ic_settings" />
<ImageView
android:id="#+id/music_equalizer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_equalizer" />
<ImageView
android:id="#+id/music_cast"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_cast" />
<ImageView
android:id="#+id/music_add_playlist"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_library_add" />
<ImageView
android:id="#+id/music_queue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:src="#drawable/ic_queue_music" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</com.example.user.musicstreamingapp.CustomView.SlidingUpPanel.SlidingUpPanelLayout>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_gravity="bottom"
android:id="#+id/bottom_nav_menu"
android:background="#android:color/white"
android:layout_alignParentBottom="true"
app:itemBackground="#color/wh"
app:itemIconTint="#color/tab_foreground"
app:itemTextColor="#color/tab_foreground"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>`

java.lang.IllegalStateException: Circular dependencies cannot exist in RelativeLayout

Helo All,
I am stuck in an error regarding circular dependencies for Relative Layout. Could anyone help me where I went wrong?
I am using multiple activity xmls but the error is occuring when 1st activity is being executed.
Here is my Relative layout code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#5fb0c9"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<TextView
android:id="#+id/login_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="22dp"
android:gravity="center_horizontal"
android:text="Account Login"
android:textColor="#fff"
android:textSize="26sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/login_title"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/relativeLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText_username"
android:layout_gravity="center_horizontal"
android:layout_weight="0.14"
android:hint="USER NAME"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText_location"
android:layout_weight="0.17"
android:hint="LOCATION"/>
<Button
android:id="#+id/user_confirm"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="22dp"
android:background="#d67601"
android:text="CONFIRM"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
<ImageButton
android:id="#+id/user_profile_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/user_profile_image_background"
android:elevation="6dp"
android:src="#drawable/pro"
android:layout_below="#+id/login_title"
android:layout_centerHorizontal="true" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/images"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<Button
android:id ="#+id/node_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NODE SCAN"
android:onClick="Scan"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_marginTop="105dp"
android:layout_below="#+id/contents"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true" />
<Button
android:id ="#+id/post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="POST"
android:onClick="post"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignTop="#+id/next"
android:layout_alignParentEnd="true" />
<Button
android:id ="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NEXT"
android:onClick="next"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="73dp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/contents"
android:layout_gravity="center_horizontal"
android:layout_weight="0.14"
android:hint=""
android:background="#fcfbfb"
android:layout_alignParentStart="true"
android:layout_above="#+id/post"
android:layout_below="#+id/node_scan" />
<Button
android:id ="#+id/quit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QUIT"
android:onClick="quit"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignTop="#+id/post"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Thanks in Advance,
Alby
android:layout_below="#+id/login_title"
Here should be "#id/..." (whithout a plus sign), because it is a reference to an existing ID.
https://developer.android.com/guide/topics/ui/declaring-layout.html#id
The error was fixed after removing the below from Edit Text field: android:layout_above="#+id/post" android:layout_below="#+id/node_scan"

Material Design Layout issue

I am having trouble with Material Design layout.
Here is what I have:
and the code to represent that
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#color/backgroundColor"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.mycompany.inventory.MainActivity">
<ImageView
android:id="#+id/logoView"
android:layout_width="225dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/mycompanylogo"
android:layout_marginBottom="20dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="USERNAME"
android:id="#+id/txtUsername"
android:layout_below="#+id/logoView"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="0"
android:layout_below="#id/txtUsername"
android:id="#+id/txtScannedCount"/>
<TextView
android:text="Scanned Today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_below="#+id/txtScannedCount"
android:layout_alignLeft="#+id/txtScannedCount"
android:layout_alignStart="#+id/txtScannedCount" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="0"
android:id="#+id/txtInventoryCount"
android:layout_below="#id/txtUsername"
android:layout_alignRight="#+id/btnSearch"
android:layout_alignEnd="#+id/btnSearch" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Inventory"
android:id="#+id/textView4"
android:layout_above="#+id/btnSearch"
android:layout_toRightOf="#+id/textView"
android:layout_toEndOf="#+id/textView"
android:layout_marginLeft="153dp"
android:layout_marginStart="153dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_searchvehicle"
android:id="#+id/btnSearch"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="46dp"
android:layout_marginBottom="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavSearchVechiclesPressed"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_scanbarcode"
android:id="#+id/btnScanner"
android:layout_below="#+id/btnSearch"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/btnSearch"
android:layout_alignEnd="#+id/btnSearch"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavScanBarcodePressed"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtVersion"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#color/divider"/>
</RelativeLayout>
And through the magic of Photoshop here is what I want.
How can I obtain he lay out with the "Scanned Today" and "Inventory" text views as well as the large centered numbers?
Try this one
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#color/backgroundColor"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.mycompany.inventory.MainActivity">
<ImageView
android:id="#+id/logoView"
android:layout_width="225dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/mycompanylogo"
android:layout_marginBottom="20dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="USERNAME"
android:id="#+id/txtUsername"
android:layout_below="#+id/logoView"
android:layout_centerHorizontal="true" />
<TextView
android:text="Scanned Today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:id="#+id/textView"
android:layout_alignLeft="#+id/btnSearch"
android:layout_alignStart="#+id/btnSearch"
android:layout_below="#+id/txtScannedCount" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="0"
android:textSize="30sp"
android:layout_below="#id/txtUsername"
android:gravity="center_horizontal"
android:id="#+id/txtScannedCount"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="0"
android:textSize="30sp"
android:gravity="center_horizontal"
android:id="#+id/txtInventoryCount"
android:layout_below="#id/txtUsername"
android:layout_alignLeft="#+id/textView4"
android:layout_alignStart="#+id/textView4"
android:layout_alignRight="#+id/textView4"
android:layout_alignEnd="#+id/textView4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Inventory"
android:id="#+id/textView4"
android:layout_marginRight="30dp"
android:gravity="center_horizontal"
android:layout_above="#+id/btnSearch"
android:layout_alignRight="#+id/btnSearch"
android:layout_alignEnd="#+id/btnSearch" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_searchvehicle"
android:id="#+id/btnSearch"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="46dp"
android:layout_marginBottom="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavSearchVechiclesPressed"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_scanbarcode"
android:id="#+id/btnScanner"
android:layout_below="#+id/btnSearch"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/btnSearch"
android:layout_alignEnd="#+id/btnSearch"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavScanBarcodePressed"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtVersion"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#color/divider"/>
</RelativeLayout>
I think what you want is for the TextView text to be center justified horizontally, in which case add
android:gravity="center_horizontal"
to your textViews
You can (and probably you should) use other layouts inside your parent relativeLayout. This way you simplify a lot the design and you avoid that all the design is dependant of one item (on your layout, if you remove one of the textViews most of the layout is repositioned, as they were relative to that textView)
A quick example of this with your code could be something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.mycompany.inventory.MainActivity">
<Button
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:onClick="NavSearchVechiclesPressed"
android:layout_below="#+id/linearLayout3"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/linearLayout3"
android:layout_marginTop="50dp" />
<Button
android:id="#+id/btnScanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btnSearch"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/btnSearch"
android:layout_below="#+id/btnSearch"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:onClick="NavScanBarcodePressed"
android:layout_marginTop="20dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2">
<ImageView
android:id="#+id/logoView"
android:layout_width="225dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/txtUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logoView"
android:layout_centerHorizontal="true"
android:text="USERNAME"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center_horizontal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/linearLayout2"
android:layout_alignParentEnd="true"
android:id="#+id/linearLayout3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="#+id/txtScannedCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtUsername"
android:text="0"
android:textSize="50sp"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtScannedCount"
android:layout_alignStart="#+id/txtScannedCount"
android:layout_below="#+id/txtScannedCount"
android:text="Scanned Today"
android:layout_gravity="center_horizontal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:id="#+id/txtInventoryCount"
android:layout_width="wrap_content"
android:textSize="50sp"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btnSearch"
android:layout_alignRight="#+id/btnSearch"
android:layout_below="#id/txtUsername"
android:text="0"
android:layout_gravity="center_horizontal" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnSearch"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:text="Inventory"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
(I removed the text, colors and images, but it looks similar to what you want)
Try playing around with different sub-layouts and it will make your life easier :)
use layout as
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#color/backgroundColor"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.mycompany.inventory.MainActivity">
<ImageView
android:id="#+id/logoView"
android:layout_width="225dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/mycompanylogo"
android:layout_marginBottom="20dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="USERNAME"
android:id="#+id/txtUsername"
android:layout_below="#+id/logoView"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_searchvehicle"
android:id="#+id/btnSearch"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="46dp"
android:layout_marginBottom="15dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavSearchVechiclesPressed"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_scanbarcode"
android:id="#+id/btnScanner"
android:layout_below="#+id/btnSearch"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/btnSearch"
android:layout_alignEnd="#+id/btnSearch"
android:background="#color/colorPrimary"
android:backgroundTint="#color/colorPrimaryDark"
android:textColor="#color/buttontext"
android:onClick="NavScanBarcodePressed"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="#+id/txtVersion"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textColor="#color/divider"/>
<TextView
android:id="#+id/txtInventoryCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView4"
android:layout_alignEnd="#+id/btnSearch"
android:layout_toRightOf="#+id/logoView"
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/txtScannedCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtUsername"
android:layout_toLeftOf="#+id/logoView"
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignStart="#+id/txtScannedCount"
android:layout_below="#+id/txtScannedCount"
android:text="Scanned Today" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnSearch"
android:layout_alignParentRight="true"
android:layout_marginStart="153dp"
android:layout_toEndOf="#+id/textView"
android:text="Inventory"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>

How can i make a layout like as give below in the picture?

I am actually trying to create a layout like this but it seems to scatter all over the place.
Any help or idea to optimize it will be greatly appreciated.
xml
<RelativeLayout
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<ImageView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/menu_normal"
android:onClick="onClickContentButton" />
<ImageView
android:id="#+id/new_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="actionPerformed"
android:src="#drawable/invite_friends_normal" />
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Profile"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/header"
android:background="#049080"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="My profile"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView1"
android:orientation="vertical"
android:weightSum="2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/com_facebook_profile_picture_blank_square" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/bang_selected" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_toRightOf="#+id/imageView1"
android:text="John smith"
android:textColor="#2D2D2D"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_below="#+id/textView2"
android:text="latitude:"
android:textColor="#2d2d2d"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/textView2"
android:text="longitude:"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Graphical layout
I would make the main layout be a relative layout.
The "My Profile" button would be the first object in the layout
The segment underneath that can be another relative layout in which you would specify the association of all the elements.
And the bottom map portion would be the map view
Within the second portion, use a mix of vertical and horizontal linear layouts to get the look you desire

Categories

Resources