RecyclerView Item Template

RecyclerView Item Template - java

I have been struggeling the last 2 hours to get the layout of an RecycleView working the way I want it to. Basically all I want is that three items of the RecycleView fit onto one screen width, like this: Example
Where each of the boxes contains the image.
This is what it currently produces:
Current State
This is what I got:
listitem.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:cardCornerRadius="4dp"
app:cardMaxElevation="2dp"
app:cardElevation="1dp"
android:layout_centerInParent="true"
android:weightSum="3">
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="4"
android:rowCount="5"
android:layout_weight="1">
<ImageView
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_row="0"
android:layout_rowSpan="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:id="#+id/image_view"
android:src="#drawable/ic_launcher_background"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="4"
android:layout_rowWeight="2"
android:layout_gravity="center" />
<CustomFontTextView
android:layout_row="3"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_gravity="left"
android:gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Canada"
android:id="#+id/name"
android:textColor="#fff"
android:layout_marginLeft="20dp"
android:textSize="20dp"
android:autoSizeTextType="uniform"
android:autoSizeMinTextSize="24dp"
android:autoSizeMaxTextSize="48dp"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:layout_columnWeight="4"
android:layout_rowWeight="2"
android:layout_gravity="center" />
<CustomFontTextView
android:layout_row="4"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Canada"
android:gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:id="#+id/description"
android:layout_marginTop="10dp"
android:textColor="#8Fffffff"
android:layout_marginBottom="10dp"
android:autoSizeTextType="uniform"
android:textSize="16dp"
android:autoSizeMinTextSize="18dp"
android:autoSizeMaxTextSize="24dp"/>
</GridLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
And the activity:
<android.support.constraint.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.MainActivity"
android:background="#f2f2f2">
<android.support.v7.widget.RecyclerView
android:layout_marginTop="100dp"
android:layout_marginBottom="100dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/recyclerView"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
That is almost what I wanted but the items are now sized based on the length of the description. Instead I want the description to wrap if needed. Can someone elaborate on why this is happening an how to fix it?

why this is happening
You set the width of the RelativeLayout as wrap content. It makes the widh wrapped to the content as the name suggest.
How to fix it
You have to change it to a fixed value, say 200dp.
Here are some other things I have noticed in the provided layout:
You should consider using "match_parent" instead of "fill_parent" because it is deprecated since API level 8.
layout_centerInParent="true" have no effect in the CardView because it is already filled to the parent
Remove the line weightSum="3" in the CardView because it won't work on RelativeLayout

Related

Add an element outside a ConstraintLayout for my adapter

I'm trying to display cool dot when I want to notify new items. When i set negative margin or translation, the dot is cut, theses littles ilustration will make things a lot clearer:
What i want :
What I get :
Here's my layout xml :
<?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="240dp"
android:layout_margin="10dp"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal"
android:elevation="1dp"
android:background="#drawable/bg_element_list"
android:foreground="#drawable/effect_ripple"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/file_img"
android:layout_width="fill_parent"
android:layout_height="210dp"
android:paddingTop="10dp"
android:paddingBottom="5dp"
android:src="#drawable/ic_pdf"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/file_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20sp"
android:paddingEnd="20sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textAlignment="center"
android:textColor="#color/dark_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/file_img" />
<ImageView
android:id="#+id/file_new"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_newfile"
android:translationY="-22dp"
android:translationX="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Someone have an idea?
Thanks

Try this with your parameter's
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="210dp"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textColor="#727272"
android:textSize="20sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/userImageProfile"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignEnd="#+id/profileCard"
android:layout_marginEnd="-15dp"
android:elevation="8dp"
android:src="#mipmap/ic_launcher"
app:tint="#color/black" />
</RelativeLayout>

On the ConstraintLayout, set
android:clipChildren="false"
This will allow the ImageView to draw outside the ConstraintLayout. See the documentation.

If you use padding on the layout instead of layout_margin, and set clipToPadding as false, things will be able to draw within the padding area. Margin is really for required space outside of the View, padding is space inside it (where it draws its contents)

Uneven cell heights in final row of GridLayoutManaged RecylerView

