How to make a Window-like background in XML for Android? - java

I'm working on an app that requires me to create a Window-like background in Android like
,
where each pane represents an Image that can be pressed.
I have come up with
,
but I don't know how to set the grids. I have used TableLayout here & I want each of my TableRows to have such a background that it looks like it's forming the grid of the Window.
Following is the background created in XML that is used by my TableLayout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="30dp" android:topRightRadius="30dp"/>
<solid android:color="#FDFDFD"/>
<stroke android:color="#454545" android:width="1dp"/>
</shape>
Please help

try to use gridview.
https://developer.android.com/guide/topics/ui/layout/gridview.html
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>

Use a GridView or a RecyclerView with gridlayoutmanager to get a proper scrollable grid-like arrangement.
Use a GridView if you want the coding to be nice and easy; however it will need a viewholder pattern for smooth scrolling. If you want super flexibility like directions of scrolling etc. Use a RecyclerView if you need to use a viewholder pattern anyway.
RecyclerView supports Grids, Linear and StaggeredGrids with horizontal and/or vertical scrolling. It uses a LayoutManager to handle all this -> LinearLayoutManager, GridLayoutManager StaggeredGridLayoutManager with direction either horizontal or vertical.
Reference for GridView: http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/
Reference for RecyclerView: https://realm.io/news/android-recycler-view/

Related

Android Recycler View notifyItemRemoved animation cut off

I'm currently working on a Grade Manager for school written in Java for Android 6. I just started with Android so I'm no expert.
The Problem:
If I call the method notifyItemRemoved() on my RecycleView Adapter and the last CardView moves from the left bottom place to the upper right place, the View is resized and the animation is cut of.
Now I don't know why that view is resized because RecycleView's layout_height attribute is match_parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".SemesterActivity"
tools:showIn="#layout/activity_semester">
<android.support.v7.widget.RecyclerView
android:id="#+id/subject_list_view"
android:padding="20dp"
android:layout_below="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
</android.support.v4.widget.NestedScrollView>
I took a GridLayoutManager as LayoutManager for the RecycleView.
subjectListView.setLayoutManager(new GridLayoutManager(ActivityContext, 2));
How i update the RecycleView:
SubjectAdapterObj.notifyItemRemoved(viewHolder.getAdapterPosition());
The animation is the default animation.
Could the GridLayoutManager be the problem?
Video Example:
Sorry. English is not my native language.
So I finally found out what the problem was.
It actually was the NestedScrollView which resizes it's children.
So what you need to do is to simply add android:fillViewport="true" to your NestedScrollView.
Thats it. I hope it helps someone although it's not a really difficult bug. I just searched at the wrong places.

Android add border image to ImageView

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

android border with different width

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

How to create a layout which has circles and inside the circles are hidden numbers once clicked you view the number. See Image

How can i create a layout which has circles and inside the circles are hidden numbers once clicked you view the number?. I would like this kind of layout where i have numbers displayed for seconds and hidden by such shapes but i dont know how to achieve this. I am still new in the Android Studio and any help at this moment will be helpful.
This is what i would want it to look like. I want to display on 5 circle/oval buttons with numbers hidden inside and after clicking them that is when you see the numbers
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
android:angle="270"/>
</shape>
using a view with bacackground as circle.xml create a circle
<View android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/circle"/>
Then onclick hide this layout.show a textview at the position of this layout.

Darken the screen except one gridview item in Android

I am trying to find a way to darken the entire screen except for a specific gridview item (in order to draw attention to this specific item).
I have been able to darken the whole screen by putting a black partially transperant view in front of the app content like this:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/gridView"
android:numColumns="2"/>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#88000000" />
</FrameLayout>
Unfortunately I cannot come up with a way to make one gridview item not get darker. Can anyone help me out here?
Inflate the gridview position view in a custom dialog which maintains its x, y position on screen and 'darkens' the rest of the layout.
Could this also work? Set a background color to whatever you want and in getView return transparent image to all grid items except the one you want to display.

Categories