Looking for Ways to Improve RecyclerView Preformance

Looking for Ways to Improve RecyclerView Preformance - java

I have a pretty complex view with many moving parts in a RecyclerView with an adapter that takes care of showing two different view types and "hiding" objects from the list in order to create "collapsing" comments. The code is all working and it displays fine, but it gets extremely laggy on flings downward or upward, and I really can't find a way to simplify my code and/or views. Here is a link to all the code and views
Comment.xml (view)
https://github.com/ccrama/Slide/blob/master/app/src/main/res/layout/comment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:orientation="vertical"
android:scrollbars="none">
<LinearLayout
android:id="#+id/next"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginBottom="8dp"
android:elevation="8dp"
android:orientation="horizontal" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/card_background"
android:clipChildren="false"
android:orientation="vertical"
android:paddingBottom="0dp"
android:scrollbars="none">
<LinearLayout
android:id="#+id/padd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="0dp"
android:scrollbars="none">
<LinearLayout
android:id="#+id/dots"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/activity_background"
android:orientation="horizontal">
</LinearLayout>
<include
android:id="#+id/dot"
layout="#layout/dot" />
<include
android:id="#+id/side"
layout="#layout/dot"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingRight="15dp" />
<LinearLayout
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<include
android:id="#+id/children"
layout="#layout/commentnumber"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal" />
<com.wefika.flowlayout.FlowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingRight="10dp">
<TextView
android:id="#+id/author"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="ccrama"
android:textColor="?attr/font"
android:textSize="?attr/font_commenttitle"
android:textStyle="bold"
/>
<TextView
android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="+49"
android:textColor="?attr/font"
android:textSize="?attr/font_commentinfo"
android:textStyle="bold" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="4 hours ago"
android:textColor="?attr/font"
android:textSize="?attr/font_commentinfo" />
<include
android:id="#+id/gild"
layout="#layout/gilded"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_gravity="center_vertical"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingLeft="5dp"
android:paddingRight="5dp" />
<include
android:id="#+id/flairbubble"
layout="#layout/flair"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:layout_toRightOf="#+id/pinned"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/pinned" />
<include
android:id="#+id/you"
layout="#layout/you"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toRightOf="#+id/pinned"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/pinned" />
<include
android:id="#+id/op"
layout="#layout/op"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toRightOf="#+id/pinned"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/pinned" />
</com.wefika.flowlayout.FlowLayout>
</RelativeLayout>
<me.ccrama.redditslide.ActiveTextView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:textColor="?attr/font"
android:textSize="?attr/font_commentbody" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal"
android:visibility="gone"
android:weightSum="4">
<ImageView
android:id="#+id/more"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="?android:selectableItemBackground"
android:padding="12dp"
android:src="#drawable/more"
android:tint="?attr/tint" />
<ImageView
android:id="#+id/downvote"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="?android:selectableItemBackground"
android:padding="12dp"
android:src="#drawable/downvoteicon"
android:tint="?attr/tint" />
<ImageView
android:id="#+id/upvote"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="?android:selectableItemBackground"
android:padding="12dp"
android:src="#drawable/upvoteicon"
android:tint="?attr/tint" />
<ImageView
android:id="#+id/reply"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:background="?android:selectableItemBackground"
android:padding="12dp"
android:src="#drawable/reply"
android:tint="?attr/tint" />
</LinearLayout>
<LinearLayout
android:id="#+id/replyArea"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
android:visibility="gone">
<EditText
android:id="#+id/replyLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="?attr/tint"
android:hint="Reply"
android:imeOptions="actionDone|flagNoEnterAction"
android:inputType="textMultiLine|textAutoCorrect|textCapSentences"
android:minHeight="30dp"
android:textColor="?attr/font"
android:textColorHint="?attr/font" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/discard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:padding="4dp"
android:text="DISCARD"
android:textColor="?attr/font"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="?android:selectableItemBackground"
android:padding="4dp"
android:text="SUBMIT"
android:textColor="?attr/font"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
<LinearLayout
android:id="#+id/innersend2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-6dp"
android:alpha=".56"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="8">
<ImageButton
android:id="#+id/imagerep"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/image"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/link"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/link"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/bold"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/bold"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/italics"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/italics"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/bulletlist"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/bullets"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/numlist"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/numbers"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/quote"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/quotes"
android:tint="?attr/tint" />
<ImageButton
android:id="#+id/size"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:height="48dp"
android:background="#00000000"
android:cropToPadding="false"
android:padding="8dp"
android:scaleType="fitCenter"
android:src="#drawable/fontsizedarker"
android:tint="?attr/tint" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
As you can see, it is a pretty complicated view with 3 main parts. The top "comment" area which is always visible, a menu which visibility is toggled, and a reply area where visibility is rarely used, but can still be toggled.
Here is a link to the adapter
Here is a link to the view the adapter is in (might be helpful!)
I'm hoping that the issue is somewhat simple, but I really can't figure out how to make the code any simpler.
Steps I've taken to fix the lag:
Remove all the code in the comment adapter, still noticeable lag
Remove menu and reply area from the view, improvement but still slow.
Any help/advice is greatly appreciated! Thank you!
EDIT: here's a video of the lag in question https://vid.me/kxrC

