I want to design
like this. how to set first charecter to that circle and should circle be in random color.
You can't directly set a text to image view but you can use the Relative layout and Text-View to do so.
let's see how.
This is the result:-
This is the code
here is the code for your xml layout file
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="100dp"
app:cardBackgroundColor="#color/transparent">
<RelativeLayout
android:layout_width="150dp"
android:layout_height="150dp">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#null"
android:background="#color/grey"
/>
<TextView
android:id="#+id/person_name_first_letter_txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="K or whatever your person name is"
android:maxLength="1"
android:textColor="#color/white"
android:textSize="80dp"
android:gravity="center"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
here is the array of colors for picking a random color in colors.xml
<array name="random_color_array">
<item>#37BFA8</item>
<item>#F50057</item>
<item>#3D5AFE</item>
<item>#FF3D00</item>
<!-- add more colors according to your need-->
</array>
Now here is the code for the activity in java
TextView name_text = findViewById(R.id.person_name_first_letter_txt);
ImageView background_image = findViewById(R.id.img);
String user_name = "John Doe";
String[] colorsTxt = getApplicationContext().getResources().getStringArray(R.array.allcolors);
List<Integer> colors = new ArrayList<Integer>();
for (int i = 0; i < colorsTxt.length; i++) {
int newColor = Color.parseColor(colorsTxt[i]);
colors.add(newColor);
}
Random random = new Random();
int color = colors[random.nextInt(colors.length)];
background_image.setBackgroundColor(getResources().getColor(color));
name_text.setText(user_name);
TRY this
Change color as per your requirement.
you will add colors programmatically.
and text add pragmatically using this link
Textview -
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/ic_baseline_circle_24"
android:gravity="center"
android:maxLength="1"
android:padding="10dp"
android:text="M"
android:textColor="#android:color/white"
android:textSize="12sp"
android:textStyle="normal" />
add in res/drawable/ic_baseline_circle_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#41B582"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#android:color/white"
android:pathData="M12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2z" />
</vector>
Related
How to fill a ConstraintLayout with two radioButtons inside of a RadioGroup? I can't find a way to do it. I post here two images, one is how I want to make it look, and the other is how it looks right now with my code.
This is how it looks right now
This is how I want
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout6">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/radio_selector"
android:button="#color/transparent"
android:elevation="4dp"
android:padding="16dp"
android:text="Paypal"
android:textAlignment="center" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/radio_selector"
android:button="#color/transparent"
android:elevation="4dp"
android:padding="16dp"
android:text="Contrarreembolso"
android:textAlignment="center" />
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
The best thing that I could do after reading some answers on StackOverflow and trying many things is to get to this point:
I have taken this layout:
<?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=".MainActivity">
<RadioGroup
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:background="#193312"
android:elevation="4dp"
android:text="Paypal"
android:textAlignment="center" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#122B33"
android:elevation="4dp"
android:gravity="center"
android:text="Contrarreembolso"
android:textAlignment="center" />
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
And used this code to get the height of the screen and put half of it on my views, inside your activity:
#Override
protected void onStart() {
super.onStart();
//Get the height is the screen
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
DisplayMetrics displayMetrics = new DisplayMetrics();
RadioButton radioButton1 = findViewById(R.id.radioButton);
RadioButton radioButton2 = findViewById(R.id.radioButton2);
//Give view half of the screen height
ViewGroup.LayoutParams params = radioButton1.getLayoutParams();
params.height = (height)/2;
ViewGroup.LayoutParams params2 = radioButton2.getLayoutParams();
params2.height = (height)/2;
}
Notice that this layout is not perfect looking, your radio buttons do spread across your device in height but they are not equal, the one thing left to do if you want your button to be equal in height is to calculate the action bar height and take it into account.
I am designing an Android XML layout that contains a few ImageViews representing images of checkmarks and red Xs. I have run into a few issues with these images containing extra margin/padding when presented to the screen.
Notice that there appears to be no Right or Left margin/padding but there is plenty of top/bottom padding.
The images are PNG formats following the guidelines for creating Small/Context Icons described at http://developer.android.com/design/style/iconography.html
I would like to correct the issue by having the margin/padding match the effect of its horizontal margin/padding.
Here is the XML of the layout:
<!-- Event Reoccuring -->
<LinearLayout
android:id="#+id/event_reoccur_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="5dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
>
<TextView
android:id="#+id/kid_event_reoccur_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_gravity="center_vertical"
android:text="#string/event_reoccur"
/>
<ImageView
android:id="#+id/kid_event_reoccur_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:layout_gravity="center_vertical"
android:contentDescription="#string/indicator"
/>
<TextView
android:id="#+id/kid_event_reoccur"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:layout_gravity="center_vertical"
android:paddingLeft="4dp"
android:text="#string/not_applicable"
/>
</LinearLayout>
<!-- Age Required -->
<LinearLayout
android:id="#+id/event_age_req_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
>
<TextView
android:id="#+id/kid_event_age_req_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_gravity="center_vertical"
android:text="#string/event_age_req"
/>
<ImageView
android:id="#+id/kid_event_age_req_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:gravity="center_vertical"
android:contentDescription="#string/indicator"
/>
<TextView
android:id="#+id/kid_event_age_req"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:layout_gravity="center_vertical"
android:paddingLeft="4dp"
android:text="#string/not_applicable"
/>
</LinearLayout>
Here is the code that populates the ImageViews (Note - mReoccurIndcator & mAgeReqIndicator are ImageViews while mReoccurence & mAgeReq are TextViews):
#TargetApi(16)
private void setupEventReoccurence(View v) {
// Get Reference
mReoccurence = (TextView) v.findViewById(R.id.kid_event_reoccur);
mReoccurence.setText(boolToString(mEvent.isReoccuring()));
// Checkmark/X indicator
mReoccurIndicator = (ImageView) v.findViewById(R.id.kid_event_reoccur_indicator);
mReoccurIndicator.setImageResource(R.drawable.greencheck_small_context_icon);
mReoccurIndicator.setScaleType(ScaleType.CENTER_INSIDE);
mReoccurIndicator.setCropToPadding(true);
//mReoccurIndicator.setMaxHeight((int) mReoccurence.getTextSize());
//mReoccurIndicator.setMinimumHeight((int) mReoccurence.getTextSize());
Log.d(TAG, "getTextSize() as float: " + mReoccurence.getTextSize());
Log.d(TAG, "getTextSize() as int: " + (int) mReoccurence.getTextSize());
}
#TargetApi(16)
private void setupEventAgeReq(View v) {
// Get Reference
mAgeReq = (TextView) v.findViewById(R.id.kid_event_age_req);
mAgeReq.setText(boolToString(mEvent.isAgeReq()));
// Checkmark/X indicator
mAgeReqIndicator = (ImageView) v.findViewById(R.id.kid_event_age_req_indicator);
mAgeReqIndicator.setImageResource(R.drawable.greencheck_small_context_icon);
mAgeReqIndicator.setScaleType(ScaleType.CENTER_INSIDE);
mAgeReqIndicator.setCropToPadding(true);
//mAgeReqIndicator.setMaxHeight((int) mReoccurence.getTextSize());
//mAgeReqIndicator.setMinimumHeight((int) mReoccurence.getTextSize());
Log.d(TAG, "getTextSize() as float: " + mReoccurence.getTextSize());
Log.d(TAG, "getTextSize() as int: " + (int) mReoccurence.getTextSize());
}
Just found a solution through another question:
Unwanted padding around an ImageView
android:adjustViewBounds="true" on the ImageView XML object solves issue.
Well you can also do something like below
ImageView image = new ImageView(this);
image.setAdjustViewBounds(true);
image.setImageResource(R.drawable.image_file);
Use RelativeLayout instead of LinearLayout. Also, try to avoid using attributes like weight unless it is necessary.
So im using this awesome Cards library (CardsUI) and trying to figure out how to insert my own text into these views grammatically. Im my main activity im parsing JSON data, now i want to use data from the JSON and insert the text into the Cards. Here is some code i have so far.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hello_enlighten);
// the id title is referencing the title in my card layout below
system_id = (TextView) findViewById(R.id.title);
system_name = (TextView) findViewById(R.id.system_name);
CardUI mCardView = (CardUI) findViewById(R.id.cardUI1);
mCardView.setSwipeable(false);
// add AndroidViews Cards
mCardView.addCard(new MyCard("Get the CardsUI view"));
mCardView.addCardToLastStack(new MyCard("for Android at"));
MyCard androidViewsCard = new MyCard("www.androidviews.net");
mCardView.addCardToLastStack(androidViewsCard);
// draw cards
mCardView.refresh();
// Here is my JSON Parsing activity.
new ProgressTask(WelcomeYou.this).execute();
}
My Card Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="16dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<TextView
android:id="#+id/title"
style="#style/CardTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="title" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="4dp"
android:background="#color/stroke" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selectable_background_cardbank"
android:gravity="center_vertical"
android:padding="4dp" >
<TextView
android:id="#+id/description"
style="#style/CardText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:ellipsize="end"
android:maxLines="4"
android:text="description" />
</LinearLayout>
</LinearLayout>
Im simply trying to put text into the here mCardView.addCard(new MyCard("PUT JSON STRING HERE"));
I know this question was posted a while ago, but I'm just now using the CardUI and I've got it to work. I don't know what R.id.activity_hello_enlighten contains, but if you look at the example provided with their source, the layout from your activity should be using a CardUI component.
Code from the example layout:
<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" >
<com.fima.cardsui.views.CardUI
android:id="#+id/cardsview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Otherwise there's nothing actually doing your card rendering to the screen.
Once you do this, get a pointer to the CardUI referenced by your layout (in the example code it's called cardsview) with the following code:
mCardView = (CardUI) findViewById(R.id.cardsview);
After that, it's as simple as adding a new card like this:
mCardView.addCardToLastStack(new MyCard("Your card's text!"));
I need to apply a translation animation to an ImageView, this ImageView is positioned at certain place and i need to animate it to the center of the screen. Here is my translate xml code, but it doesn't animate the ImageView to the center.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0%p"
android:fromYDelta="0%p"
android:toXDelta="50%p"
android:toYDelta="50%p" />
</set>
This is the XML where the ImageView is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/WelcomeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/welcome_background"
android:orientation="vertical" >
<ImageView
android:id="#+id/welcome_innovaLogo"
android:layout_width="300dp"
android:layout_height="150dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="1dp"
android:layout_marginTop="5dp"
android:contentDescription="#string/welcome_innovaLogoString"
android:scaleType="fitXY"
android:src="#drawable/innova_logo" >
</ImageView>
<TextView
android:id="#+id/welcome_innovaInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/welcome_innovaLogo"
android:layout_marginTop="20dp"
android:layout_toRightOf="#+id/welcome_innovaLogo"
android:text="#string/welcome_innovaInfoString"
android:textColor="#9acd32"
android:textStyle="bold" />
<TextView
android:id="#+id/welcome_innovaHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/welcome_innovaInfo"
android:layout_marginRight="20dp"
android:text="#string/welcome_innovaHeaderString"
android:textColor="#9acd32"
android:textSize="20sp"
android:textStyle="italic" />
<ListView
android:id="#+id/welcome_commandsListView"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_below="#+id/welcome_innovaLogo"
android:layout_marginTop="40dp"
android:cacheColorHint="#00000000" />
<LinearLayout
android:id="#+id/welcome_loadingLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:orientation="horizontal"
android:visibility="invisible" >
<ProgressBar
style="?android:attr/progressBarStyleSmall"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminateDrawable="#drawable/progress_large" />
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="Loading Data..."
android:textColor="#color/green_color"
android:textSize="19sp" >
</TextView>
</LinearLayout>
<!--
<fragment
android:id="#+id/welcome_facebookFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/welcome_innovaLogo"
android:layout_marginLeft="20dp"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_toRightOf="#+id/welcome_commandsListView"
class="innovaEgypt.com.Welcome.FacebookFragment" >
</fragment>
-->
Have a look at this question. I gave a similar answer but the animation is not from an xml but from code. Hope it helps.
EDIT:
Your problem is that the animation doesn't take into account the image dimensions. The animation is centering the origin coordinate of your ImageView.
I still suggest my solution.
I tried the code in the answer that I linked and it works. Just copy this function:
private void moveViewToScreenCenter( View view )
{
RelativeLayout root = (RelativeLayout) findViewById( R.id.WelcomeLayout );
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics( dm );
int statusBarOffset = dm.heightPixels - root.getMeasuredHeight();
int originalPos[] = new int[2];
view.getLocationOnScreen( originalPos );
int xDest = dm.widthPixels/2;
xDest -= (view.getMeasuredWidth()/2);
int yDest = dm.heightPixels/2 - (view.getMeasuredHeight()/2) - statusBarOffset;
TranslateAnimation anim = new TranslateAnimation( 0, xDest - originalPos[0] , 0, yDest - originalPos[1] );
anim.setDuration(1000);
anim.setFillAfter( true );
view.startAnimation(anim);
}
and call it passing your view as the parameter:
ImageView img1 = (ImageView) findViewById( R.id.welcome_innovaLogo );
moveViewToScreenCenter(img1);
If your image still disappear, maybe is because it is behind your other widgets, like the ListView. If that is the case, reestructure your xml layout definig the ImageView at the end, just after the Listview (just cut and paste the ImageView).
For future updates...
Apply view property animation to move position of widget. Image view in this case
int layoutWidth = parentLayout.getWidth();
layoutWidth = ((int) layoutWidth / 2) - (imageView.getWidth()) ;
Log.d(TAG, " position - " + layoutWidth);
imageView.animate()
.translationX(-layoutWidth)
.translationY(0)
.setDuration(500)
.setInterpolator(new LinearInterpolator())
.start();
Try adding delay to this code.
new android.os.Handler().postDelayed(
new Runnable() {
public void run() {
moveViewToScreenCenter( view );
}
},
1000);
I have a list of articles in a listView with text on the left, and an image on the right. If the article doesn't have an image, I'd like the text to go full-width (as opposed to having a marginRight of 60dp).
My noob-java thought process is: I'm already looping through and checking if there's an image... (if there is one, I change which image shows up) within that loop, can I somehow use java to alter the XML of my view to add or remove the imageView and add or remove the margin?
The code I'm using to repeat through and alter the image:
ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.displayImage("", viewHolder.thumbView); //clears previous one
if(article.filepath != null && article.filepath.length() != 0) {
imageLoader.displayImage(
"http://img.mysite.com/processes/resize.php?image=" + article.filepath + "&size=100&quality=70",
viewHolder.thumbView
);
}
My "article_entry_list_adapter.xml":
<?xml version="1.0" encoding="utf-8"?>
<!-- Layout for individual news entries in a list -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp" >
<!-- Title of the news entry -->
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:textSize="13sp"
android:textStyle="bold"
android:textColor="#drawable/list_title_selector" android:typeface="serif"/>
<!-- Subtitle contains author and date -->
<TextView
android:id="#+id/article_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:layout_alignLeft="#id/article_title"
android:layout_below="#id/article_title"
android:textSize="11sp"
android:textColor="#drawable/list_subtitle_selector" />
<com.sltrib.views.WebImageView
android:id="#+id/article_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
android:layout_alignParentRight="true"
android:background="#color/super_light_gray"
android:padding="1dp"
android:scaleType="centerCrop" android:cropToPadding="true"/>
</RelativeLayout>
I would suggest changing your xml layout to something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp" >
<!-- Title of the news entry -->
<com.sltrib.views.WebImageView
android:id="#+id/article_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:adjustViewBounds="true"
android:background="#color/super_light_gray"
android:cropToPadding="true"
android:padding="1dp"
android:scaleType="centerCrop"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_toLeftOf="#id/article_thumbnail"
android:orientation="vertical" >
<TextView
android:id="#+id/article_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Titol"
android:textColor="#drawable/list_title_selector"
android:textSize="13sp"
android:textStyle="bold"
android:typeface="serif" />
<TextView
android:id="#+id/article_subtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Subtitol"
android:textColor="#drawable/list_subtitle_selector"
android:textSize="11sp" />
</LinearLayout>
Then, when there is no image, just set the WebImageView visibility to GONE and the text will take the parent's width.
With your example:
viewHolder.thumbView.setVisibility(View.VISIBLE); //to show the image
viewHolder.thumbView.setVisibility(View.GONE); //to hide the image
You can either alter your viewGroup (setting visibility of your imageView to GONE and adding a margin programmatically) or choose to inflate another xml. As you want to do =)
Just while looping setVisiblity(VIEW.Gone) of article_thumbnail.
TextView textView = (TextView) findViewById(R.id.textView1);
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
llp.setMargins(50, 0, 0, 0); // llp.setMargins(left, top, right, bottom);
textView.setLayoutParams(llp);