Develop Reference

How to not crop ImageView inside a LinearLayout?

Hi, I'm trying to make something like this
And this is what I get
This is the xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_marginHorizontal="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/category_item_background"
android:clickable="true"
android:focusable="true"
android:layout_marginTop="50dp"
android:orientation="vertical"
android:paddingBottom="20dp">
<ImageView
android:id="#+id/planetImage"
android:layout_marginTop="-50dp"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/earth_transparent"
/>
<TextView
android:id="#+id/planetName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"
android:textColor="#color/white"
android:text="Mars"
android:fontFamily="#font/assistant_extrabold"
android:textSize="30dp"/>
<TextView
android:id="#+id/planetViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:fontFamily="#font/assistant_extrabold"
android:text="155 views"/>
</LinearLayout>
</LinearLayout>
The image is cropped and I can't figure out how to predict that.
I don't care about colour difference right now, I just want to set something, so it doesn't crop the image.

just put imageview outside
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#drawable/category_item_background"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:paddingBottom="20dp">
<TextView
android:id="#+id/planetName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:fontFamily="#font/assistant_extrabold"
android:gravity="center_horizontal"
android:text="Mars"
android:textColor="#color/white"
android:textSize="30dp" />
<TextView
android:id="#+id/planetViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/assistant_extrabold"
android:gravity="center_horizontal"
android:text="155 views" />
</LinearLayout>
<ImageView
android:id="#+id/planetImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:background="#color/black"
android:src="#drawable/earth_transparent" />
</RelativeLayout>

How to a circular Image on ImageView and relative layout using xml [duplicate]

This question already has answers here:
ImageView in circular through XML
(31 answers)
Closed 2 years ago.
How to add a circular image on Image view as the below image:
and this is the code I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="3dp"
card_view:cardBackgroundColor="#color/colorwhite"
card_view:cardCornerRadius="8dp"
card_view:cardUseCompatPadding="false"
card_view:elevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/flag"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
android:src="#drawable/mac_img" />
<TextView
android:id="#+id/titleTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="85dp"
android:textStyle="bold"
android:textColor="#color/colorwhite"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
as I am trying also add the a text view like is shown in the image like the Closed, So all I need I want the way to do this as to put widgets like this way as in the figure..

Ok good I solved it by adding some margins I hope someone give me a recommendation about this, and this is the full code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<androidx.cardview.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="3dp"
card_view:cardBackgroundColor="#color/colorwhite"
card_view:cardCornerRadius="8dp"
card_view:cardUseCompatPadding="false"
card_view:elevation="15dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/flag"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitXY"
android:src="#drawable/mac_img" />
<TextView
android:id="#+id/titleTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="85dp"
android:textStyle="bold"
android:textColor="#color/colorwhite"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<com.cuboid.cuboidcirclebutton.CuboidButton
android:layout_width="70dp"
android:layout_height="70dp"
app:cub_border_color="#color/color_64b5f6"
app:cub_border_radius="4dp"
android:layout_marginTop="85dp"
android:layout_marginLeft="30dp"
app:cub_color="#color/colorwhite"
app:cub_hover_color="#color/color_0288D1"
app:cub_icon="#drawable/eat"
app:cub_riple_effect="true" />
</androidx.cardview.widget.CardView>
</LinearLayout>

layout_below not working in RelativeLayout

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.

Text field or button appears on outside of design?

with the following code i had trouble adding text view or buttons. Every time i try it appers on the design page that the button is on the outside of the phone. i inserted a picture to show what i mean on design page.
http://postimg.org/image/dtqbnoqxv/
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d1cbcb">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#767eca">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="label"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"></Button>
</LinearLayout>

Try adding android:orientation="vertical" or android:orientation="horizontal" of LinearLayout according your desire.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d1cbcb"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#767eca">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="label"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"></Button>
</LinearLayout>

place a linearLayout in center of a wrap_content relativeLayout

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"/>