Is it possible to assign the left border to an image in like my attached image in which it have left strip border?
We need to assign the image to border or we can do it with border image ?
Can anyone please Help?
Thanks in advance.
Here is the sample image:
Result after apply the code:
You can easily achieve this by:
Method 1 - where you don't want to overlap that small part of the image:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="8dp"
android:layout_height="match_parent"
android:background="#FF0000" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/my_image" />
</LinearLayout>
Method 2 - where you want to overlap the image with the border:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/my_image" />
<View
android:layout_width="8dp"
android:layout_height="match_parent"
android:background="#FF0000" />
</RelativeLayout>
try this, I have done it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/tcit" />
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#336699" />
</RelativeLayout>
In your layout file, if you need it in landscape, just do it the same orientation which you need, and I have attached a snapshot for this, kindly have a look to it.
You can easily achieve this by creating one layout over another, setting the colors required in your background layout and adding a left margin to the upper layout.
You could always just set a background color (or even another image) to the ImageView and give it a left padding:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:paddingLeft="20dp"
android:src="#drawable/image_res" />
Related
I have a card view with app:cardCornerRadius="20dp"
<?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="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="20dp">
</android.support.v7.widget.CardView>
</LinearLayout>
Now I want add two vertical solid line to right of this.
like this:
enter image description here
Also vertical line must be have radius.
EDIT:
I write this:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="50dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#color/colorBlack" />
</RelativeLayout>
</android.support.v7.widget.CardView>
And get this result:
enter image description here
I need radius for line
You can add as many as you want by adding view, like this :
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_margin="#dimen/medium_margin"
android:background="#color/darkGray" />
You could use a View within your cardview xml, this will give you the vertical lines you require as xml.
see this post for ref: vertical line
You just need a 9-patch with two lines. That's it. Something like this:
If you target API 21+, then you don't even need to care about rounded corners. Background will be cut to CardView's outline anyway. If you target older Android versions, then you need to add these rounded corners to background drawable, but that doesn't change much.
I have an image of size 519px X 420px that I want to place at the top of my android screen. Now there is some empty white space between my image and the header that I want to remove at all.
XML code:
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Please see above screenshot and help me update my XML in such a way so that empty space between blue header and the image get completely vanished.
Thanks in advance!
Complete XML code as requested:
<FrameLayout 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"
tools:context="in.sitemakers.sitemakers.AboutFragment">
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
</FrameLayout>
Try this ImageView.ScaleType
Options for scaling the bounds of an image to the bounds of this view.
Use android:scaleType="fitXY"
Scale the image using FILL.
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="420dp" />
You can use android:scaleType="fitXY"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
</LinearLayout>
Updated XML code for posting image just after header. We have to give static height of the image along with android scaleType.
<FrameLayout 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"
tools:context="in.sitemakers.sitemakers.AboutFragment">
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="420dp" />
</FrameLayout>
Try this ImageView.ScaleType
Options for scaling the bounds of an image to the bounds of this view.
use android:scaleType="fitXY"
<ImageView
android:src="#drawable/sitemakers_laptops"
android:layout_width="match_parent"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
i want to create a button with green color background and a white line in center, like in the image.
If you want to use a 9 patch (name it btn_green.9.png - mind the extension!), put it in your /res/drawable-mdpi folder.
You can use this one:
This is how it is shown in the draw9patch tool:
This is how to add it:
<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"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="96dp"
android:background="#drawable/btn_green"
/>
</RelativeLayout>
It only uses 1 View, so it's a superfast (the less Views, the better performances)!!
You can create an ImageButton with Background attribute, and then create a View for the line setting the margin attribute to move it the position you want.
This is a very fast xml, but you can start playing with it
<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">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF" /> </RelativeLayout>
If you want to make the button like that, you can use FrameLayout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#009900" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_gravity="center_vertical"
android:background="#FFFFFF" />
</FrameLayout>
The reason why i'm using FrameLayout is to overlap Views. so try this code, i hope it works.
I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here
Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width
Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.
Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.
I have this 9-patch picture "Imageview3"
I want to add in my activity. I want the red arms to matchs perfecty with the borders of the screen.
But when I do SCALE:fitXy here is what I obtain
so as you can seem it doesn't work, I tried all the scales, I tried to stretch the image but it never fits.
Here is my code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="324dp"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:paddingTop="150dp"
android:paddingRight="0dp"
android:src="#drawable/diviseur" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="407dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/a1"
android:visibility="visible" />
</FrameLayout>
</LinearLayout>
thanks for the help
Remove android:scaleType="fitXY" and keep android:layout_width="match_parent". Try it.
Make sure your actual image doesn't have a white border around it. As in, make sure the arms are at the very end of your image.
Instead of using android:src="#drawable/diviseur", try using android:background="#drawable/diviseur". And also consider using android:layout_weight="1" attribute.
Try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/foo"
/>