How to add image background to imageview - android

I want to create this Image
My work: I am getting this result
I have created this using
<ImageView
android:id="#+id/grid_img"
android:layout_width="150dp"
android:layout_height="150dp"
android:paddingBottom="3.5dp"
android:paddingLeft="3.5dp"
android:paddingRight="3.5dp"
android:paddingTop="3.5dp"
android:scaleType="fitXY"
android:background="#drawable/image_frame_arc"
android:src="#mipmap/image_1" />
how to overcame these space on all sides.

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ID_NAME"
android:src="drawable/IMAGE_NAME_YOU_WANT_TO_SHOW_FROM_DRAWABLEFOLDER"
/>
just replace "ID_NAME" with the name you desired and your desired image name which is in drawable folder. hopes it will fine.

What about doing like this as shown,
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/image_1"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="#drawable/image_frame_arc" />
</merge>

try something like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/grid_img"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#drawable/image_frame_arc"
android:padding="3.5dp"
android:scaleType="fitXY"
android:src="#mipmap/image_1"/>
<ImageView
android:layout_width="wrap_content"
android:background="#drawable/number"
android:layout_height="wrap_content"/>
</FrameLayout>

Related

How to remove padding from circular progressbar?

I have a circular ProgressBar where I want to place an image inside as shown in the screenshot, the circular progress bar have a default padding I guess ,So I need to remove it so both will have the same dimensions :
enter image description here
here is the code for the layout :
<?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="match_parent"
android:background="#drawable/dikritem"
android:orientation="vertical">
<ProgressBar
style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:layout_margin="0dp"
android:paddingStart="#null"
android:paddingTop="#null"
android:paddingEnd="#null"
android:paddingBottom="#null"
android:progress="100"
android:progressDrawable="#drawable/circlebackg"
/>
<ProgressBar
style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:paddingStart="#null"
android:paddingTop="#null"
android:paddingEnd="#null"
android:paddingBottom="#null"
android:progress="80"
android:progressDrawable="#drawable/circle"
/>
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tasbih_circ_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:padding="35dp"
android:src="#drawable/adkarbackground"
app:civ_border_color="#color/border"
app:civ_border_width="0dp" />
<Button
android:id="#+id/tasbih_circ_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:padding="40dp"
android:text="1"
android:textSize="60sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/adView">
<Button
android:id="#+id/tasbih_plus"
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_margin="20dp"
android:background="#drawable/adkarbackground"
android:text="+"
android:textSize="40dp" />
<Button
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/adkarbackground"
android:text="0"
android:textSize="40sp"
/>
<Button
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_margin="20dp"
android:background="#drawable/adkarbackground"
android:text="-"
android:textSize="40dp" />
</LinearLayout>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
</RelativeLayout>
is there any solution to remove the default padding ??
Using the current com.google.android.material.progressindicator.CircularProgressIndicator you can set app:indicatorInset="0dp" allowing you, for instance, to set a full circle as background which borders will match exactly with the progress indicator itself.
if you want to make your view little bigger than
Try Using Negative Padding like or try using scalex and scaley but use values greater than 1 in scale values. It will increase the scale of the view inside.
android:padding="-10dp"
android:scaleX="1.2"
try this in your progress bar code (xml file)
android:adjustViewBounds="true"
android:scaleType="fitXY"
view this link :
Android ImageButton crops on resize

Constrain object in RelativeLayout (under ConstraintLayout) above another object

I have 4 ImageViews (arrow key pictures) in a RelativeLayout.
I want to position the up arrow key above the left one (not exactly above), attached a sample layout here (The left one is what I want).
However, I don't want to use the tag android:layout_marginTop="165dp" as different devices have different screen sizes.
I just want to use android:layout_above="#+id/left", to perfectly position it above the left arrow. But when I do so, without using android:layout_marginTop, the outcome looks like this (what I do NOT want).
How do I make my arrow key arrangement look aligned correctly, on all devices?
Here is my XML:
<?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"
tools:context=".ControllerActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/up"
android:layout_width="84dp"
android:layout_height="96dp"
android:layout_above="#+id/left"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="165dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
app:srcCompat="#drawable/up" />
<ImageView
android:id="#+id/left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/up"
android:layout_toStartOf="#+id/up"
app:srcCompat="#drawable/left" />
<ImageView
android:id="#+id/down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/left"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/down" />
<ImageView
android:id="#+id/right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/up"
android:layout_toRightOf="#+id/up"
app:srcCompat="#drawable/right" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Thanks in advance.
First, i would like to point out that, that Relative layout where it is right now is redundant. So you can make it your parent layout instead of Constraint layout.
To accomplish what you want, remove alignParentTop on you up arrow.
So, your code will look like this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ControllerActivity">
<ImageView
android:id="#+id/up"
android:layout_width="84dp"
android:layout_height="96dp"
android:layout_above="#+id/left"
android:layout_centerHorizontal="true"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
app:srcCompat="#drawable/up" />
<ImageView
android:id="#+id/left"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/up"
android:layout_toStartOf="#+id/up"
app:srcCompat="#drawable/left" />
<ImageView
android:id="#+id/down"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/left"
android:layout_centerHorizontal="true"
app:srcCompat="#drawable/down" />
<ImageView
android:id="#+id/right"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/up"
android:layout_toRightOf="#+id/up"
app:srcCompat="#drawable/right" />
</RelativeLayout>

