Hello, I tried to copy the Code of a tutorial, but it doesn't work out for me... The Layout_below won't move the text to underneath the picture, can somebody help?
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="#string/todo" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="#string/meal_name"
android:textSize="16sp"
android:textStyle="bold" />
</com.google.android.material.card.MaterialCardView>
your text view and image view are not inside RelativeLayout
replace below code with your code
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
android:id="#+id/parent"
app:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:layout_margin="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="130dp"
android:layout_height="150dp"
android:id="#+id/imgFood"
android:src="#mipmap/ic_launcher"
android:contentDescription="some text" />
<TextView
android:id="#+id/txtMealName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imgFood"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:text="cheese pizza "
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
close Relative layout using </RelativeLayout> after Textview
Related
I am using below XML code with card and RecyclerView but I am getting the text inside the card and upper side But I would like to see the text below the circle, what changes should I make in the following XML code?
Reference image consists with current and desire output image as
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">
<!--
grid items for RecyclerView
-->
<androidx.cardview.widget.CardView
android:id="#+id/myCardView"
android:layout_width="110dp"
android:layout_height="110dp"
app:cardCornerRadius="50dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="ABCD"
android:textSize="20sp"
android:textColor="#fff" />
</androidx.cardview.widget.CardView>
</RelativeLayout>
You can get the TextView out of the CardView in order to have the ImageView fully occupy the entire area of the rounded CardView
<?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="200dp"
android:gravity="center"
android:padding="5dp">
<!--
grid items for RecyclerView
-->
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/myCardView"
android:layout_centerHorizontal="true"
android:textColor="#fff"
android:text="ABCD"
android:textSize="20sp" />
<androidx.cardview.widget.CardView
android:id="#+id/myCardView"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerHorizontal="true"
app:cardCornerRadius="50dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</androidx.cardview.widget.CardView>
</RelativeLayout>
Preview
CardView can accept only 1 direct child so you need to wrap your views with another ViewGroup as following:
<?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="200dp"
android:padding="5dp">
<!--
grid items for RecyclerView
-->
<androidx.cardview.widget.CardView
android:id="#+id/myCardView"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:cardCornerRadius="50dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image"
android:layout_centerHorizontal="true"
android:text="ABCD"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
And then you can adjust gravity of your view to your needs.
<?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="200dp"
android:gravity="center"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:id="#+id/myCardView"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerInParent="true"
app:cardCornerRadius="60dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/myCardView"
android:layout_marginTop="0dp"
android:text="ABCD"
android:textAlignment="center"
android:textSize="20sp" />
</RelativeLayout>
I've got some TextView in a CardView, but when i try to set my TextView "text_lieu" below the TextView "text_nom", nothing happened they are confused. Can you help me please ? <3
Here my xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardCornerRadius="10dp"
android:orientation="vertical"
card_view:cardElevation="10dp"
android:layout_margin="10dp">
<TextView
android:id="#+id/text_nom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_gravity="start"
android:padding="20dp" />
<TextView
android:id="#+id/text_heure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:padding="20dp" />
<TextView
android:id="#+id/text_lieu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_below="#+id/text_nom"/>
</android.support.v7.widget.CardView>
A CardView extends a FrameLayout basically. That means that views are placed on top of each other, not in a linear fashion like in a LinearLayout. To do this you want to put your TextViews in a LinearLayout inside the CardView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardCornerRadius="10dp"
android:orientation="vertical"
card_view:cardElevation="10dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text_nom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_gravity="start"
android:padding="20dp" />
<TextView
android:id="#+id/text_heure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:padding="20dp" />
<TextView
android:id="#+id/text_lieu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_below="#+id/text_nom"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Note the orientation vertical in the linear layout.
If you want to keep the FrameLayout style, an item in it has the property android:layout_gravity which you can set to bottom to place an item in the bottom.
android:layout_below is only effective in a RelativeLayout.
You can put your views inside a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_nom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:padding="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_heure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:padding="20dp" />
<TextView
android:id="#+id/text_lieu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_nom"
android:padding="20dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Edit:
if (myTextView3.getText().toString().trim().isEmpty())
myTextView3.setVisibility(View.GONE);
else
myTextView3.setVisibility(View.VISIBLE);
Wrap the textviews in a LinearLayout. You can adjust them they are are, you dont need to do the layout_below. LinearLayout will take care of that for you.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardCornerRadius="10dp"
android:orientation="vertical"
card_view:cardElevation="10dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/text_nom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:padding="20dp" />
<TextView
android:id="#+id/text_lieu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"/>
<TextView
android:id="#+id/text_heure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
This is my grid item xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:id="#+id/griditem">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#ffffff"
android:textSize="15sp"
android:padding="5dp"
android:id="#+id/name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#ffffff"
android:textSize="15sp"
android:padding="5dp"
android:id="#+id/date"/>
</LinearLayout>
recyclerview in fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:foregroundGravity="center"
android:id="#+id/recentView"/>
</LinearLayout>
Recycleview config in kotlin:
recentView.layoutManager = GridLayoutManager(context,2)
My Layout output:
I dont want the extra space above and below my imageview
try this
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_account_circle"/>
Use android:scaleType="fitXY" in ImageView
I have a Relative Layout with 3 children.
1st is ImageView cover.
2nd is ImageView avatar center in parent and
3rd is TextView app name below avatar and center horizontal.
As in theory it should work but my layout not place text below avatar. What's wrong with RelativeLayout?
P/S: I've tried both android:layout_below="#+id/logo2" and android:layout_below="#id/logo2" but still didn't work!
Thank you!
Here is my xml 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="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>
And the result:
Change the parent Relative Layout height to match parent. It will work.
Like this
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
/>
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
</RelativeLayout>
try below code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/android_apple"/>
<ImageView
android:id="#+id/logo"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar"
android:layout_margin="5dp"/>
<RelativeLayout
android:id="#+id/profile_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/logo"
android:elevation="4dp"
android:layout_marginTop="64dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAA"
android:textStyle="bold"
android:layout_margin="10dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>
Try this.
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="10dp"
android:adjustViewBounds="true"
android:src="#drawable/android_apple" />
<ImageView
android:id="#+id/logo2"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:src="#drawable/default_avatar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/logo2"
android:layout_below="#+id/logo2"
android:text="AAAAAAA"
android:textStyle="bold" />
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo2"
android:layout_centerHorizontal="true"
android:text="AAAAAAA"
android:textStyle="bold"/>
You are using layout_below="#+id/logo2". Use layout_below="#id/logo2", It will work.
I have a listView, and view of each item of the list should be like this (a background image and group name) :
but when i set layout_centerInParent="true" to linearLayout, it placed in center of screen(not in center of image).like this :
and there is my xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/linear_category_name"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="16dp"
android:paddingLeft="16dp">
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"/>
</LinearLayout>
</RelativeLayout>
How can i place linearLayout in center of relaytiveLayout ??
For your scenario, I think it's a lot easier to use FrameLayout instead.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/gold_image"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/white_border"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gold"
android:textColor="#android:color/white"
android:textSize="18sp"/>
</LinearLayout>
</FrameLayout>
I've tested this and it looked exactly like what you're trying to achieve.
Try this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#444">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/test/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:text="Gold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Try this
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:src="#drawable/test"/>
<ir.dbasoft.test.myobject.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="18sp"
android:layout_centerInParent="true"
android:text="Gold"/>