I have a recycler view that can have it's layout manager changed with the click of a button. It can cycle through some LinearLayout managed stuff and some GridLayout managed items. They both work fine, but the on the grid views, the final row always has uneven heights.
Not the end of the world, but I'd like to fix it.
The cells have dynamic height based on the content length of the title of the game.
images
Many users with similar problems were due to constraint layouts, but I don't have any in these particular views
Here is one of the XMLs that represents my grid cell.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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="wrap_content"
android:layout_marginTop="#dimen/cell_top_bottom_marginDiv2"
android:layout_marginBottom="#dimen/cell_top_bottom_marginDiv2"
android:layout_marginLeft="#dimen/cell_side_marginDiv2"
android:layout_marginRight="#dimen/cell_side_marginDiv2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:paddingTop="#dimen/cell_top_bottom_paddingDiv2"
android:paddingBottom="#dimen/cell_top_bottom_paddingDiv2"
android:paddingLeft="#dimen/cell_side_paddingDiv2"
android:paddingRight="#dimen/cell_side_paddingDiv2"
android:id="#+id/large_game_list_row_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/foreground" >
<FrameLayout
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/ownership_tag_on_cell"
android:id="#+id/ownershipTagLayout"
android:layout_gravity="center_vertical|end"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</include>
<!--Console Image and Name-->
<LinearLayout
android:layout_gravity="center_vertical|start"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/consoleArtImageView"
android:scaleType="fitCenter"
android:contentDescription="Console Art"
android:layout_width="#dimen/list_item_console_decorator_image_box_dimension"
android:layout_height="#dimen/list_item_console_decorator_image_box_dimension" />
<View
android:layout_width="#dimen/cell_element_spacingDiv2"
android:layout_height="0dp" />
<TextView
android:textColor="#color/default_text_color"
android:id="#+id/consoleNameTextView"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="name"
android:textSize="#dimen/list_item_console_decorator_image_text_size" />
</LinearLayout>
</FrameLayout>
<View
android:layout_gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1.0" />
<!--Box art-->
<ImageView
android:src="#drawable/list_item_placeholder"
android:id="#+id/boxArtImageView"
android:layout_width="match_parent"
android:layout_height="#dimen/list_item_medium_image_box_dimension"
android:layout_gravity="center_horizontal"
android:layout_marginEnd="2.5dp"
android:layout_marginLeft="2.5dp"
android:layout_marginRight="2.5dp"
android:layout_marginStart="2.5dp"
android:contentDescription="BoxArt"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:adjustViewBounds="true" />
<!--Metadata (title, developer, action button)-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/firstLineTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
tools:text="Title"
android:layout_gravity="center_horizontal"
android:textColor="#color/default_text_color"
android:textSize="#dimen/cell_small_grid_title_text_size"
android:textStyle="bold"
android:paddingTop="#dimen/cell_top_bottom_padding" />
<TextView
android:id="#+id/firstSubLineTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/default_text_color"
android:textSize="#dimen/cell_subtitle_text_size"
android:maxLines="1"
tools:text="Dev"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<View
android:layout_gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1.0" />
<LinearLayout
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="#dimen/cell_top_bottom_padding"
android:paddingTop="#dimen/cell_top_bottom_padding">
<TextView
android:id="#+id/statusTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/cell_element_spacingDiv2"
android:background="#drawable/ownership_bubble_background"
android:maxLines="1"
android:paddingBottom="#dimen/bubble_top_bottom_padding"
android:paddingLeft="#dimen/bubble_side_padding"
android:paddingRight="#dimen/bubble_side_padding"
android:paddingTop="#dimen/bubble_top_bottom_padding"
tools:text="status"
android:textColor="#color/bubble_ownership_text_color"
android:textSize="#dimen/bubble_text_size" />
<TextView
android:id="#+id/priceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/price_bubble_background_gradient"
android:maxLines="1"
android:paddingBottom="#dimen/bubble_top_bottom_padding"
android:paddingLeft="#dimen/bubble_side_padding"
android:paddingRight="#dimen/bubble_side_padding"
android:paddingTop="#dimen/bubble_top_bottom_padding"
tools:text="Price"
android:textColor="#color/bubble_price_text_color"
android:textSize="#dimen/bubble_text_size" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

Android create specifc Layout (only XML)

I am new to XML and wanted to create a simple start page of a game. First I startet with the Android Studio 3.0 Layout maker and came up to something like this(second image). The biggest problem is to get the 3 ImageButtons on the bottom right. After lots of trying and google I couldnt find the solution, is it eaven possible with just XML code?
In my case until now it looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:cropToPadding="false"
app:srcCompat="#drawable/logo" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttons_style1"
android:textColor="#color/colorPrimaryFont"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/play"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textColor="#color/colorPrimaryFont"
android:background="#drawable/buttons_style1"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/rate"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="15dp"
android:layout_weight="0.33"
android:adjustViewBounds="false"
android:background="#drawable/button_style2"
android:cropToPadding="false"
android:scaleType="centerInside"
app:srcCompat="#drawable/settings" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/highscores" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/share" />
</LinearLayout>
</LinearLayout>
Is it possible to get this with XML?
Hopefully someone can help :D
EDIT tryied this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/logo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
but that looks like that:

