I have some imageview in to this rounded LinearLayout. here is my simple code:
<LinearLayout
android:layout_width="128dp"
android:layout_height="128dp"
android:id="#+id/point_image_table1"
android:orientation="vertical"
android:drawable="#drawable/image_view_style"
android:layout_below="#+id/repoint_p_name"
android:weightSum="4">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/imageView61"
android:layout_marginBottom="1dp"
android:src="#color/realRed"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView71"
android:layout_marginRight="1dp"
android:layout_marginEnd="1dp"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView51"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="1dp"
android:layout_marginStart="1dp"
android:scaleType="centerCrop"
android:id="#+id/imageView81"
android:src="#drawable/pinpoint_logo_large"/>
</LinearLayout>
but Images corner covered the LinearLayout corner and finally border if LinearLayout has'nt seen.
how can I fix it? i need to set some imageview in to linear layout and also i need to set border and rounded corner to linearlayout.
Thanks.
Edit: I want to have something like this( four images in to the rounded corner layout):
I suggest you to use cardview with multiple images it will be easy to get collage view,try this way
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
card_view:cardCornerRadius="10dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="300dp">
<LinearLayout
android:id="#+id/left_container"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="150dp"
android:layout_height="300dp"
android:orientation="vertical">
<ImageView
android:id="#+id/dog"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_left_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:background="#drawable/mmm" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_container"
android:layout_width="150dp"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/left_container"
android:orientation="vertical">
<ImageView
android:id="#+id/top_right_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_right_image"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="0"
android:background="#drawable/mmm" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
OUPUT
First you want to create a simple drawable and use this code. You can change the width or the stroke and colour to your choosing. The radius can also be simplified to android:radius=dpValue.
?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
Once you've created this you can then assign it as the background of your imageView with:
android:background="#drawable/yourDrawableName"
I'd maybe try making your image views wrap_content. You should also try setting a 0dp on the height of your imageviews.
Hope this helps.
Related
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"/>
I have this recyclerview, and the background is made with imageviews. I have these two situations in portrait and landscape. How do I fill the white space there with a new imageview or something with the same color?
And this is my xml:
<?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"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
Tried several ways, but I'm just not able to make this work. #+id/home_imageview_superbackground this is the imageview I want to put on the left of each background imageview to fill that space in the landscape. Thank you for the help.
Please try this one
<?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"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/home_imageview_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:contentDescription="Background image" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
</RelativeLayout>
You can also use android:scaleType="centerCrop".
Hope this will help you..If still you face problem please inform me...
<ImageView
android:layout_width="match_parent"
.... />
Also you can use scaleTypeattribute
First, the fill_parent is deprecated times ago, you should use match_parent instead. Then, you have also to use scaleType when you're working with ImagesView to define how the image looks on the screen. In your case, working with scaleType = "fitXY" solve your problem.
How your code should be :
<?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">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
Try this code
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="horizontal">
<ImageView
android:id="#+id/your_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitEnd"
android:layout_alignParentStart="true"
android:background="#drawable/green_gradiant"
android:padding="10dp" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:text="Hello Three"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</FrameLayout>
And create this drawable file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:angle="0"
android:startColor="#64FFDA"
android:centerColor="#4464FFDA"
android:endColor="#0064FFDA"/>
</shape>
</item>
</selector>
How to create a android Layout where you add a smaller imageView on Top of another Image View. but only half way as the image below.
Thank.
this is the sample I try but it does not work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageCover"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/big_cover_img" />
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#+id/imageCover"
android:layout_centerHorizontal="true"
android:src="#drawable/profile_pic" />
<!-- android:layout_alignBottom="#+id/imageCover" -->
</RelativeLayout>
Use FrameLayout as parent and LinearLayout as child with weight property :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageCover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/big_cover_img" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Set the second view to be below the first then set top margin of the bottom view to -50 dp or whatever value you want it to overlap
This is my XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context="com.al.fullbodyxrayscanner.SaveImage" >
<ImageView
android:id="#+id/temp_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="#+id/img_overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:alpha="0.5"
android:scaleType="matrix"
android:src="#drawable/body_xray"
android:visibility="invisible"
android:layout_toStartOf="#id/temp_image" />
</RelativeLayout>
I want to set img_overlay size(width and height) equal to the size of temp_image. temp_image is set from the bitmap created at run time.
Use This:
<ImageView
android:id="#+id/img_overlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:alpha="0.5"
android:scaleType="matrix"
android:src="#drawable/body_xray"
android:visibility="invisible"
android:layout_toStartOf="#id/temp_image" />
when you set your image-view's width or height to wrap_content it will stretch as your image.
for example I want the button's margin to be 1/4 of the screen width (in pixels), what should I do? I prefer to change something in layout xml file instead of coding.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Use weightSum and layout_weight to achieve this.
For e.g
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100"
android:visibility="visible" >
<Button
android:id="#+id/sign_in_button"
android:layout_weight="25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="testing" />
</LinearLayout>