I am a Android developer from China(My English sucks...).
I want to make effect like figure 1: A FrameLayouts width and height is both 50% of the screen width,contains an ImageView. The ImageViews width and height is both 50% of the FrameLayout.
I have made it by using PercentLayout,but I want to use constraintLayout to achieve the same effect.How should I do?
Try this:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="#+id/leftGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25"/>
<android.support.constraint.Guideline
android:id="#+id/rightGuideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/wall"
android:layout_gravity="center"
app:layout_widthPercent="50%"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRighttOf="#+id/leftGuideline"
app:layout_constraintRight_toLeftOf="#+id/rightGuideline"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Related
I dont know what is this called , but i want to make my layout work like this, i got a linear layout inside a layout like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="vertical">
.....
</LinearLayout>
</LinearLayout>
and below of this i got recycler view which height size is not more than the layout
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/form_dosen_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingBottom="10dp"
app:layout_constraintTop_toBottomOf="#+id/mhs3_TV1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_percent="1"
app:layout_constraintWidth_default="percent"
app:layout_constraintHeight_percent=".9"
app:layout_constraintHeight_default="percent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:background="#color/gray"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
and i want to make this linear layout gone ( animated went to above and gone) by swipe up
and then focusing this recycler and make this recycler view height become match with layout
i know i can jst simply use simple scrollview but its not like what i wanted
how can i generate icon using 4 diffrent icons like gmail app have icon with text programmatically, i have spend couple of hours to generate it with TextDrawable but would not able to modify it to use with images
here is the screenshot what i am trying to achive
the numbers 1,2 etc will be replaced with other small images.
any hint or help will be appreciated thanks.
Use my layout construction which generate this image:
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:weightSum="2"
android:orientation="vertical"
android:background="#ffacacac"
android:padding="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ffff2983"
android:src="#android:drawable/presence_busy" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ffa1ff55"
android:src="#android:drawable/ic_menu_set_as" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ff5bffec"
android:src="#android:drawable/ic_menu_send" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ff4d4eff"
android:src="#android:drawable/ic_menu_month" />
</LinearLayout>
</LinearLayout>
The easiest way is to use a gridlayout with 2 columns and 2 rows as well. You can fill it with your imageviews right in your xml layout file and can manipulate it in your activity/fragment code or even more in your adapter/viewholder
I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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"
android:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<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="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:
My current layout looks the following:
MY XML layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.
Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.
My layout design is a TextView with long text and a ImageView to the right of the TextView. I want to center the ImageView in its parent vertically, so I used android:layout_centerVertical="true", but it turned out that the ImageView was aligned to the bottom of its parent. If I don't use layout_centerVertical property, the ImageView will be aligned to the top of its parent. How can I solve this problem? Thanks.
<?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="wrap_content"
android:background="#000000">
<ImageView android:id="#+id/t3" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/arrow_right"
android:layout_alignParentRight="true" android:background="#ff0000"
android:layout_centerVertical="true" android:scaleType="centerInside" />
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This a very very very very very very very very very very very very very very very very long sentence"
android:textColor="#231ACC" android:layout_toLeftOf="#id/t3" />
</RelativeLayout>
Try android:layout_gravity="center_vertical"
Add this xml attribute to the child you wish to center within it's parent:
android:layout_centerInParent="true"
This will center it vertically/horizontally.
change android:layout_height="wrap_content" to android:layout_height="fill_parent" of RelativeLayout and add android:layout_centerVertical="true" to TextView, it will work like charm.
You could use a LinearLayout with layout_width and layout_height set to fill_parent and gravity set to vertical_center.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/input_field"
android:gravity="left"
android:layout_weight="1"
android:text="Left Aligned"/>
<EditText
android:id="#+id/input_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:text="Right Aligned"/>
</LinearLayout>
</LinearLayout>
This will put your image to the vertical center of it's parent:
android:layout_gravity="center_vertical"
Demo:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="64dp"
android:orientation="horizontal">
<ImageView
android:layout_width="48dip"
android:layout_height="48dip"
android:src="#drawable/ic_launcher"
android:contentDescription="Application icon"
android:layout_gravity="center_vertical" />
</LinearLayout>
Simply add this:
android:layout_gravity="center_vertical|center_horizontal"
I found this question while building in Android Studio 4.2.1 and the solution after some tinkering was:
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
this way, constraining to both sides automatically centers the widget and satisfies the need for constraints. The same is true when centering vertically, by using:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"