Related

Android UI broken when run

I am facing very strange problem, though I am beginner level on Android. after designed my layout file, when i run this android project by using physical device then i actually not find expected UI.
Here is the Layout UI and it's XML code:-
Design:-
XML Code:-
<?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"
tools:context=".activities.DetailedActivity">
<ImageView
android:id="#+id/detailed_img"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/detailed_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Product Detailed" />
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:elevation="10dp"
android:translationY="-50dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailed_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detailed_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="Product Name"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toStartOf="#id/my_rating"
android:fontFamily="#font/amethysta"
android:text="4.0"
android:textColor="#color/black"
android:textSize="16sp" />
<RatingBar
android:id="#+id/my_rating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:isIndicator="true"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
<TextView
android:id="#+id/detailed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="am following the standard example of how to add a RatingBar. To con The problem is that the number of stars doesn't seem to do anything a" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="Price"
android:textColor="#color/black"
android:textSize="21sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="$"
android:textColor="#color/purple_700"
android:textStyle="bold" />
<TextView
android:id="#+id/detailed_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="20"
android:textColor="#color/purple_700"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/add_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="7dp"
android:src="#drawable/plusicon" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/remove_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="7dp"
android:src="#drawable/iconminus" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/add_to_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:backgroundTint="#color/pink"
android:drawableLeft="#drawable/mycart"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Add To Cart"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/buy_now"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardview"
app:layout_constraintVertical_bias="1"
app:layout_constraintWidth_percent=".8" />
<Button
android:id="#+id/buy_now"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_shopping_cart_24"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Buy Now"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
</androidx.constraintlayout.widget.ConstraintLayout>
And this is my physical devices unexpected output:-
I don't understand why this output act like that and which is totally unexpected. how I resolve this issue.

Since your CardView is not constrained by the buttons at the bottom the CardView will take space beyond those buttons. In the screenshot provided from a real device, it is clear that there is not much space to completely accommodate the contents in the CardView hence it will be pushed beyond the button. You need to add constraints to CardView to align it with the bottom button also you need to add a ScrollView if there is more content that the screen can't fully accommodate. Using this layout may improve the UI
<?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"
tools:context=".activities.DetailedActivity">
<ImageView
android:id="#+id/detailed_img"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/detailed_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Product Detailed" />
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:elevation="10dp"
android:translationY="-50dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toTopOf="#+id/add_to_cart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailed_img">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detailed_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="Product Name"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toStartOf="#id/my_rating"
android:fontFamily="#font/amethysta"
android:text="4.0"
android:textColor="#color/black"
android:textSize="16sp" />
<RatingBar
android:id="#+id/my_rating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:isIndicator="true"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
<TextView
android:id="#+id/detailed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="am following the standard example of how to add a RatingBar. To con The problem is that the number of stars doesn't seem to do anything a" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="Price"
android:textColor="#color/black"
android:textSize="21sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="$"
android:textColor="#color/purple_700"
android:textStyle="bold" />
<TextView
android:id="#+id/detailed_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="20"
android:textColor="#color/purple_700"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/add_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="7dp"
android:src="#drawable/plusicon" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/remove_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="7dp"
android:src="#drawable/iconminus" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/add_to_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:backgroundTint="#color/pink"
android:drawableLeft="#drawable/mycart"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Add To Cart"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/buy_now"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
<Button
android:id="#+id/buy_now"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_shopping_cart_24"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Buy Now"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
</androidx.constraintlayout.widget.ConstraintLayout>

Horizontal LinearLayout won't match parent when using it under HorizontalScrollView

