I'm trying to make border of ImageView which should be for example 25% blue/bold and 75% gray/thin. Let's say something like this:
To obtain simple border I am using:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp"
android:color="#A7A9AC"/>
</shape>
what gives me only gray/thin border.
But how to achieve example which was presented above? Probably it should be done in Java part, because border percentage is variable, so it has to be done dynamically. Someone adviced me to create custom Shape class, and use ShapeDrawable. But I do not know how to do it. Any ideas or examples?
I was working on a similar problem, I think this could help:
https://github.com/PhilJay/CircleDisplay
just change the color of the border, remove the text, and disable the animation and you will have what you want
Edit:
Something like this
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.philjay.circledisplay.CircleDisplay
android:layout_width="100dp"
android:layout_height="100dp"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"/>
</FrameLayout>
The (com.philjay.circledisplay.CircleDisplay) depends on the path where you put the class of course.
In case the images are not always circles you can use this library:
https://github.com/vinc3m1/RoundedImageView
Related
I have designed a UI in FIGMA that looks like the below image
And when I am trying the same in android studio, it doesn't look good.
Below is the code I am using
<LinearLayout
android:id="#+id/dark"
android:layout_width="364dp"
android:layout_height="46dp"
android:layout_marginTop="36dp"
android:background="#drawable/bg_layout"
android:elevation="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/night"
android:layout_gravity="center_vertical"/>
</LinearLayout>
The UI looks like this
How can I achieve the design which I created using Figma?
Thank you in advance.
To implement the design, material card view provides you with most of the features.
The Elevation: app:cardElevation="dp"
The Outline : app:strokeWidth="dp" specifying the width
The Outline Color: app:strokeColor="#color/" specifying the color
The Corner Radius: app:cardCornerRadius="dp" specifying the
radius.
Like:
<com.google.android.material.card.MaterialCardView
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"
app:cardCornerRadius="#dimen/corner_radius_8dp"
app:cardElevation="#dimen/elevation_4dp"
app:cardUseCompatPadding="true"
app:strokeColor="?attr/colorPrimary"
app:strokeWidth="#dimen/stroke_width">
<!--Content goes here-->
</com.google.android.material.card.MaterialCardView>
There are multiple ways to create such type of UI in Android.
You can create rounded drawable and place that drawable in background of image.
You can group the box with text in Figma and then export the same UI and use it in android. (You need to create two UI (enable/disable).
I hope you understand what I want to say.
Thank you.
Okey, so hello everyone.
I am pretty new to app developing.
Introduction:
In my app I have activity with RelativeLayout. In this layout I have zoomable FrameLayout. In this layout I have to have only one layout. In my case It is another RelativeLayout. Finally in this layout I have number of ImageViews. Purpose of this activity is show layers of map (drawables) via switches.
Code here:
<?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"
android:background="#color/colorDarkBlueGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.example.cotwcompanion.ZoomableView
android:id="#+id/zoomView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</RelativeLayout>
</com.example.cotwcompanion.ZoomableView>
<!-- Here are other layouts -->
</RelativeLayout>
Problem:
My problem is more or less visual. I would like to show these layers (1:1 ratio) as big as display allows (vertically). Therefor I need to overlap display's width.
What I need It to look like:
IMAGE
What I have tried:
I thought FrameLayout would do it. So I tried to set its width
and height programmatically, so It fits screen height and has
the same width, because of 1:1 ratio mentioned before. If I try to log these dimensions, it seems like all is set. Because
of match_parent attribute in ImageViews and their parent RelativeLayout, It should therefor do everything else and stretch these Views to fill FrameLayout. But everything just
only fits screen width.
Image of result here:
IMAGE
Code here:
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(height, height);
FrameLayout frame = findViewById(R.id.zoomView);
frame.setLayoutParams(lp);
I tried the same method with normal FrameLayout but got same
result.
I also tried to exchange FrameLayout with
HorizontalScrollView and custom zoomable ImageView. This worked more or less well, but problem was when I zoomed the map.
Horizontal scroll disrupt every movement with zoomed map. Therefor I
tried to create custom HorizontalScrollView with methods to
disable scroll. Even when I catched zoomed state from ImageView
and set scroll to notEnabled, It still did not work.
And there you go. Like I said zooming methods and everything other works. I just need to somehow have bigger View than display allows.
EDIT [21.11.2020]:
So as Daxi suggested I tried to change RelativeLayout in ZoomableLayout to ConstraintLayout. I also changed ZoomableLayout to extend from ConstraintLayout. That almost solved my problem. However I could not scroll to left and right. I could only zoom. So I took one of my last tried solution and wrapped ZoomableView with HorizontalScrollView. Everything seemed okey. However I now just cannot scroll to the very 'start' or 'end' of the ImageView. It seems like I can only scroll within the base width of HorizontalScrollView and not width of ImageView. So I now need to solve this problem.
Code here:
<RelativeLayout>
<HorizontalScrollView>
<ZoomableView extends ConstraintLayout>
<ConstraintLayout>
<ImageView/>
.
.
</ConstraintLayout>
</ZoomableView>
</HorizontalScrollView>
.
.
</RelativeLayout>
I am so sorry if this is somehow a duplicate of other problem already described on stackoverflow, but I searched for solution over two days now and still did not find any. Maybe I am bad finder. If this will be the case, feel free to tell me. I will delete it if needed.
If there will be some pretty fine answer and solution I would really appreciate It. Thank you.
Would you consider using ConstraintLayouts? If yes, you could use it like this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</androidx.constraintlayout.widget.ConstraintLayout>
However, I am not sure how exactly this will interact with your ZoomableView
I have a viewpager that recreate parallax effect using ViewPager.PageTransformer()
I have a clip art made of several pieces (clouds, tree etc...) that i have to place very precisely on a layout of one of my fragment, so can animate them later independently , but i'm unable to place any item precisely. On a relative layout, it seems that each time i move one items with the mouse, it goes either right , left, or top etc.., i want to be able to place them pixels by pixels, a bit like a puzzle
Is there any any layout (mspaint style) i could use that would let me place freely my item using my mouse for example, without having to obey any rules of placement ?
Thanks a lot
I have been able to use RelativeLayout in Android Studio to place items precisely. The images to tend to "snap" along grid lines when close, but I think that with careful mouse movement you can make it work. This will be very dependent upon the screen size and will not scale up/down well since it is using margins, but it may be what you need.
Here is the layout I tested with in Android Stdio 2.1. I hope this helps.
<?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:id="#+id/imageView1"
android:layout_width="219dp"
android:layout_height="219dp"
android:background="#00FF00"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="58dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="219dp"
android:layout_height="219dp"
android:background="#FF0000"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="53dp"
android:layout_marginStart="53dp" />
</RelativeLayout>
Is it possible to add a bitmap as border of an ImageView in android dynamically in Java?
I have already tried the following:
Image view in XML and border as shape the result is wrong I want to add bitmap in border.
You have got multiple options:
Place an other View with the border (also imageview) above your Imageview. Thay might be the simples solution. Just add an other view to your xml and make sure they are overlapping. (Use for example a Relative or FrameLayout as container)
Use a Layer List and draw a shape above a Bitmap and add that to your ImageView
Write a custom ImageView and use the Canvas to draw the Border in the overwritten onDraw method. E.g. canvas.drawRect(...) its pretty straightforward.
The simple way：
A drawable for ImageView's attr that android:foreground
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1px" android:color="#ff0000" />
<solid android:color="#android:color/transparent"/>
</shape>
Then XML,
<ImageView
android:id="#+id/unreserved_head_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="#drawable/shape_border"
/>
The simplest solution I found recently.
Try to use material theme in your app. Use "Theme.MaterialComponents.Light"
Then use image view inside and material card view.
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="8dp"
app:cardElevation="0dp"
app:strokeColor="#color/colorPrimary"
app:strokeWidth="1dp">
<ImageView/>//define you image view hear
</com.google.android.material.card.MaterialCardView>
With property stokeColor and strokeWidth you can have border on an image view and make it dynamic.
you can use 9 patch in andorid studio to make an image a border!
i was finding a solution but i did not find any so i skipped that part
then i go to the google images of firebase assets and i accidentaly discovered that they use 9patch
heres the link: https://developer.android.com/studio/write/draw9patch
you just need to drag where the edges are
its just like boder edge in unity
I have the Views attached to each other in the following order:
Activity->RelativeLayout->RelativeLayout->Text
When I change the Y of one of the Text attached to the inner RelativeLayout, parts of it are cut.
Here's a screenshot:
http://s28.postimg.org/ypmvrjz25/image.png
I'm coding purely in Java, no XML.
What's going on?
It looks like one layout is overlapping on another because the menu bar is pushing it down. If you just want the text centered I would suggest setting that in the parameters like so.
android:gravity="center"
This places the text in the center if that is what you want.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/textView12"
android:layout_gravity="center"
android:gravity="center_vertical|center_horizontal" />
</LinearLayout>
As #Jonathan Whalen suggested you probably have some overlap, I suggest you to change your relative layouts background color to see wich one is overlapping the text. Also try to not use fixed height for the layouts but use wrap_content instead, as fixed dims are frequently the cause of layouts overlap.