Here's how I would do it:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/green">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/circle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
<TextView
android:id="#+id/play"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="PLAY"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/bigCircle"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<TextView
android:id="#+id/rate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="RATE"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/play"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<ImageView
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toLeftOf="#+id/rate"
app:layout_constraintRight_toLeftOf="#+id/space1"
app:layout_constraintDimensionRatio="1:1"
app:srcCompat="#drawable/ic_settings_white_24dp"/>
<android.support.v4.widget.Space
android:id="#+id/space1"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/settings"
app:layout_constraintRight_toLeftOf="#+id/trophy"/>
<ImageView
android:id="#+id/trophy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space1"
app:layout_constraintRight_toLeftOf="#+id/space2"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
<android.support.v4.widget.Space
android:id="#+id/space2"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/trophy"
app:layout_constraintRight_toLeftOf="#+id/share"/>
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space2"
app:layout_constraintRight_toRightOf="#+id/rate"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>
And the circle background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/green_dark"/>
</shape>
Obviously you'll have to replace the images and colors with your real images and colors, and you'll probably want to adjust the spacing, but this should get you started.
The important parts of the solution are:
For the top circle view, use a percentage width and an aspect ratio in order to make it a perfect circle that doesn't fill the whole screen
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
For the bottom row of images, use the center scaleType so that the image isn't stretched to fill the whole view
android:scaleType="center"
Note: the app:layout_constraintWidth_percent attribute requires that you use version 1.1.0 of the constraint-layout support library.

Add margin to main LinearLayout like below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
...
</LinearLayout>

Remove both inner linear layouts. Use constraints to connect elements, and margins for places where You want distance between elements and borders.
If You want an element to take all available space, except for some space on the sides, give it width of 0dp and connect with constraints to both sides.
For more info on the topic, read this
https://developer.android.com/training/constraint-layout/index.html
Like, for instance, add this to buttons:
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
Another example:
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"/>

How to align title,description and url in equal space

Here is a screenshot of layout as it currently appears on my screen:
Here is the xml code snippet for the layout:
<?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="match_parent">
<ImageView
android:id="#+id/icon"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_alignParentRight="true"
android:layout_marginRight="-10dp" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:height="20dp"
android:fontFamily="Cabin-Regular"
android:paddingLeft="10dp"
android:textColor="#E35B5B"
android:textSize="14dp" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:height="44dp"
android:fontFamily="Cabin-Regular"
android:paddingLeft="10dp"
android:paddingRight="100dp"
android:textColor="#2D2D2D"
android:textSize="16dp" />
<TextView
android:id="#+id/url_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_marginTop="50dp"
android:height="15dp"
android:paddingLeft="10dp"
android:paddingRight="80dp"
android:textColor="#BDBDBD"
android:textSize="10dp" />
</RelativeLayout>
Just want to have the three textviews properly aligned and have equal space among each other.

Here is your layout,
<?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="match_parent">
<ImageView
android:id="#+id/icon"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_alignParentRight="true"
android:layout_marginRight="-10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_toLeftOf="#+id/icon"
android:orientation="vertical"
android:weightSum="3">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="Cabin-Regular"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Title"
android:textColor="#E35B5B"
android:textSize="14dp" />
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/title"
android:layout_weight="1"
android:fontFamily="Cabin-Regular"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="Description"
android:textColor="#2D2D2D"
android:textSize="16dp" />
<TextView
android:id="#+id/url_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/title"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="URL"
android:textColor="#BDBDBD"
android:textSize="10dp" />
</LinearLayout>
</RelativeLayout>

Pawan Thakur Use the same paddingLeft for all test and layoutBelow like below
<TextView
android:id="#+id/url_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/desc"
android:height="15dp"
android:paddingRight="80dp"
android:paddingLeft="10dp"
android:text="url"
android:textColor="#BDBDBD"
android:textSize="10dp" />

here is the code. Try maximum to use LinearLayout instead of Relative. Relative layout are used in cases where 2 or more elements have to be overlapped each other. Don't include every elements in a single layout. Divide your design into different sections, and use LinearLayout for each section and within each section, include elements belonging to that section.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".25"
android:orientation="vertical"
>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#E35B5B"
android:fontFamily="Cabin-Regular"
android:textSize="14dp"
android:layout_weight="0.33"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center|left"
android:paddingLeft="10dp"
android:text="Google"
/>
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#2D2D2D"
android:fontFamily="Cabin-Regular"
android:textSize="16dp"
android:layout_weight="0.33"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center|left"
android:paddingLeft="10dp"
android:text="Google is a Search engine"
/>
<TextView
android:id="#+id/url_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/title"
android:textColor="#BDBDBD"
android:textSize="10dp"
android:layout_weight="0.33"
android:singleLine="true"
android:ellipsize="end"
android:gravity="center|left"
android:paddingLeft="10dp"
android:text="http://www.google.com"
/>
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="110dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</LinearLayout>