I want to create an horizontal scroll view for my app
(I have six buttons needed to be distributed equally), everything
works fine when using smaller display (nexus 6 1440x 2560), but when using bigger display (pixel C 2560x1800) I got some space. I remarked
that LinearLayout width cover only the content even though I'm using
match_parent in android:layout_width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.example.android.xieon_2.Home_dashboard">
<LinearLayout
android:id="#+id/main_vertical_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="30dp">
<HorizontalScrollView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageButton
android:id="#+id/bedroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="#drawable/round_shape"
android:src="#drawable/bedroom_icon" />
<ImageButton
android:id="#+id/kitchen_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/kitchen_icon" />
<ImageButton
android:id="#+id/living_room_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/living_room" />
<ImageButton
android:id="#+id/kids_room_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/kids_room_icon" />
<ImageButton
android:id="#+id/bathroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/bathroom_icon" />
<ImageButton
android:id="#+id/Guestroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/guest_room" />
</LinearLayout>
</HorizontalScrollView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="----------------------------------------------------------------"
android:textColor="#color/RoyalBlue"
android:textSize="20sp" />
<Button
android:id="#+id/control_but"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:text="Control" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<ImageView
android:id="#+id/temp_icon_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:src="#drawable/temperature_icon" />
<TextView
android:id="#+id/temp_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/temp_icon_2"
android:text="26"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/degree_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/temp_val"
android:text="°"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/pcnt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"
android:text="%"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/hum_val_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/pcnt"
android:text="85"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<ImageView
android:id="#+id/humidity_icon_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_toStartOf="#+id/hum_val_2"
android:src="#drawable/humidity_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/noise_icon"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/noise_unit"
android:src="#drawable/air_quality" />
<TextView
android:id="#+id/noise_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/noise_icon"
android:text="15"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/noise_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toEndOf="#+id/noise_val"
android:text="PPM"
android:textColor="#color/RoyalBlue"
android:textSize="28sp" />
<TextView
android:id="#+id/security_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/noise_val"
android:layout_alignParentEnd="true"
android:layout_marginEnd="12dp"
android:text="ON"
android:textColor="#color/RoyalBlue"
android:textSize="35sp" />
<ImageView
android:id="#+id/security_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="#+id/noise_val"
android:layout_toStartOf="#+id/security_state"
android:src="#drawable/home_security"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
app with large display
app with small display

how to center crop a background image of linear layout?

Hi i had to make a layout with card with recyclerview so for that i set an image as a background to linear layout but now i'm unable to center crop that image
My problem is that i cannot use imageview because using that the height of card increases as well and i don't want that so please if someone can assit me..
my xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:background="#drawable/club1"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/ellipse" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textColor="#color/White"
android:textSize="10sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textColor="#color/White"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textColor="#color/White"
android:textSize="15sp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textColor="#color/White"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/White" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_favorite_border_black_24dp" />
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/White" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

You can't center crop a background image of linear layout,
But you can achieve the same using these changes:
Replace you LinearLayout with RelativeLayout
Place a ImageView as a first child inside relative layout and use property for center crop.
<RelativeLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical">
<ImageView
android:scaleType="centerCrop"
android:src="#drawable/club1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
.....
......
</RelativeLayout>

If you Want to control The Image View Scale
you need to put it in ImageView As Src Not Background
You can use Frame layout To Achieve it
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/primary_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="19dp"
android:layout_marginRight="19dp"
android:layout_marginTop="15dp"
app:cardCornerRadius="115dp">
<ImageView
android:id="#+id/background_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:visibility="gone" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="210dp">
<ImageView
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:src="#drawable/playstore_icon" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="John Doe"
android:textSize="15sp" />
<TextView
android:id="#+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="checked in to"
android:textSize="10sp" />
<TextView
android:id="#+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:padding="5dp"
android:text="W south"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="9dp"
android:text="beach mumbai"
android:textSize="15sp" />
<TextView
android:id="#+id/fifth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/second_text"
android:layout_toRightOf="#+id/fourth_text"
android:text="30 mins ago."
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="85dp">
<TextView
android:id="#+id/sixth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:padding="10dp"
android:text="reply to abc............"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/favourite_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_close" />
<TextView
android:id="#+id/seventh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text="40 likes"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>

CenterCrop logic is baked inside ImageView. The correct solution is to extract it into a Drawable which wraps another Drawable and centerCrops it.

If you use CoordinatorLayout, then just to put your ImageView with centerCrop parameter to top.
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="centerCrop"
android:background="#drawable/background_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<include layout="#layout/header_main" />
<TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
android:background="#drawable/white_border_background"
app:tabIndicatorHeight="3dp"/>
</AppBarLayout>
<ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>

Adding textviews under buttons

