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"/>
Related
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)
I am trying to make a square Grid-layout(nested in a Constraint-layout), with all the sides equal to parent width, so that with any device, the user will have the biggest possible square on his screen.
Then I would like to have another four squares in that first square, which will be Linear-layouts with a background image, that will stretch according to the Grid-layout cell size.
Ideally, I would like to do this in XML. I am a beginner in android and excuse my maybe obvious question and mistakes in the following code, but I have been spending an awful amount of time on this, without progress. Any help is appreciated.
Below is my main.xml, where the cells have fixed dimensions. I tried messing with weight and gravity, but was unsuccessful. Just wondering if there is a simple way of making this code do what I want.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<GridLayout
android:id="#+id/foursquares"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="8"
android:orientation="vertical"
android:rowCount="8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/a1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="0"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="1"
android:background="#drawable/blacksquare"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/a2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="0"
android:layout_rowSpan="1"
android:layout_column="1"
android:layout_columnSpan="1"
android:background="#drawable/whitesquare"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/a3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="1"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="1"
android:background="#drawable/whitesquare"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:id="#+id/a4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_row="1"
android:layout_rowSpan="1"
android:layout_column="1"
android:layout_columnSpan="1"
android:background="#drawable/blacksquare"
android:orientation="horizontal"></LinearLayout>
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The main advantage of ConstraintLayout is allows you to make large and complex layouts with a flat view hierarchy. No nested view groups like inside RelativeLayout or LinearLayout etc. You can make Responsive UI for android using ConstraintLayout and its more flexible compare to RelativeLayout and Grid Layout.
ConstraintLayout allowing you to easily constrain any view to a percentage width or height. So i edited your code little bit. Have a look brother, hope this would help you.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="16dp">
<LinearLayout
android:id="#+id/a1"
android:layout_width="0dp"
app:layout_constraintWidth_percent=".48"
android:layout_height="0dp"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:padding="8dp"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/a2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent=".48"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:padding="8dp"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/a3"
android:layout_width="0dp"
app:layout_constraintWidth_percent=".48"
android:layout_height="0dp"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a1"
android:layout_marginTop="16dp"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/a4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent=".48"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#id/a2"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/a5"
android:layout_width="0dp"
app:layout_constraintWidth_percent=".48"
android:layout_height="0dp"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a3"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/a6"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent=".48"
app:layout_constraintHeight_percent=".3"
android:background="#drawable/blacksquare"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#id/a4"
android:orientation="horizontal">
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How can i get rid of these spaces that i marked with red ?
I tried to set padding to zero and nothing changes
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#+id/req_name" />
Note: android:layout_width="0dp" because it has constraints with another button and it expands with it.
Full xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="match_parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/req_pp"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#drawable/default_pp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/req_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintStart_toEndOf="#+id/req_pp"
app:layout_constraintTop_toTopOf="#+id/req_pp" />
<Button
android:id="#+id/req_accept_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="4dp"
android:text="Accept"
app:layout_constraintBottom_toBottomOf="#+id/req_delete_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/req_delete_btn" />
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="#+id/req_name" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
It's the shadow around the button in its background drawable. Create your own background and it will disappear. But keep in mind that when you setting android:background="#null" the button loses its touch animation, but it turns out that setting the background to anything at all fixes that border.
Also you can try to use: <Button android:minHeight="0dp" android:minWidth="0dp"
Or in your button's style:
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
Or try: android:includeFontPadding="false"
I have changed the constrain of the DELETE button to imageview, same as TextView constrain so i can use margin to adjust the space .
now i've putted android:layout_marginStart="14dp" but you can change it to fit your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="match_parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/req_pp"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/default_pp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/req_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="aaa gggg bbb"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintStart_toEndOf="#+id/req_pp"
app:layout_constraintTop_toTopOf="#+id/req_pp" />
<Button
android:id="#+id/req_accept_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="16dp"
android:text="Accept"
app:layout_constraintBottom_toBottomOf="#+id/req_delete_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/req_delete_btn" />
<Button
android:id="#+id/req_delete_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="15dp"
android:layout_marginEnd="4dp"
android:text="Delete"
app:layout_constraintBottom_toBottomOf="#+id/req_pp"
app:layout_constraintEnd_toStartOf="#+id/req_accept_btn"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/req_pp" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
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
I am trying to create a table like this one using GridLayout:
But so far I have only achieved this approach:
Using this code:
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:rowCount="3"
android:columnCount="4"
android:orientation="horizontal"
android:background="#drawable/table_border" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/negro"
android:layout_columnSpan="4">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Peso de Bala"
android:textColor="#color/white"
android:gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.59"
android:textColor="#color/negro"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="40"
android:textColor="#color/negro"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gramos"
android:textColor="#color/negro"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Granos"
android:textColor="#color/negro"/>
</LinearLayout>
</GridLayout>
The title seems to be centered correctly but the content is not well centered, what do I need to modify on my layout or what do I need to add for achieving this?, and also I don't know if I'm doing my <shape> correctly.
My shape code (drawable/table_border.xml) is like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/white"></solid>
<stroke android:width="5dp" android:color="#color/negro"/>
</shape>
The reason you are having trouble centering your text is that your view hierarchy doesn't support what you want to do; the cells in your GridLayout are only as wide as their widest child. If you are developing for API 21+ only, you could look into using weights for your cells.
I recommend re-thinking this layout and implementing it with ConstraintLayout instead of GridView. This will allow your layout to work on all API levels.
You can also achieve the black border by simply having a black background color on your ConstraintLayout's parent and a white background color on your ConstraintLayout itself.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:gravity="center_horizontal"
android:textColor="#fff"
android:text="Velocidad"/>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#fff">
<TextView
android:id="#+id/value1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:textSize="18sp"
android:text="383"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/label2"/>
<TextView
android:id="#+id/label1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="12sp"
android:text="Salida M/SEG"
app:layout_constraintTop_toBottomOf="#id/value1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/label2"/>
<TextView
android:id="#+id/value2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:textSize="18sp"
android:text="1253"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/value1"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/label2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="12sp"
android:text="Muzzle PIE/SEG"
app:layout_constraintTop_toBottomOf="#id/value2"
app:layout_constraintLeft_toRightOf="#id/label1"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/value3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:textSize="18sp"
android:text="310"
app:layout_constraintTop_toBottomOf="#id/label1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/label2"/>
<TextView
android:id="#+id/label3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:gravity="center"
android:textSize="12sp"
android:text="91 MTS M/SEG"
app:layout_constraintTop_toBottomOf="#id/value3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/label4"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/value4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:gravity="center"
android:textSize="18sp"
android:text="1017"
app:layout_constraintTop_toBottomOf="#id/label2"
app:layout_constraintLeft_toRightOf="#id/value3"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/label4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:gravity="center"
android:textSize="12sp"
android:text="100 YDS PIE/SEG"
app:layout_constraintTop_toBottomOf="#id/value4"
app:layout_constraintLeft_toRightOf="#id/label3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>