i am new to android studio and i am trying to fit the image every device but its smaller in high density devices how can i solve this.

See how the edge of the graphic is basically aligned with the right edge of the text? Instead of constraining to the parent's right edge, maybe constrain to the text edge instead. It depends how your layout is designed! Should the graphic always be 60dp (or whatever) from the edge of the screen? Or should it always align with the text? When working with responsive designs, you need to think about what should happen when you have more (or less!) space, where things should go, and what the relationships between the different components are. Broadly, should element X be positioned and sized relative to element Y, or should it be relative to the screen, the available space?

There's a lot to learn on this, but have a look at the docs on supporting different screen sizes and the section after on responsive layouts. Maybe this ConstraintLayout tutorial which shows some of the tools you have available! And don't forget you can use different devices in the Layout Designer preview window - check how your design looks on different screen sizes, densities (like phone vs tablet) etc.

And just a quick overview on the dp and sp thing. dp is a way of defining fixed sizes that look basically the same on any device. 160dp is about an inch on the screen, for every device. So when you define a 60dp margin, that's a fixed size of about 1cm.

On some devices, that's a decent chunk of the screen - on others, it's a very small part of it. On a watch, that's half of it! This is why you need to keep this variability in mind when you're building responsive designs (and, for the watch example, you might want a completely different layout)

sp is like dp but it scales according to the user's system font size settings. So this is usually used for text so they can control how big it is to make it more comfortable to read - when you're using sp values, you always need to test what your layouts look like at different size settings, especially the larger ones!

But you don't have to use sp for all text. Your title above the graphic for example - that's more of a design element, right? You want it to be a certain size, to take up a certain amount of space. It's almost like a logo. And besides - it's already pretty big! Does it need to scale larger to become readable? I'd argue probably not - anyone who needs that is probably gonna have trouble with the rest of your app, because it's unlikely the rest of the text will ever get close to that size.

So in this case, I'd probably use dp so you can consistently lay out your design there (sp on the button is fine - normal text elements should always use sp for accessibility). I'm not sure what the _60sdp dimen value is there (sp? dp?) but it's better to use the correct name so it's clear.

Also in general, you wouldn't use dimen resources for explicit values like that - if it's 60dp, you may as well just write 60dp! Resources are for things like @dimen/horizontalMargin or @dimen/titleTextSize - actual attributes that might be commonly shared across elements, or might vary depending on things like screen size.

By defining the actual value in your resources, you can change everything that uses that attribute by updating the value in one place. And having a named resource means it's clearer why that text is a particular size, or a margin has a particular width - you're describing its purpose, basically. You're getting the worst of both worlds defining a resource called @dimen/60dp, it's more work for none of the benefits!

(Although if you're working on a fixed grid idea where everything is one of a fixed set of values, like 8dp, 16dp, 32dp etc and you want to define those, I could see that. But even then it might be better to name them differently, just so it's clearer what you're doing and why. Just pointing it out since you're new to this!)