Layout used on different resolution devices

I wrote this login layout that fit perfectly on my device. My problem is that on another device will not be displayed correct because specified values are used for top, left margins.
What I need to do to be sure that constrains will be keeped on any device?
P.S. I have images for mdpi, hdpi etc.
The code is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.NoActionBar"
tools:context="com.abc.abc.Login"
android:layout_gravity="center_horizontal">
<RelativeLayout android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="710dp"
android:gravity="center_horizontal">
<RelativeLayout android:id="#+id/login_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView android:id="#+id/login_button"
android:src="#drawable/login"
android:layout_marginTop="588dp"
android:layout_width="360dp"
android:layout_height="53dp" />
<ImageView android:id="#+id/email_and_password"
android:src="#drawable/email_and_password"
android:layout_marginTop="465dp"
android:layout_width="362dp"
android:layout_height="107dp" />
<ImageView android:id="#+id/separator"
android:src="#drawable/separator"
android:layout_marginStart="169dp"
android:layout_marginTop="412dp"
android:layout_width="25dp"
android:layout_height="12dp" />
<ImageView android:id="#+id/facebook_button"
android:src="#drawable/facebook"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/google_button"
android:src="#drawable/google"
android:layout_marginStart="196dp"
android:layout_marginTop="383dp"
android:layout_width="166dp"
android:layout_height="66dp" />
<ImageView android:id="#+id/dont_have_an_account"
android:src="#drawable/dont_have_an_account"
android:layout_marginStart="54dp"
android:layout_marginTop="665dp"
android:layout_width="255dp"
android:layout_height="19dp" />
<ImageView android:id="#+id/logo"
android:src="#drawable/logo1"
android:layout_marginTop="80dp"
android:layout_width="220dp"
android:layout_height="219dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</RelativeLayout>
Try not to use marginTop on all the views. Instead set the top most view with a marginTop and then all the images below them can be placed by android:layout_below="<imagView id>" and with some marginTop relative to the view above and not the parent.
You can check this answer

How to create a Concave view on edit text android

I am trying to achieve the view present in the below picture
I tried all possible solution that I found but didn't worked for me
My tried code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/fab_margin">
<com.pkmmte.view.CircularImageView
android:layout_width="105dp"
android:layout_height="105dp"
android:src="#drawable/des"
android:elevation="1dp"
app:border="true"
app:border_color="#864543"
app:border_width="8dp"
app:shadow="false"
android:id="#+id/view" />
<TextView
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="#435467"
android:layout_alignBottom="#+id/view"
android:layout_alignParentStart="true"
android:layout_marginStart="50dp"
android:foregroundGravity="center"
android:layout_marginEnd="#dimen/fab_margin"/>
</RelativeLayout>
I have tried below link ticked ans and also try to manipulate it according to my view but didn't succeed
How to create EditText with rounded corners?
Is I am on right way? This cant be achieved by making a XML in drwable and use it as background??
Make TextView lower than ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="105dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.pkmmte.view.CircularImageView
android:layout_width="105dp"
android:layout_height="105dp"
android:src="#drawable/des"
android:elevation="1dp"
app:border="true"
app:border_color="#864543"
app:border_width="8dp"
app:shadow="false"
android:id="#+id/view" />
<TextView
android:layout_centerVertical="true"
android:text="111"
android:textColor="#000000"
android:paddingLeft="55dp"
android:gravity="left|center_vertical"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="50dp"
android:background="#FFFFFF"/>
</RelativeLayout>

Why the height of the scroll view is longer than the actual content

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/splash_bg" />
<ImageView
android:id="#+id/photo_area"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/share_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_area"
android:layout_marginLeft="20dp"
android:text="#string/share_title"
android:textColor="#android:color/white" />
<EditText
android:id="#+id/share_content"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/share_title"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:background="#drawable/custom_textarea"
android:gravity="top|left"
android:hint="default message" />
<ImageView
android:id="#+id/share_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/share_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/photo_taken_btn_submit" />
</RelativeLayout>
</ScrollView>
This is the xml of the layout. The photo_area by default do not have image set but it will download a picture from internet and set on it. The problem is the height of the content view is longer than it should be, so there is a lot of empty space at the end . I try to removed the background in linearlayout, the height reduced a bit but still there are some empty space how to fix it? Thanks
use android:adjustviewbound = "true" in the imageview xml fix the problem.

Categories

Resources