I've made a lay-out with 10 buttons. In those buttons i have icons, showing what the information inside is about. Under those buttons, I want to have a word to clearify that again.
I have no idea how to add textviews and place them exactly under those buttons. I have tried it from the lay-out, by just pressing Textview and put it under the buttons, but that way my entire lay-out goes downwards, and the position is not right under it, but slightly left of it.
Hope someone can help me, every kind of help is appreciated.
This is my layout, the red circles are where I want the text to be.
Click here to see the image
This is my code:
<LinearLayout 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:orientation="vertical"
tools:context="com.example.rodekruis.MainActivity"
android:background="#drawable/rkzafbeelding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.rodekruis.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageButton1"
android:layout_width="40dp"
android:layout_height="50dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:layout_gravity="right"
android:src="#drawable/informatiebutton" />
<ImageView
android:layout_marginBottom="50dp"
android:layout_width="150dp"
android:layout_height="100dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:scaleType="fitStart"
android:src="#drawable/logoversiejuni" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="20dp"
android:layout_marginTop="0dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button10"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button10"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/afspraakbutton"
android:text=" Afspraak maken" />
<ImageButton
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/bezoektijdenbutton"
android:text=" Bezoek tijden" />
<ImageButton
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/contactbutton"
android:text=" Contact" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/routebutton"
android:text="Route" />
<ImageButton
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/meningbutton"
android:text="Uw mening" />
<ImageButton
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/vriendenbutton"
android:text="Word vriend" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/foldersbutton"
android:text="Folders" />
<ImageButton
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/specialistenbutton"
android:text="Specialisten" />
<ImageButton
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/bwcbutton"
android:text="Brandwond encentrum" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="30dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/nieuwsbutton"
android:text="Nieuws en Agenda" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="40dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button11"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/afspraakbutton"
android:text="Facebook" />
<ImageButton
android:id="#+id/button12"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/afspraakbutton"
android:text="Youtube" />
<ImageButton
android:id="#+id/button13"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/afspraakbutton"
android:text="Twitter" />
<ImageButton
android:id="#+id/button14"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignTop="#+id/button8"
android:layout_marginRight="5dp"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/afspraakbutton"
android:text="LinkedIn" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

You can try just using TextViews in your layout and add the icons to them as compound drawables using:
textView.setCompoundDrawables(null, yourIconDrawable, null, null);
This will put your drawable to the top of the text. To set the size of the drawable call setBounds(...) on it or use setCompoundDrawablesWithIntrinsicBounds(...) on the TextView. You can also set the padding with setCompoundDrawablePadding(int padding).

Can you try this code and check if it works?
<TextView
android:id="#+id/TextView"
android:layout_width="50dp"
android:layout_height="30dp" --> you can change the size that you want
android:layout_below="#+id/imageButton1" --> you can change the size that you want
android:textAlignment="center" />

Try this but this the not The right way to create this type of view the best way to create Using GridView
<LinearLayout
android:weightSum="3"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="113dp">
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="100dp">
<ImageButton
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title "/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="100dp">
<ImageButton
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title "/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="100dp">
<ImageButton
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title "/>
</LinearLayout>
</LinearLayout>

There are a lot of ways to achieve that, one of the most common ways is to use FrameLayout, and another common way is by using RelativeLayout which will give you the ability to predefine the views positions according to eachother(i.e which one is above the other), and following is a good example about how to use RelativeLayout to achieve your purpose:
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- Add Button 1 -->
<Button
android:id="#+id/button1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:src="#drawable/image1" />
<!-- Add Text 1 -->
<TextView
android:id="#+id/text1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#id/button1"
android:text="text1" />
</RelativeLayout>

layout looks different on real device than how shows in graphical layout of eclipse

