How to create Circular View with shadow - android

I have needed to create view like and this view will be placed like
I am trying to create this using frame layout but finish with failure. How can i do this?

Either use a FrameLayout and add this as an imageview last with specified right and top layout margins for this view and some slightly larger right margins for the underlying layout.
Or a RelativeLayout and you align this view to the parent right using (layout_alignParentRight="true") and with margins as with previous example.
Example trying to mimic your layout a bit, tweak the margins and image to your needs:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bbbb00"
android:layout_marginRight="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#888899"
android:layout_margin="20dp">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="80dp"
android:src="#drawable/test"/>
</FrameLayout>

Related

Unable to add TextView into main xml Layout

I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>

Setting maximum height on RecyclerView

I have a dialog fragment that contains linear layout that involves a titleText above a RecyclerView, and at the very bottom, there's a button below the recyclerView.
Since a recyclerView expands or collapses based on the number of items the adapter sets, the button sometimes gets truncated and no longer appears to be on screen, since the recyclerView just covers the entire screen.
My question is, is there a way to set the maximum height of the recyclerView without ever hiding the button underneath. I also don't want to just give the view a random height just in case the recyclerView contains no items, and it would just be a blank section.
Please let me know if you've ever run into this issue, and how you resolved this. Thanks!
UPDATED
You can achieve this easily using layout weights. Here's an example:
<?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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="21sp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Submit"/>
</FrameLayout>
The Title and RecyclerView will wrap content according to contents and button will always take up bottom place.
I suggest using RelativeLayout as it handles the positioning of views for cases like yours, so that you can actually focus on main design.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Some title" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/title"
android:layout_above="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
Above XML code is the skeleton code for what you need. you can add margins and dimensions to control the spacing. But in any case (until you provide negative margins) your views will never overlap each other.
Main trick of using RelativeLayout is the ability to use XML tags like
android:layout_below or android:layout_above or android:layout_start
or android:layout_end which perfectly aligns your view the way you
want.

ImageView out of layout bounds

i have an imageview on a relative layout.
You can see in the screenshot :
How can i move the imageview(the weel) in the bottom-right corner, but display only 25 % part of it, like in the follow picture:
Thanks in advance !
<?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"
android:background="#E0E0E0"
>
<com.androidsources.welcomescreen.MyRecyclerView
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.anupcowkur.wheelmenu.WheelMenu
android:id="#+id/wheelMenu"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/wheel"/>
</RelativeLayout>
You can try something like this:
<com.anupcowkur.wheelmenu.WheelMenu
android:id="#+id/wheelMenu"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:paddingLeft="150dp"
android:paddingTop="150dp"
android:src="#drawable/wheel"/>
alignParentRight and alignParentBottom attributes will move your widget at the right bottom corner. Also try to change padding to achieve desired visual effect.
I know that there is already an answer, but for those who can't make the accepted answer work here is an alternative.
For some reason, I can't place part of the view outside the parent if I'm using RelativeLayout but when I tried LinearLayout it worked. So the solution I used is to enclose the view in a LinearLayout then position the LinearLayout on bottom-end of the parent.
<LinearLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/some_pic"
android:layout_marginStart="150dp"
android:layout_marginTop="150dp"/>
</LinearLayout>
Note the width and height of the image is not match_parent, using match_parent will shrink the image not displace it.

Android: Custom border for FrameLayout

I am trying to add a custom border to a framelayout. The framelayout is used as container for the fragment. Thus I want to display fragment with a border. The border should be external to framelayout and should not consume the space inside of framelayout. And it should adjust with change in screen size.
What i can think right now is some sort of custom ViewGroup, add ImageView for border. Use image processing to get the inside area of imageview and in that area inflate a frame layout.
I am looking for some easy way out.
The easiest solution for this would be to create a 9-patch drawable and set it as the background for your FrameLayout. I have created the below 9-patch drawable that you can use. Hope this suffice your requirement.
You can obtain the effect via layout XML using for example LinearLayouts with proper layout_weight, so your centre-most FrameLayout will expand to take up available space.
There are 4 drawables used: for top, bottom, left and right part of frame.
Check out this code:
<LinearLayout 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="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/border_left" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- FrameLayout content goes here -->
</FrameLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/border_top" />
</LinearLayout>
<ImageView
android:layout_width="wrap_conttXY"
android:layout_height="match_parght"
android:scaleType="fient"
android:src="#drwable/border_right" />
</LinearLayout>

Attach view to custom RelativeLayout in Android

I have a RelativeLayout with a match_parent main LinearLayout view and a secondary wrap_content LinearLayout which is initially not visible (gone).
The secondary one has to be shown at the top of the screen but declaring it at the beginning of the xml file, it is not shown even when set to visible because it's behind the main one.
That's why it's declared after the main LinearLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- FULL SCREEN CONTENT -->
</LinearLayout>
<LinearLayout
android:id="#+id/secondary_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/f_white_transparent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</LinearLayout>
</RelativeLayout>
I would like to create a custom RelativeLayout to be used in all the xml files where I can obtain the same behavior and I can be able to put whatever content under the main layout.
Is there any way to do it still using xml?
You are using a RelativeLayout but do not use the benefits of it. You can declare the wrap_content-Layout in first place and add the parameter android:layout_alignParentBottom="true" to it.
In your match_parent-LinearLayout you can add the parameter android:layout_above="#+id/secondary_layout" to make sure it will give space to the secondary Layout. This way gone will work, too.

Categories

Resources