i trying to get a layout just like the image below for a game in android studio
currently my xml is
<?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="com.dreacot.testmymemory.Game">
<ImageView
android:id="#+id/imageView"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="53dp"
tools:layout_editor_absoluteY="136dp" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="156dp"
tools:layout_editor_absoluteY="136dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="266dp"
tools:layout_editor_absoluteY="136dp" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="53dp"
tools:layout_editor_absoluteY="285dp" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="156dp"
tools:layout_editor_absoluteY="285dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="72dp"
android:layout_height="115dp"
app:srcCompat="#drawable/backside"
tools:layout_editor_absoluteX="266dp"
tools:layout_editor_absoluteY="285dp" />
i want more cards to be added on the next level eg lvl 2
do i need to make several layouts for each level?
also i want each card to show its face when it is clicked
and finally i feel i am not doing the right thing as i feel xml files cannot be called into the gameplay is there a better way to do this layout(maybe programmatically)?
could anyone help?
The way you are doing it is not the proper way to do it, In this way maybe you can achieve this for 6 cards. What if you have let's say 100 cards or may be 1000, will you add 100 images in Layout and get reference of 100 images in Activity and set Click Listeners and animations to turn the side on 100 images?
Use "GridView" and Adapter for your views, it will do your work with ease.
Check this: https://developer.android.com/guide/topics/ui/layout/gridview.html
You have to do it programmatically.
1. Use RecyclerView with GridLayoutManager to show your card as grid style.
2. Create a layout with just a CardView with single ImageView for your single card item.
3. Create an custom RecyclerView.Adapter<> and use it with RecyclerView to populate your card data on CardView.
4. Add onItemClick listener to Adapter to flip to the specific Card item and do something as per your needs.
Here are some useful links about RecyclerView:
Android RecyclerView with GridLayoutManager Example
Android GridLayoutManager with RecyclerView in Material Design
Simple Android grid example using RecyclerView with GridLayoutManager
Here is a good library for CardView animation.
Hope this will help~
Related
Good afternoon!
I am updating the normal(smart) admob banners for admob Anchored adaptive banners, I am following the example of google but I have several doubts.
I use LinearLayout as a general structure and not RelativeLayout like the google example.
When using the code to display the banner, it underlines two lines.
Example new code banner admob:
<FrameLayout
android:id="#+id/ad_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentBottom="true" />
Yellow underline in android studios (in my code):
android:layout_centerInParent="true"
Message or warning:
Invalid layout param in a LinearLayout: layout_centerInParent
android:layout_alignParentBottom="true"
Message or warning:
Invalid layout param in a LinearLayout: layout_alignParentBottom
Example complet code banner google-admob:
https://github.com/googleads/googleads-mobile-android-examples/blob/master/java/admob/AdaptiveBannerExample/app/src/main/res/layout/activity_my.xml
In the application the test ads are displayed well and work. But I don't like the messages of the underlined code (to avoid problems)
Before I used this code for my SMART banners:
<LinearLayout
android:id="#+id/ad_view_container"
android:orientation="vertical"
android:gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
Could I use the same code for Anchored adaptive banners? or does it have to be FrameLayout..?
thank you for answers
Try This
android:layout_gravity="center_horizontal|bottom"
I created a Tabbed Activity template project using Android Studio.
Then I created a LinearLayout with a nested TextView on it:
<LinearLayout
android:id="#+id/updateView"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_marginTop="707dp"
android:orientation="vertical">
<TextView
android:id="#+id/updateTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:text="TextView" />
</LinearLayout>
This view is shown on preview, but there's none of it in the built app.
When I try to get a reference to it from my code:
LinearLayout lastUpdate = findViewById(R.id.updateView)
I get null in runtime.
So, how can I modify the code?
Preview screenshot
I solved my problem by moving xml code of LinearLayout upper, than code of AppBarLayout, and modification of dynamic pixels (dp) of ViewPager and my textView
My Problem
I've been trying to get my Recycler View's items to animate as I scroll down. These items are loaded from a local XML and passed through my custom adapter.
I'm using this library for my adapter animation
I noticed that no matter what I tried, the items would just not animate at all, or they would animate all at once (every item would slide in on screen at the same time).
What I've Tried So Far
Utilizing the library I mentioned, I tried animating items in my RecyclerView.Adapter.
> IndexFragment.java snippet
//Create an adapter
SongAdapter adapter = new SongAdapter(songs, getContext());
//Set adapter
AlphaInAnimationAdapter alphaAdapter = new AlphaInAnimationAdapter(adapter);
alphaAdapter.setFirstOnly(false);
recyclerView.setAdapter(adapter);
recyclerView.setHasFixedSize(true);
This one failed somehow. I also tried the setItemAnimator method which also failed.
recyclerView.setItemAnimator(new SlideInLeftAnimator());
Layout Structure
So I assume it has something to do with my RecyclerView being inside of two NestedScrollView's.
Another person seemed to be having a similar issue
Below are some portions of my layout files
activity_main.xml
....
<!-- Fragment Container -->
<android.support.v4.widget.NestedScrollView
android:id="#+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
....
This is where I put my fragments
index_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nestedScrollView"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView>
This is pretty much my Recyclerview and its parent Nested Scrollview.
item_song.xml
<?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="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp">
<!--I have two text views in here. Removed them just for this snippet -->
</LinearLayout>
<!-- This displays a background on each item when I press them AKA touch effects -->
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:clickable="true"
android:background="?android:attr/selectableItemBackground" />
</FrameLayout>
This is the structure of each item in the Recyclerview. I inflate this layout for each item. Pretty straightforward.
Any ideas as to what I could do to solve this issue? Thanks.
So after much testing, I finally came up with a solution that worked.
Change the fragment container in activity_main.xml from NestedScrollView to RelativeLayout or perhaps LinearLayout.
Remove the parent NestedScrollView and keep only the RecyclerView in index_fragment.xml.
Animations now work at last. Yay!
Apparently, it is a bad idea to put your RecyclerView inside of a NestedScrollView.
I read somewhere that because of having to load the proper height of its child layout, the NestedScrollView has to wait for it to completely load, in order to know the total height of the RecyclerView. However, I'm not totally sure if that's the reason, so feel free to correct me.
Hope this helps someone!
I want to insert an image to an ImageView, which gets used as a background. This background is in a RecyclerView. When it gets loaded the first time, it looks like this:
But when I scroll to another item and scroll back, it looks like this (it should always look like this):
Here i add the image:
public void onBindViewHolder(StoryViewHolder holder, int position) {
holder.cardView.setMinimumHeight(height/3);
holder.layout.setMinimumHeight((int) ((float) width / 4));
//set image
Picasso.with(activity).load(MainPostAdapter.URL + 140 + ".png").
transform(new BlurTransform(holder.background.getContext())).fit().centerCrop().into(holder.background);
holder.background.setAlpha(0.25f);
}
And this is the image itself:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
What could the problem be?
EDIT:
whole XML (It doesn't show all of the code. Here is also pastebin:http://pastebin.com/8rJvSx7V):
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/story_view_background"/>
<RelativeLayout
android:id="#+id/story_view_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50px">
<ImageView
android:id="#+id/story_view_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/story_view_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="13sp"
android:layout_below="#+id/story_view_image"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</FrameLayout>
try to set android:layout_height="150dp" for your CardView (don't use px!). Its child FrameLayout is unnecesarry (CardView is extending FrameLayout and have set same attributes set), remove it.
It's not so well written, all your Views have match_parent set for height, besides Image and Text views... Your item is probably trying to fit RecyclerView height in this case ("whole screen") and is measured without image at first time (Picasso async downloading, setting image when view is already measured). But when you inflate your View again (scroll and recycle) new list item will be measured differently, because Picasso will insert your image "in runtime", no need to async fetching (cache)
I want to make an app with a login activity/layout similar to what Facebook app has. What I mean is when text field is focused soft keyboard pushes the entire view up but not squashing a logo. I have tried android:windowSoftInputMode="adjustPan/adjustResize" but it is not what I was trying to achieve.
I found this question on SO perhaps it will make things clearer, but it has no solution to the problem.
I have also tried various layouts types but it soft keyboard only pushes the focused < EditText > up. Please guide me.
UPDATE:
<?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="fill_parent"
android:orientation="vertical"
android:background="#DDDDDD">
<RelativeLayout
android:height="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:background="#ff0000">
<ImageView
android:layout_centerVertical="true"
android:layout_height="fill_parent"
android:layout_width="fill_parent"></ImageView>
</RelativeLayout>
<RelativeLayout
android:height="0dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"
android:background="#00ff00">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#0000ff"
android:height="0dp" >
<Button
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Log in"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="4dp"
android:hint="password"
android:inputType="textPassword" >
</EditText>
<EditText
android:id="#+id/editText1"
android:hint="login"
android:padding="4dp"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" ></EditText>
</RelativeLayout>
</LinearLayout>
UPDATE working solution
I can't paste here the entire xml file, but the structure should be enough.
Based on Gabe Sechan's answer.
Layout{
Layout top weight 1
Layout mid weight 1
Layout bot weight 1
}
Child layouts have set to:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" // should be changed accordingly to your layout design.
And here is a Java code for the activity(keyboard up/down):
View top, mid, bot;
final View activityRootView = findViewById(R.id.loginLayout);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView()
.getHeight() - activityRootView.getHeight();
if (heightDiff > 100) { //keyboard up
mid.setVisibility(View.INVISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 0f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 1f));
} else {// keyboard down
// v.setVisibility(View.VISIBLE);
mid.setVisibility(View.VISIBLE);
top.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 2f));
bot.setLayoutParams(new TableLayout.LayoutParams(
LayoutParams.MATCH_PARENT, 0, 3f));
}
}
});
On keyboard up you need to change weights accourding to keyboard up design and on keyboard down change back to the default(layout that you've set via xml/java). I've tested the code on 2.3.x and up.
And don't forget to use android:inputType="textFilter" for the login&password EditText's to remove suggestions on input and save some pixels. In your manifest for the activity android:windowSoftInputMode="adjustResize|stateHidden". stateHidden is used so that keyboard won't be up when activity loads. Hope it helps. Good luck.
They're doing it with relative layouts, adjustResize, and android:layout_centerVertical. Basically, they have a linear layout for their main layout, with 3 equally weighted relative layouts inside of it. Each is set to 0dp height, so they take up equal thirds of the screen. The top RelativeLayout holds the logo, centered vertically. The middle holds the login fields and button, centered vertically one on top of the other. The bottom one holds the copyright text, aligned to bottom. The end result is that when the keyboard comes up, the 3 relative layouts get resized to take 1/3 of the new screen. Then their elements are centered in the new screen.
Remember you need the adjustResize window mode to get this, if you use pan it will just move up and the logo will scroll off center.
In Eclipse, go to File|New|Other and in the Wizard that follows, select Android Activity, then on the next page, select LoginActivity from the list of activities. This has the exact layout you're talking about, and you can use that as a framework. It uses a ScrollView to achieve the effect you're looking for.