I am working on the UI of my app.
The graphical layout I get in Eclipse while coding looks perfect and as that should be.
But when I launch the app either on an emulator or on a device, it gets distorted.
Every UI component, like Buttons, EditTexts and TextViews.
All the margins and paddings just get lost.
<LinearLayout
android:id="#+id/ll_grand_parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="fill_horizontal"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:id="#+id/ll_button_signin_create_account"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_marginLeft="7dp"
android:layout_marginTop="29dp"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
>
<Button
android:id="#+id/button_common_singin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/transparent_button"
android:gravity="center"
android:text="Sign In"
android:textColor="#FFFFFF"
android:textSize="13sp" />
<Button
android:id="#+id/button_common_create_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/colored_button"
android:gravity="center"
android:text="Create Account"
android:textColor="#FFFFFF"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/signin_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="5.24"
android:orientation="vertical"
android:visibility="gone" >
<LinearLayout
android:id="#+id/ll_parent_signin_email_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signin_email"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2" />
<TextView
android:id="#+id/textview_signin_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Email"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signin_email"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#hotmail.com"
android:textColorHint="#FFFFFF"
android:textSize="13dp" />
</LinearLayout>
<View
android:id="#+id/view_line_signin_email_password"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signin_password"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Password"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signin_password"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="*********"
android:password="true"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signin_logme_parent_button"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_loginme_button_lhs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button_signin_loginme"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7"
android:background="#219AC7"
android:gravity="center"
android:text="Login Me"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/textview_space_signin_logmebutton_rhs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".7" />
</LinearLayout>
<RelativeLayout
android:id="#+id/relative_layout_signin_parent_forgetpassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="14dp"
android:layout_marginTop="9dp"
android:visibility="visible" >
<TextView
android:id="#+id/textview_signin_forget_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="forget password"
android:textColor="#000000" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_signin_orline_draw_parent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_gravity="center"
android:layout_weight="4"
android:background="#000000"
android:padding="20dp" />
<ImageView
android:id="#+id/imageview_signin_or_drawline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="2"
android:src="#drawable/or" />
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_gravity="center"
android:layout_weight="4"
android:background="#000000"
android:padding="20dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signin_parent_loginwith_facebook"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="13dp"
android:layout_weight="1"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_space_signin_facebook_lhs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/imageview_signin_facebook_logo"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#drawable/fb" />
<Button
android:id="#+id/button_singin_facebook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#3B5998"
android:text="login with facebook"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textview_space_sigin_facebook_rhs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/signup_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="6"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signup_parentlayout_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_singnup_firstname"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_firstname"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="First Name"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_firstname"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="John"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
/>
<EditText
android:id="#+id/edittext_singup_email"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textSize="13dp"
android:visibility="gone" >
</EditText>
</LinearLayout>
<View
android:id="#+id/view_signup_line_draw_name_first_last_name"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signup_lastname"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_lastname"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Last Name"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_lastname"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4.47"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="Smith"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_singnup_email_parent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20sp"
android:layout_weight=".8"
android:background="#drawable/border"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/ll_signup_email_address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_email"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:text="Email Address"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_enteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
<View
android:id="#+id/view_signup_draw_line_email"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FFFFFF" />
<LinearLayout
android:id="#+id/ll_signup_reenter_email"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="10" >
<TextView
android:id="#+id/textview_signup_reenteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:gravity="center"
android:singleLine="true"
android:text="Re Enter Email Address"
android:textColor="#FFFFFF" />
<EditText
android:id="#+id/edittext_signup_reenteremail"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="4.49"
android:background="#android:color/transparent"
android:gravity="center"
android:hint="john#xyz.com"
android:password="false"
android:singleLine="true"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_signup_dob_button_parent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:divider="#drawable/divider"
android:gravity="center"
android:orientation="horizontal"
android:showDividers="middle"
android:visibility="visible"
android:weightSum="3" >
<Button
android:id="#+id/button_signup_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:text="BirthDate"
android:textColor="#000000"
android:textSize="10sp" />
<Button
android:id="#+id/button_signup_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:divider="#drawable/divider"
android:showDividers="middle"
android:text="BirthMonth"
android:textColor="#000000"
android:textSize="10sp" />
<Button
android:id="#+id/button_singup_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_button"
android:singleLine="true"
android:text="BirthYear"
android:textColor="#000000"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_singup_radio_gender_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:visibility="visible" >
<RadioGroup
android:id="#+id/radio_signup_radiogroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radiobutton_signup_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:text="male "
android:textColor="#FFFFFF"
android:textColorHighlight="#ED933E" />
<RadioButton
android:id="#+id/radiobutton_signup_female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="female"
android:textColor="#FFFFFF" />
</RadioGroup>
</LinearLayout>
<Button
android:id="#+id/button_signup_createaccount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_weight=".003"
android:background="#drawable/colored_button"
android:text="Create My Account"
android:visibility="visible" />
</LinearLayout>

These are the causes of your issue
android:weightSum="10"
You have to fill parent on every view and give each one a weight to just to make this work. You can achieve a good looking app that way but it is quite labor intensive and we have not even discussed text size among different devices.
Also other stuff like
android:layout_marginLeft="7dp"
Imagine a 10 inch tablet and a normal sized phone. Think of the different dimensions of the two and how your application will stretch . What happens if your turn your app sideways? How would it look then?
Go here and when your done reading it read it again.
http://developer.android.com/training/basics/supporting-devices/screens.html

We Keep Coding

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

Looking for Ways to Improve RecyclerView Preformance - java

Related

Android UI broken when run

Horizontal LinearLayout won't match parent when using it under HorizontalScrollView

how to center crop a background image of linear layout?

Adding textviews under buttons

layout looks different on real device than how shows in graphical layout of eclipse

Categories

Resources