Android form based layout - java

Am trying to achieve the below layout on Android (Target API 18, min API 8)
Am relatively new to Android & came up with below layout file (activity_main.xml). I know a bit about Linear versus Relative layout and would highly appreciate if anyone can provide some input in this direction.
<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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/task_name"
android:textSize="14sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/textView1"
android:ems="10"
android:hint="#string/task_name_hint"
android:inputType="text" />
<DatePicker
android:id="#+id/dpResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_marginTop="8dp" />
<RadioGroup
android:id="#+id/priority_radios"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/dpResult"
android:inputType="text"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/first_radio" />
<RadioButton
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/second_radio"/>
<RadioButton
android:id="#+id/third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/third_radio" />
<RadioButton
android:id="#+id/none"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/none_radio"
android:checked="true" />
</RadioGroup>
<RadioGroup
android:id="#+id/category_radios"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/priority_radios"
android:inputType="text"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/long_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/first_radio" />
<RadioButton
android:id="#+id/short_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/second_radio"/>
<RadioButton
android:id="#+id/new_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/third_radio" />
</RadioGroup>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tag_name"
android:textSize="14sp" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/tag_arrays"
android:prompt="#string/tag_prompt"
android:layout_below="#id/category_radios"
android:layout_toRightOf="#id/textView2" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/spinner1"
android:text="#string/create_task" />
</RelativeLayout>

It seems a fairly easily layout. You can use a vertical parent linearlayout, and then several horizontal linearlayout for each row.
<?xml version="1.0" encoding="utf-8"?>
<!-- PARENT LAYOUT -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/line1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Task name"/>
<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter task name"/>
</LinearLayout>
<LinearLayout android:id="#+id/line2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- SECOND LINE -->
</LinearLayout>
<LinearLayout android:id="#+id/line3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- THIRD LINE -->
</LinearLayout>

