I need to create a layout something similar to below picture. My problem is how can I rotate text view and add a background to it. Tried custom textview with draw rotated. But cant position correctly with that method
<Button
android:id="#+id/dealItemPerc"
android:layout_width="150dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:fontFamily="sans-serif-light"
android:background="#drawable/deal_percentage_back"
android:rotation="-45"
android:text="TextView"
android:textColor="#color/app_black"
android:textSize="14sp" />
Tried with a button but that also not worked because cant position correctly.
Created like this. rotated frame layout with text view inside of it. Don't know why the heck someone gave minus rate.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<me.dushyantha.mywebserviceapp.SquareImageView
android:id="#+id/dealItemImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:scaleType="fitXY"
android:src="#drawable/detail_rounded_block" >
</me.dushyantha.mywebserviceapp.SquareImageView>
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:rotation="-45"
>
<TextView
android:id="#+id/dealItemPerc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#drawable/deal_percentage_back"
/>
</FrameLayout>
</RelativeLayout>
activity_main.xml
<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"
tools:context="com.example.test1.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="25dip"
android:background="#android:color/black"
android:padding="5dip"
android:rotation="-45"
android:text="Hello World"
android:textColor="#android:color/white" />
</RelativeLayout>
Nothing to do with java code
Build and run the project.
Done
Related
I know similar questions have been asked before but I think my case is different.
So I'm trying to make a playlist using a RecyclerView and when a song is selected I want the circular image which holds the Image for the song to change to a tick sign while the original image can be seen faded in the background. I have my tick image ready.
How can I add this image over my existing ImageView dynamically? The putting one image in the background method is not a solution for me because the music image file is loaded dynamically from Realm and thus can't be the background.
The XML code for my RecyclerView items is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>
How can I do this dynamically from java code? Can this be done using set visibility somehow? If yes, please explain new ways to do this are appreciated as well.
You can make use of FrameLayout here and place both ImageViews inside the FrameLayout and based on condition you can make one of them visible and other invisible
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="120dp">
</ImageView>
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>
Yes, it can be done by using set visibility. In your layout file, you will most likely need to use a Relative Layout so you can anchor both image views exactly the same. Then on the view you do not want to initially display, you make it invisible by adding the following:
android:visibility="invisible"
Then later on when you want to toggle the visibility on/off, you can use:
myImageView.setVisibility(View.VISIBLE);
myImageView.setVisibility(View.INVISIBLE);
this may sound trivial but I am currently having difficulty in the display of the LikeButton. It does not look as intended.
It is supposed to look like this.
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/Pm1GbfbVvhpmjVU/Screen%20Shot%202014-10-24%20at%2010.25.15%20AM.png
Instead it looks like the following:
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/JEuU1CEq3Dvmzjj/Screen%20Shot%202014-10-24%20at%2010.27.56%20AM.png
Notice the extra long blue space being stretched and "Like" text being extremely small in the second pic.
Here is the code for the layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutFacebookLike"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:screenOrientation="sensorLandscape" >
<TextView
android:id="#+id/textFacebookIncentiveText"
style="#style/Huge"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="48dp"
android:text="#string/txt_facebook_incentive_default"
android:textColor="#android:color/white" />
<RelativeLayout
android:id="#+id/layoutFacebookLikeContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40000000"
android:layout_gravity="center"
android:gravity="center_horizontal">
<Button
android:id="#+id/btnContinue"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="32dp"
android:paddingBottom="16dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:paddingTop="16dp"
android:text="#string/btn_continue"
android:layout_alignParentLeft="false"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:layout_centerInParent="true" />
<com.facebook.widget.LikeView
android:id="#+id/likeView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="64dp"
android:layout_centerInParent="true"
android:textAlignment="gravity"
android:layout_alignParentBottom="false"
android:layout_alignParentLeft="false" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
The code in the activity that I am using is as follows:
LikeView mLikeButton = (LikeView) findViewById(R.id.likeView1);
mLikeButton.setObjectId("121083561691");
mLikeButton.setLikeViewStyle(LikeView.Style.STANDARD);
mLikeButton.setAuxiliaryViewPosition(LikeView.AuxiliaryViewPosition.INLINE);
mLikeButton.setHorizontalAlignment(LikeView.HorizontalAlignment.CENTER);
mLikeButton.setForegroundColor(Color.WHITE);
Please let me know how I can correct it.
This issue arises when you have some themes and styling already set for the activity which interferes with the design of the LikeButton. If you set the default values, the Like Button appears normal.
I'm not able to make a View that fill the height of a RelativeLayout, which is the layout of ListView items. Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:background="#color/red"/>
<TextView
android:id="#+id/delivery_list_item_dest"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/fill_the_height_please"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:text="Destinatario" />
<TextView
android:id="#+id/delivery_list_item_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/delivery_list_item_dest"
android:layout_below="#id/delivery_list_item_dest"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:text="Location" />
<ImageButton
android:id="#+id/delivery_list_item_mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="0dp"
android:src="#drawable/map_location"
android:background="#null" />
View with id fill_the_height_please not fill the item height. In figure below you can see the result (nothing is shown):
I'd like something like this:
รน
I have also try to change view layout as follows but not works anyway:
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:background="#color/red"/>
Please can you help to achieve my goal? Thank you.
One suggestion would be add layout_alignTop="#+id/delivery_list_item_mapBtn" and layout_alignBottom="#+id/delivery_list_item_mapBtn" to the View and make it always fit the image height.
Try changing
android:layout_toRightOf="#id/delivery_list_item_statusBtn"
to
android:layout_toRightOf="#id/fill_the_height_please"
You don't have delivery_list_item_statusBtn. But i see red part even without changing this. Try it and if it doesn't help please post code of your adapter.
Looking here it seems RelativeLayout has a bug in version 17 and lower. So i have change my layout as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:background="#color/red"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/delivery_list_item_dest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Destinatario"
android:layout_marginBottom="5dp" />
<TextView
android:id="#+id/delivery_list_item_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location" />
</LinearLayout>
<ImageButton
android:id="#+id/delivery_list_item_mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="0dp"
android:src="#drawable/map_location"
android:background="#null" />
</RelativeLayout>
A little bit more complex but works. However i leave the question unresolved in case someone find a solution using only a RelativeLayout
I have a problem setting up layout.
Before AD is loaded it looks like this:
After AD is loaded, everything goes to it's place. It looks like this ( correct )
Does anybody know how to fix this problem? Not that only looks "ugly" for the time which AD is loading, but AD may never be loaded also, and layout could stay this way (first image )forever.
Any suggestions?
I have this XML layout:
<com.example.touch.TouchImageView android:id="#+id/mytouchview"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_above="#+id/relat"
/>
<RelativeLayout
android:id="#id/relat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_above="#+id/myAdView"
>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:layout_alignParentLeft="true"
android:background="#null" android:src="#drawable/previous" android:id="#+id/previous"/>
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="20sp" android:text="2/15"
android:id="#+id/memeNumber" android:layout_centerInParent="true" android:layout_margin="5dp"/>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:layout_alignParentRight="true"
android:background="#null" android:src="#drawable/next" android:id="#+id/next"/>
</RelativeLayout>
<com.csjy.sfwn148282.AdView
xmlns:ap="http://schemas.android.com/apk/res-auto"
android:id="#id/myAdView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ap:animation="fade"
ap:placementType="interstitial"
ap:banner_type="inappad"
ap:test_mode="true"
ap:canShowMR="false"
android:layout_alignParentBottom="true"
/>
EDIT:
After #Szymon answer layout looks like this. It's okay because it's the same while loading the AD. The problem is that now, buttons are missing..
Change your top level Relative Layout to a linear Layout (vertical) and then use layout_weight on the three layouts. set the layout_weight for mytouchview to 1 and the other two to 0. This will give mytouchview all the extra space and push the buttons and ad to the bottom. When the ad takes up space it will push the button tray up appropriately, but it won't take any space if the ad never loaded.
Try that one:
<?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" xmlns:app="http://schemas.android.com/apk/res/example.com">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#+id/myAdView"
android:orientation="vertical" >
<com.example.touch.TouchImageView android:id="#+id/mytouchview"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
/>
<RelativeLayout
android:id="#id/+relat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:layout_alignParentLeft="true"
android:background="#null" android:src="#drawable/previous" android:id="#+id/previous"/>
<TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="20sp" android:text="2/15"
android:id="#+id/memeNumber" android:layout_centerInParent="true" android:layout_margin="5dp"/>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp" android:layout_alignParentRight="true"
android:background="#null" android:src="#drawable/next" android:id="#+id/next"/>
</RelativeLayout>
</LinearLayout>
<com.csjy.sfwn148282.AdView
xmlns:ap="http://schemas.android.com/apk/res-auto"
android:id="#id/myAdView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ap:animation="fade"
ap:placementType="interstitial"
ap:banner_type="inappad"
ap:test_mode="true"
ap:canShowMR="false"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
So I'm having a problem that is driving me crazy. Knowing the purpose of my app isn't important/relevant so I'll just paste my code from the xml file. The layout is a RelativeLayout, but the problem I'm having is inside of this LinearLayout.
Code:
<?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:orientation="vertical"
android:background="#drawable/background_orange"
android:id="#+id/rel_layout" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/component_1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="#drawable/source1"
/>
<ImageView
android:id="#+id/component_2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#id/component_1"
android:src="#drawable/source2"
android:layout_alignRight="#id/component_1"
android:layout_marginRight="-50dip"
android:layout_marginBottom="-25dip"
/>
</RelativeLayout>
<LinearLayout
android:id="#+id/problemIsHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal"
>
<EditText
android:id="#+id/edit_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="What's your question?"
android:imeOptions="actionDone"
android:inputType="textCapSentences|textAutoComplete"
android:textSize="25sp"
android:layout_gravity="left"
android:textStyle="bold" />
<ImageButton
android:id="#+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_weight="0"
android:layout_gravity="right"
android:background="#drawable/source3"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/problemIsHere"
android:gravity="center"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/source4"
android:onClick="computeUserInput" />
<ImageButton
android:id="#+id/image_button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_view"
android:layout_alignTop="#id/image_view"
android:layout_marginLeft="-2dip"
android:background="#drawable/voice_recognition_touse"
/>
</RelativeLayout>
Again, this is nested inside of the parent, RelativeLayout. In the preview, when clicking on the "Graphical Layout" tab, this looks like exactly what I want; EditText to the left of a small ImageButton, with correct proportions and margins. However, when I run this on my device, the LinearLayout is REVERSED, meaning now that the EditText is to the RIGHT of the ImageButton. The proportions and margins are still accurate though. Does anyone know what is going wrong here?
Note: I've already cleaned and refreshed my project; this was ineffective. I've also tried removing the layout_gravity attributes, and that did nothing.
Thanks