Develop Reference

How to align icon vertically to the center of the first line of textview in Android

I wanted to place my left icon(Please refer image below), vertically centred to first line of the text in TextView. I couldn't find a way, I tried drawableLeft on text view, gravity & constraints but that didn't help. Can anybody help me?
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
app:layout_constraintTop_toTopOf="parent"
android:text="Concepts of deep learning and machine learning workflow" />
</androidx.constraintlayout.widget.ConstraintLayout>

If the ImageView were a TextView you could simply constrain its baseline to the baseline of the other TextView. Unfortunately, ImageViews don't really have a workable concept of baselines, so you can't simply constrain the baseline of the ImageView to the TextView. (Try it to see what happens.)
One way to go is to replace the ImageView with a TextView, set the icon as the TextView's background and constrain the two baselines. Without special consideration, this technique will result in scaling of the tick mark and will result in distortion. To get around this, place the tick mark drawable in a layer-list drawable and specify a gravity. It is the gravity that prevents scaling:
tick_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_tick_mark"
android:gravity="center" />
</layer-list>
The tick mark can look like this:
ic_tick_mark.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#66A8DD"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z" />
</vector>
The layer-list could also be an XML bitmap drawable if the underlying icon is a bitmap.
Another way, which will also work, is to create an empty TextView that has the same characteristics of the TextView you want to attach the tick mark to. Constrain the empty TextView to the baseline of the other TextView. This will position the empty textview alongside the first line of the other TextView.
Now, take the ImageView and constrain its top and bottom to the empty TextView. The tick mark will line up as is wanted.
This is an XML-only solution. Other solutions may involve some coding.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintBottom_toBottomOf="#id/dummyView"
app:layout_constraintEnd_toStartOf="#id/textView"
app:layout_constraintTop_toTopOf="#id/dummyView" />
<TextView
android:id="#+id/textView"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Concepts of deep learning and machine learning workflow"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dummyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBaseline_toBaselineOf="#id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Edit your xml like this:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Concepts of deep learning and machine learning workflow"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
android:layout_marginTop="10dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Created a simple button in Android Studio and nothing appears

I'm new on Android Studio and I just want to create a button who open an URL. For that, I have just created a basic activity from the software. When I try to drag and drop on the design nothing is happening.
Here it is the screenshoot
<?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=".MainActivity">
<Button
android:id="#+id/button2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="24dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Test" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

There is a
app:layout_constraintStart_toStartOf="parent"
missing on your button. You defined it with 0dp width, so it will scale first if you define left and right constraints.
0dp width or height inside a ConstraintLayout means, that the View will take as much space as possible with the defined Constraint attributes. You missed one for the width scaling, so it will stay 0dp.

If problem persist just follow these steps:
File> Invalid cache/Restart > Invalidate and Restart
It will then surely work
Update :
I get this problems too but it works by Choosing another theme

Problem solved by #I_A_Mok with this problem: Why doesn't the layout design preview get displayed on my Android Studio?
"Change Theme in Editor from App Theme to anything with .NoActionBar (e.g. AppCompat.NoActionBar)."
and this is working! thanks a lot! :D

Android ImageButton not enforcing transparency in RelativeLayout

I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>

You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>

Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />

You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">

1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.

Layout on phone & emulator quite different from designer

I am trying out a simple layout exercise but am struggling to get even a simple layout to work.
In the designer it is as follows:
But when run, the output on an emulator or real phone is:
The Xml markup is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hceng.myapplication.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-mail:"
tools:layout_editor_absoluteY="52dp"
tools:layout_editor_absoluteX="18dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="96dp" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="66dp"
tools:layout_editor_absoluteY="41dp" />
</android.support.constraint.ConstraintLayout>
I am new to this markup language, but I thought it seems simple enough with absolute positioning throughout. In any case, the layout seen in the designer is what I want. Why is the above not working?

According to the documentation
When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).
This is the reason why you see layout correctly in editor but not on the emulator.

You can try this, if not bound to ConstraintLayout
<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"
tools:context="com.example.hceng.myapplication.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_tv"
android:text="E-mail:" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:layout_toRightOf="#+id/email_tv"
android:inputType="textEmailAddress" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
android:gravity="center" />
</LinearLayout>

Constraint layout has some limitations but I am not sure if colour is one of them.
First
You could try changing the constraint layout to maybe coordinator layout or relative layout.
If that fails
Maybe, the target SDK version in your Android Manifest is too high, if the target version is higher than phone version, it reverts to defaults. So you could try doing placing a lower target version.

UI too slow to be inflated, causing application to be slow

I have a constraint layout inside a ScrollView. This ConstraintLayout is supposed to be a parent for other Views that will be added into it, as shown:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/generated_main_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.constraint.ConstraintLayout>
When I try to add view to this ConstraintLayout, I inflate the view from XML, with the following code:
(ConstraintLayout) getLayoutInflater().inflate(R.layout.box_npcs, MAIN_CONSTRAINT, false);
This layout is defined in XML1 (end of the question).
Then I add TextViews with information to this Layout's LinearLayout, for that I use a programatically created TextView and add it into the layout
linearLayout.addView(new TextView("Foo"));
With that setup, I add this box to the main constraint layout.
The problem is: When I try to add more than 5 views, it takes a long time to proccess the UI, taking up to 5 seconds on the max amount of view to be added (50).
How can I add Complex Views to a ConstraintLayout in a way that it doesn't lag when trying to add the views?
XML1:
<?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:id="#+id/box_npcs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/npcImage"
android:layout_width="88dp"
android:layout_height="88dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="#+id/layoutInformation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/layoutInformation"
app:srcCompat="#drawable/camera" />
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutInformation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:maxWidth="280dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/npcImage"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/top_priority"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:ellipsize="start"
android:text="DummyTextIsDummy"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/common_google_signin_btn_text_light_default"
android:textSize="22sp"
android:textStyle="bold"
android:typeface="normal"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/linearLayout_high_highest_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="#+id/top_priority"
app:layout_constraintTop_toBottomOf="#+id/top_priority" />
</android.support.constraint.ConstraintLayout>
Images for examples:
Each 'box' in this screen is a box in the Main Constraint Layout.
Each TextLine is a different TextView added to the LinearLayout

What is the android version in your test device?
A few days ago, I found a problem.
If I use two or more ConstraintLayouts in Android 5 or 6, it will be slow.
When I used the Android Studio CPU Profiler, I saw the com.android.internal.policy.impl.phonewindow$decorview.onmeasure spent much time.
So I tried to use LinearLayout, and the problem was solved.
I think ConstraintLayout in Support Library is not friendly for Android 5 or 6.