u can use a android:weight="" to child of relative layout

Create LinearLayout for title, description and url with vertical orientation and weightsum=3 in Layout and for each of them use width=wrap_content, height=0dp, weight=1.

Okey.. First remove android:height from each TextView and in last TextView you have set android:layout_marginTop="50 remove it.
Tip : Use LinearLayout if your want to show your all view vertically or horizontally. if you want to use RelativeLayout make sure you give margin and padding properly so they look good.

Use Linear layout as parent with weightsum and equally distribute weight amongs the child layouts. ex : If android:weightsum = "3" for parent then android:layout_weight = "1" for each child layout(if you want equal space for each one of the 3 child).
ps: dont forget to mention orientation for Linearlayout.

Just Check this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1
android:padding="10dp"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#E35B5B"
android:fontFamily="Cabin-Regular"
android:textSize="14dp"
android:text="Google"/>
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#2D2D2D"
android:fontFamily="Cabin-Regular"
android:textSize="16dp"
android:margin_top="5dp"
android:text="Google is a Search engine"/>
<TextView
android:id="#+id/url_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#BDBDBD"
android:textSize="10dp"
android:margin_top="5dp"
android:text="http://www.google.com"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"/>
</LinearLayout>
</LinearLayout>

Center button in a LinearLayout

I just want to center "CenterButton" (center of the root LinearLayout) but Androids just not cooperating..
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_weight="0.00"
android:padding="5dp"
android:background="#zegerg"
android:id="#+id/LinearLayout1">
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="151dp"
android:src="#mipmap/image_1"
android:contentDescription="#string/abcdef"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text !"
android:id="#+id/TextView"
android:paddingBottom="30dp"
android:textColor="#37a52c" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ProgressBar"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_text"
android:id="#+id/Button2"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
Tried putting it at the end of the XML but doesn't work because the other elements push it aside.. not really sure what's happening.

if you want to have all three first level children to be in equally-sized columns, then you need to add to all of them the followings attribute:
android:layout_width="0dp"
android:layout_weight="1"
(don't forget the dimension "dp" to the width parameter, otherwise the IDE will complain).
...
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#mipmap/image_1"
android:contentDescription="#string/abcdef"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="20dp">
....
EDITED:
If you want your CenterButton to overlap all the other views, then what you have to do is:
wrap everything in a relative layout with height equal to 200dp, as its first child
remove the button CenterButton from the current position and add it at the bottom of everything, still inside the relative layout, but below the linear layout
add those properties to the button to make it center in the parent
android:layout_centerInParent="true"
So finally you will have something like this (I have changed some resources):
<?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="200dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_weight="0.00"
android:padding="5dp"
android:background="#android:color/holo_orange_dark"
android:id="#+id/LinearLayout1">
<ImageView
android:id="#+id/ImageView1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/plus"
android:contentDescription="abcdef"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text !"
android:id="#+id/TextView"
android:paddingBottom="30dp"
android:textColor="#37a52c" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ProgressBar"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:id="#+id/Button2"
android:layout_gravity="center_horizontal" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button"
android:id="#+id/CenterButton"
android:layout_gravity="center_horizontal|center_vertical|center"/>
</RelativeLayout>

You can use weight for such purposes for child items. Make layout_width for all of them as 0dp and set layout_weight as 1.

Give the three children in the topmost linear layout a gravity of 1 and a width of 0.

It's not clear what exactly is your problem. However, here are some general notes :
To center a View or a Layout inside RelativeView use layout_centerInParent="true"
To make a Layout on top of other layouts use FrameLayout
The order of the views/layouts in your xml file is important. The one you write the last will be on the top (in our example : the FrameLayout or just the CenterButton should be written after the other views and layouts in your xml file)
To distribute the available space inside LinearLayout among its views use android:layout_weight="1" (change the value according to your needs)
you can play aground with this example :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="200dp">
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#fff"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/ImageView1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:src="#mipmap/ic_launcher" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:text="Text !"
android:textColor="#37a52c" />
<ProgressBar
android:id="#+id/ProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:progressTint="#37a52c" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text_text" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<Button
android:id="#+id/CenterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical|center"
android:text="Button" />
</FrameLayout>
</RelativeLayout>

Develop Reference

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

RecyclerView Item Template - java

Related

Add an element outside a ConstraintLayout for my adapter

Uneven cell heights in final row of GridLayoutManaged RecylerView

Android create specifc Layout (only XML)

How to align title,description and url in equal space

Center button in a LinearLayout

Categories

Resources