My question is quite similar to this question. I want to achieve progress indicators that use this style:
That is replacing content like text and images with grey rectangles that animate like here.
I have seen this quite a lot in the past, e.g. Facebook. I am pretty sure that the YouTube app used to have this style.
Questions devided
The obvious first question is on how to this on Android and especially if there is an idiomatic, standard or simple way of achieving this and the second one is closely connected to this because here is my
Problem
How would I ever achieve converting a TextView into such a loading rectangle. I could image replacing my whole view structure with this, but I also do not know where to start with the animation.
Take a look at this library - ShimmerLayout
ShimmerLayout can be used to add shimmer effect (like the one used at Facebook or at LinkedIn) to your Android application.
Also, if you curious about how to implement animation, take a look at the library sources.
You need to create the skeleton layout and inflate it on the whole screen. Then you can use different libraries to add the shimmer effect.
drawable/skeleton.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<solid android:color="#color/skeleton"/>
<corners android:radius="4dp"/>
</shape>
layout/skeleton_row_layout.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"
android:layout_width="match_parent"
android:layout_height="#dimen/row_layout_height">
<View
android:id="#+id/icon"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_margin="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/skeleton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/topText"
android:layout_width="200dp"
app:layout_constraintTop_toTopOf="#id/icon"
app:layout_constraintStart_toEndOf="#id/icon"
android:layout_height="15dp"
android:layout_marginLeft="16dp"
android:background="#drawable/skeleton"/>
<View
android:id="#+id/bottomText"
android:layout_width="250dp"
android:layout_height="15dp"
app:layout_constraintTop_toBottomOf="#id/topText"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/icon"
android:layout_marginLeft="16dp"
android:background="#drawable/skeleton"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#drawable/skeleton"
app:layout_constraintTop_toBottomOf="#id/icon"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</android.support.constraint.ConstraintLayout>
Check out this tutorial I wrote to see how to use it: https://medium.com/#sha17187/upgrade-progress-loading-with-a-skeleton-and-shimmer-effect-in-android-863ea4ff5b0b
Related
I have linked Google login to my 'JoinActivity'. Like this...
activity_join.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".JoinActivity">
<!-- this line-->
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But, I couldn't see any 'visual' button on my Design tab, there was only '200dp-linear button('cause its width values is 200dp. It doesn't have height value. idk why)' on the top-left.
I referenced other sites, videos. They all have visual button like this but not me.
Yes, we can not see the icon in design mode, but it display when
running the app.
Your XML has an error:
This view is not constrained. It only has designtime positions, so it
will jump to (0,0) at runtime unless you add the constraints
To make it work properly, we must add the constraint for horiziation and vertical.
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And this is constraint-layout introduction
Try running Gradle, this sometimes triggers the design to redraw (if you have just added the google library without having ran Gradle fully)
I'm working on Android app with custom camera module. Main purpose of custom camera module is in adding overlay to camera - it should be something like outer transparent border (see first attached pic). It's actually blurred in the attached picture, but I need at least transparent effect as blur is not trivial to implement on Android.
The main point here is to ensure that "clear" visible area is corresponding to A4 format, so height divided by width should be √2 (main purpose of the app is in taking photos of A4 sheets).
I've figured how to achieve "inverted" effect - see second picture. But I can't get my head around on how could setup the view for the desired effect - first picture. Could someone share their thoughts on the problem? Here is the code:
camera.xml:
<LinearLayout
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"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/overlay"
android:layout_width="316dp"
android:layout_height="446dp"
android:layout_centerInParent="true"
android:background="#drawable/overlay"
android:duplicateParentState="false" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:background="#android:color/black">
<Button
android:id="#+id/button_capture"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/capture_button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<Button
android:id="#+id/button_close"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerVertical="true"
android:layout_marginEnd="50dp"
android:layout_marginRight="50dp"
android:layout_toLeftOf="#+id/button_capture"
android:background="#drawable/close" />
</RelativeLayout>
</LinearLayout>
overlay.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<solid android:color="#88ffffff" />
I've found an article about just like what I needed. With little effort I could adjust the code there to get desired effect: https://blog.budiharso.info/2016/01/09/Create-hole-in-android-view/
To avoid tricky vector masks, it's enough to define the id/overlay as layout with 4 semitransparent rectangles, sharing the same drawable you use now: top, bottom, left, and right. You can determine the dimensions of each rectangle at runtime, but if you like intellectual challenges, you can define them as a ConstraintLayout.
I've just started with android and, in order to learn something, i'm simply trying to recreate some basic concept that i found on the web. My biggest question so far is which is the best method to draw a custom curvy shape in android. I know that similar question have been asked multiple times here, but i'm unable to find the solution to my problem.
I do not understand how to replicate a card like this. My only idea so far is to create curvy line in illustrator, save into svg and import in android as vector assets. At this point i was simply thinking to create a white rectangle and overlay the vectori assets. I absolutely don't think this is teh best way to do it but so far i don't know another way.
Thanks and sorry my english
either user CardView or create your custom view.
CardView
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="#dimen/scale_7dp"
app:cardElevation="#dimen/scale_5dp"
app:cardUseCompatPadding="true">
</android.support.v7.widget.CardView>
Custom View
create a shape in your drawable.xml folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/dull_white" />
<corners
android:bottomLeftRadius="#dimen/scale_5dp"
android:bottomRightRadius="#dimen/scale_5dp"
android:topLeftRadius="#dimen/scale_5dp"
android:topRightRadius="#dimen/scale_5dp" />
</shape>
Hope this helps you.
The best implementation would be to use CardView in your layout.
include
compile 'com.android.support:cardview-v7:21.0.0-rc1'
or any other version which is compatible with your existing support library.
after that, use this in your layout xml file
<android.support.v7.widget.CardView
android:id="#+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#color/grey_300"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
place all the other views inside this cardview and you will get a curvy edge.
Add this dependency in app, this lib will give a rounded corner Image and other for cardview.
implementation 'com.makeramen:roundedimageview:2.3.0'
implementation 'com.android.support:cardview-v7:28.0.0-rc01'
In xml parent CardView and its Child RoundedImageView have same corner radius. I hope you know, how cardview works. Where "YOUR_DRAWABLE_HERE" is written please change it with your drawable
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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_margin="10dp"
app:cardElevation="0dp"
app:cardBackgroundColor="#00ffffff"
android:layout_width="match_parent"
android:layout_height="100dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/iv_look"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="YOUR_DRAWABLE_HERE"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riv_corner_radius="10dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_margin="20dp"
android:layout_width="100dp"
android:src="#android:drawable/btn_default"
android:layout_height="50dp" />
<TextView
android:text="YOUR TEXT"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
So, I need a list of items in my app and I want the item layout to be similar to those presented in the android material design guidelines. I've searched a lot but I didn't find ways to recreate the three-line list example:
I don't want to copy it, I just need some guidelines on how to create something similar with the partial separator and the circular image view.
I'm guessing they're using RecyclerView, right?
What library would you recommend me for the circular image view? I've used this one before, but maybe there are some better alternative.
Use a ListView or RecyclerView with a custom adapter.
Your row.xml shoud look something like this (just add some padding, bolding,...).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_download_cloud_green"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grey"/>
</LinearLayout>
</LinearLayout>
Be sure to disable the seperator on your ListView/RecyclerView, you have it in your row.
Also, using the library for CircleImageView is the right thing to do (at least to my knowledge). Have used the same library before, and it is awsome!
I want to have three images in one row, and a Video or two below them.
So far, I am unable to correctly position the three images via Relative Layout.
It gets quite different behaviour from what I expect it to be... it shows only one picture, as though it is a FrameLayout.I can assure you the images are in place. And the java code is nothing but straightforward OnCreate - super.OnCreate, setContentView(R.layout.component_name) .
What is wrong with this relative layout?
<?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/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/previous_frame" />
<ImageView
android:id="#+id/catch_frame"
android:layout_toLeftOf="#+id/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/catch_frame"
/>
<ImageView
android:id="#+id/next_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/next_frame"
android:layout_toLeftOf="#id/catch_frame"
/>
</RelativeLayout>
Check the code use android:toRightOf instead of android:toLeftOf..