I'd use a RelativeLayout as you do, for the container, then some LinearLayouts and RadioGroups (which inherit from LinearLayout)
Now this is the result I got (note that I left the central part empty)
- no matter if I used a picture that looks like a combo for the textview (it's just a 9 patch I had handy) and the images don't match with yours...
By using this layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ccc"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:layout_margin="4dp"
>
<ImageButton
android:id="#+id/imgBack"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
<ImageButton
android:id="#+id/imgFore"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_toRightOf="#id/imgBack"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
<ImageButton
android:id="#+id/imgExit"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_toRightOf="#id/imgFore"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
<ImageButton
android:id="#+id/imgHome"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_toRightOf="#id/imgExit"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
<ImageButton
android:id="#+id/imgFind"
android:layout_width="32dp"
android:layout_height="24dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
<TextView
android:id="#+id/txtAddress"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgHome"
android:layout_toLeftOf="#id/imgFind"
android:layout_centerVertical="true"
android:background="#drawable/combo_opt_m"
android:layout_margin="4dp"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="7.5"
android:background="#fff"
>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton
android:id="#+id/imgFoot"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"
android:layout_margin="4dp"
/>
</RelativeLayout>
</LinearLayout>
please note that, in my onCreate method, I used:
#Override
protected void onCreate(
final Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Make this activity, full screen
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
// Hide the Title bar of this activity screen
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.form);
}
In order to make the app fullscreen

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>`

How to fit my Layout to any Screen in Android

I'm building my own application game for Android, it's a Tic Tac Toe game.
my activities contains mostly ImageViews , all the images placed in the dir res\drawable-mdpi ONLY.
the rest of the drawable folders are empty.
my problem is that when i run the app on a 5.4 inch MDPI screen it works fine and it looks like this:
but when i run the app on another screen of different size for example this 4.65 inch XHDPI screen, it looks like this:
in the above activity i used LinearLayout and RelativeLayout, what should i do to fit my layout to any screen ?
thanks
thanks for editting the pictures
this is the code of the xml file of activity_board.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/board"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:text="#string/playersName"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:text="#string/playersPoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:text="#string/machinePoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp" >
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp" >
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="315dp"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="6dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:text="#string/gameNumber"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="390dp"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
Are you using RelativeLayout?
You should
1. use RelativeLayout as the base container
2. put the "Player" and "System" score inside the same horizontal LinearLayout so that they won't overlap
3. Put the "End game" button as an element which align parent bottom
The screenshots you attached shows that it's a problem caused by the soft status bar. RelativeLayout would help and you should try to prevent hard-coding the dimensions in numbers but making the auto-adjust in RelativeLayout using margins, "layout_toLeftOf", "layout_toRightOf" and etc.
Create a drawable folder, just the word "drawable", in res and put your game images in there. That will make the game images the same across every device density.
Without looking at your XML, I would agree that you're probably using hardcoded dp values instead of sizing the layout with math, ie, weights, match_parent, alignParentRight, etc.
I have adjusted your XML to be easier. I did not plug it into a previewer or anything.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="ADJUST ME"
android:layout_marginRight="ADJUST ME"
android:background="#drawable/board"
android:orientation="vertical" >
<!-- Scoreboard -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:layout_alignParentLeft="true"
android:text="#string/playersName"
android:textSize="30sp" />
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/players_name"
android:text="#string/playersPoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/machines_name"
android:text="#string/machinePoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:layout_alignParentRight="true"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="ADJUST ME" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/gameNumber"
android:textSize="25sp" />
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>

Android - text overlapping in landscape but not portrait

So i have a small issue. When I am in portrait mode and click on an item, the conformation page comes up and its fine. but when you turn it landscape, some text is overwritten but the button. See picture:
Overlapping
However if I click on the item in landscape, its not overlapping. Can anyone see where im going wrong.
Below is the landscape code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment_one_click_reservation_details_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/fragment_one_click_message_layouts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include layout="#layout/fragment_one_click_message_layout" />
<ImageView
android:id="#+id/fragment_one_click_horizontal_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#color/thin_line" />
<LinearLayout
android:id="#+id/fragment_one_click_reservation_detalis_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/fragment_one_click_reservation_number_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fragment_one_click_reservation_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_one_click_reservation_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_number_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_message_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_message_text"
android:textColor="#color/one_click_reservation_number_text"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fragment_one_click_reservation_store_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fragment_one_click_reservation_number_text"
android:text="#string/fragment_one_click_reservation_store_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_store_name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_store_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_store_text"
android:text="TEST TEST TEST TES"
android:layout_toLeftOf="#+id/fragment_one_click_cancel_reservation_button_tablet_land"
android:textStyle="bold" />
<TextView
android:id="#+id/fragment_one_click_reservation_until_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fragment_one_click_reservation_store_text"
android:layout_marginTop="15dp"
android:text="#string/fragment_one_click_reservation_until_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_until_time_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_until_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_until_text"
android:textStyle="bold" />
<Button
android:id="#+id/fragment_one_click_cancel_reservation_button_tablet_land"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:background="#drawable/one_click_cancel_red_button"
android:text="#string/one_click_button_cancel_reservation" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/fragment_one_click_store_details_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/fragment_one_click_store_details_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey"
android:padding="10dp"
android:text="#string/one_click_store_details" />
</RelativeLayout>
<LinearLayout
android:id="#+id/fragment_one_click_reservation_until_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/fragment_one_click_reservation_details_sent_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_one_click_reservation_details_sent_text" />
<LinearLayout
android:id="#+id/fragment_one_click_reservation_mobile_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/fragment_one_click_reservation_mobile_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/fragment_one_click_reservation_mobile_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_mobile_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/fragment_one_click_reservation_email_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/fragment_one_click_reservation_email_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/fragment_one_click_reservation_email_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_email_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="#+id/fragment_one_click_cancel_reservation_button_tablet_port"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="#drawable/one_click_cancel_red_button"
android:text="#string/one_click_button_cancel_reservation" />
<RelativeLayout
android:id="#+id/fragment_one_click_reservation_my_account_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="#+id/fragment_one_click_reservation_my_account_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:text="#string/fragment_one_click_reservation_my_account_text_tablet" />
<Button
android:id="#+id/fragment_one_click_account_button"
style="#style/alternatesmallbutton"
android:layout_width="140dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_marginTop="4dp"
android:text="#string/one_click_my_account" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/progress_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal" >
<ProgressBar
android:id="#+id/fragment_pdp_add_to_trolley_progress_collection"
style="#style/progress_spinner"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:visibility="visible" />
</LinearLayout>
<ImageView
android:id="#+id/fragment_one_click_horizontal_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#color/thin_line" />
</LinearLayout>
Set the WIDTH of the button to WRAP CONTENT and set PADDING for the button to make the button looks larger and set the button to the right of the ID of "Reserved At info text".

Android - Grid layout overlapping some of the text

So i am creating this app which will display products in a grid, so for example on a nexus 7 portrait view, it will be 2 in each row, while in landscape mode, there will be 4 in a row.
Each product has a imagine, and then a few textviews below it displaying a few information.
However the last two textviews, which display free delivery and number of special offers, seems to be overlapped by the next image below. Could anyone please help me pin point where im going wrong. The layout is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center"/>
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="2"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
You're missing a namespace declaration as well as a root layout. You need a root layout to anchor everything else in. Depending on your needs, perhaps a LinearLayout would do the trick. Below I've wrapped everything in a vertically oriented linear layout. Let me know if that solves anything for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center" />
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:lines="2"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
</RelativeLayout>
</LinearLayout>

Categories

Resources